Контекстные переменные

Контекстные переменные позволяют передавать данные с вашего сайта внутрь попапа. Имя пользователя, сумма в корзине, город, UTM-метки — всё это можно вставить в текст попапа и использовать в условиях переходов.

Персонализированные попапы конвертируют в 2-3 раза лучше, чем стандартные. Сравните:

• "Скидка 10% на первый заказ" — стандартно.
• "Андрей, скидка 10% на ваш заказ на 4 500 руб." — персонализированно.

Контекстные переменные делают второй вариант возможным — без единой строчки кода внутри попапа. Вы пишете шаблон один раз, а данные подставляются автоматически.

Данные передаются через атрибуты на скрипте Поптимайзер (подробнее ниже) или через JavaScript API.

В редакторе попапа пишете текст с переменными в двойных фигурных скобках:

Привет, {{userName}}! Ваш заказ на {{cartTotal}} руб. ждёт вас.

Когда попап показывается посетителю, {{userName}} превращается в "Андрей", а {{cartTotal}} — в "4 500".

Добавьте атрибуты data-context-* к тегу скрипта Поптимайзер:

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  data-context-user-name="Андрей"
  data-context-cart-total="4500"
  data-context-city="Москва"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

Правила именования:

• Атрибуты начинаются с data-context-.
• Имя пишется через дефис: data-context-user-name.
• В попапе используется camelCase: {{userName}}.
• Значения автоматически распознаются: "true" → булево, "4500" → число, остальное → строка.

Для данных, которые меняются после загрузки страницы (корзина, результат расчёта), используйте JavaScript API:

// Передать данные в попап
window.Poptimizer.setContext({
  cartTotal: 4500,
  itemCount: 3,
  promoCode: "SUMMER2026"
});

// Получить текущие данные
const ctx = window.Poptimizer.getContext();
console.log(ctx.cartTotal); // 4500

При вызове setContext попапы автоматически обновляются с новыми данными.

UTM-параметры из URL подхватываются автоматически. Если пользователь пришёл по ссылке:

https://shop.ru/?utm_source=instagram&utm_campaign=sale

В попапе можно использовать:

{{utmSource}} → instagram
{{utmCampaign}} → sale

Доступные UTM-переменные: utmSource, utmMedium, utmCampaign, utmTerm, utmContent.

Переменные {{имя}} работают в следующих компонентах:

• Текст (RichText) — заголовки, параграфы, подписи.
• Кнопка (ActionButton) — текст на кнопке.

Заголовок: "{{userName}}, у нас для вас подарок!"
Кнопка: "Забрать скидку {{discount}}%"

Контекстные переменные доступны не только в тексте, но и в правилах переходов. Выберите источник "Контекст" при настройке условия:

• Если cartTotal > 5000 → показать экран "VIP-предложение".
• Если utmSource = "instagram" → показать экран со специальной акцией.
• Если userType = "premium" → пропустить шаг регистрации.

Скрипт:

<script defer id="pop-script"
  data-key="ВАШ_KEY"
  data-context-user-name="Мария"
  src="https://poptimizer.ru/popup/script.min.js">
</script>

В редакторе (текст RichText):

Привет, {{userName}}! Рады видеть вас снова.

Результат на сайте:

Привет, Мария! Рады видеть вас снова.

JavaScript на сайте:

// При изменении корзины
function onCartUpdate(cart) {
  const discount = cart.total > 5000 ? 15 : 10;
  window.Poptimizer.setContext({
    cartTotal: cart.total,
    discount: discount
  });
}

В попапе:

Ваш заказ: {{cartTotal}} руб. Скидка {{discount}}%!

Ссылка: https://shop.ru/?utm_campaign=black-friday

В попапе:

Специальное предложение для участников акции {{utmCampaign}}!

Если данные не были переданы, переменная остаётся как есть: {{userName}}. Это позволяет:

• В редакторе — сразу видеть, где используются переменные.
• На сайте — заметить, если что-то не настроено (вместо пустого места видна конструкция {{...}}).