# 🧩 Работа с переменными в Gravity Field

Переменные позволяют сделать шаблоны кампаний гибкими и удобными для редактирования — прямо из интерфейса, без вмешательства разработчиков.

Это особенно полезно, если вы хотите:

- Изменять текст, изображения, цвета или ссылки в шаблоне без правки кода;
- Быстро настраивать разные версии кампаний;
- Передавать данные в шаблон из API (например, SKU или показатели по товару);
- Позволить бизнес-пользователям управлять контентом самостоятельно.

> 💡 Использование переменных ускоряет запуск кампаний и позволяет повторно использовать шаблоны. Подробнее см. [Работа с шаблонами](./templates.md)

---

## ✨ Что можно сделать с переменными?

- Превратить любой фрагмент HTML / CSS / JS в переменную;
- Связывать переменные с полями в интерфейсе;
- Использовать переменные как в Web, так и в API-кампаниях;
- Группировать переменные для удобной навигации.

---

## 🛠 Как создать переменную?

1. Откройте визуальный редактор шаблона.
2. Выделите нужный элемент на странице.
3. Кликните правой кнопкой мыши и выберите **"Add Variable"**.

![](/images/manage_variables/Screenshot_2024-09-12_at_17.15.21.png)

4. В правой панели задайте:
   - Название переменной.
   - Тип переменной (например, текст, изображение, число).
   - Дополнительные параметры — зависят от типа.

![](/images/manage_variables/Screenshot_2024-09-12_at_17.15.28.png)

---

## 📋 Типы переменных

В таблице ниже — все доступные типы переменных и где они применяются:

| Тип переменной                             | Параметры                                                       | Кампании         |
|--------------------------------------------|------------------------------------------------------------------|------------------|
| **Текст**                                  | Значение по умолчанию                                            | Web / API        |
| **Изображение**                            | Загрузка файла (до 6 МБ)                                         | Web / API        |
| **Выпадающий список**                      | Пары ключ — значение                                             | Web / API        |
| **Палитра цветов**                         | HEX / RGB + прозрачность                                         | Web / API        |
| **Число**                                  | Значение по умолчанию, диапазон (мин/макс)                      | Web / API        |
| **Рекомендательная стратегия**             | Выбор из доступных стратегий                                     | Web              |
| **CSS селектор**                           | Ввод произвольного селектора                                     | Web              |
| **Social Proof (Product Performance)**     | Динамические данные по просмотрам/покупкам за период             | Web              |

---

## 🔍 Как выглядит переменная в интерфейсе?

- При наведении курсора — показывается подсказка.
- Справа от поля — иконки для редактирования и удаления.
- Значение переменной можно изменить прямо в интерфейсе без захода в код.

---

### 📌 Примеры по типам:

#### 📝 Текст

> Подходит для заголовков, CTA, описаний, промокодов.

---

#### 🖼 Изображение

> Загрузка баннера, фона или иконки.

Допустимые форматы:  
`tiff, jpg, png, webp, gif, svg, mp4` и другие.

---

#### 📎 Выпадающий список

> Позволяет выбрать одно из предопределённых значений (например, “маленький / средний / большой”).

![](/images/manage_variables/Untitled_1.png)

---

#### 🎨 Палитра цветов

> Удобно для настройки фонов, рамок, текста — без необходимости править CSS.

![](/images/manage_variables/Untitled_2.png)

---

#### 🔢 Число

> Полезно, если нужно задать, например, отступ, таймер, процент скидки и т.п.

![](/images/manage_variables/Untitled_3.png)

---

#### 🤖 Рекомендательная стратегия

> Используется в рекомендательных кампаниях. Позволяет переключаться между стратегиями без правки шаблона.

---

#### 🎯 Social Proof (Product Performance)

> Переменная автоматически подставляет данные о популярности товара.

Примеры:
- "42 человека просмотрели этот товар за неделю"
- "18 покупок за 2 дня"

Доступные периоды: день, два дня, неделя, месяц.

> ⚠️ Работает только на страницах товаров.

---

## 🧱 Группировка переменных

Если в шаблоне много переменных — вы можете сгруппировать их для удобства.

- Нажмите **+ Variables Group**
- Укажите:
  - Название группы
  - Цвет
  - Переменные, которые в неё войдут

![](/images/manage_variables/Screenshot_2024-09-12_at_17.14.32_(2).png)

Настройки группы можно изменить, кликнув по иконке управления:

![](/images/manage_variables/Untitled_4.png)

---

## ✅ Быстрый чеклист

- [x] Добавили переменные в нужные элементы шаблона
- [x] Задали каждому переменной имя и тип
- [x] Проверили, что все переменные отображаются в панели
- [x] Протестировали замену значений в интерфейсе
- [x] Использовали группы для удобства, если переменных много

---

## 📚 Связанные материалы

- [Работа с шаблонами](./templates.md)
- [Создание Web-кампаний](./create_web_campaigns.md)
- [API-кампании](./api_campaigns.md)