poptimizer Docs

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

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

Зачем это нужно?

Персонализированные попапы конвертируют в 2-3 раза лучше, чем стандартные. Сравните:
  • "Скидка 10% на первый заказ" — стандартно.
  • "Андрей, скидка 10% на ваш заказ на 4 500 руб." — персонализированно.
Контекстные переменные делают второй вариант возможным — без единой строчки кода внутри попапа. Вы пишете шаблон один раз, а данные подставляются автоматически.
🎥
Пример попапа с персонализированным текстом — имя и сумма подставлены из контекста
Место для видео или скриншота

Как это работает

1. Вы передаёте данные

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

2. Вы используете переменные в тексте

В редакторе попапа пишете текст с переменными в двойных фигурных скобках:
Привет, {{userName}}! Ваш заказ на {{cartTotal}} руб. ждёт вас.

3. Переменные заменяются на реальные данные

Когда попап показывается посетителю, {{userName}} превращается в "Андрей", а {{cartTotal}} — в "4 500".
[!NOTE] В редакторе вы видите переменные как есть: {{userName}}. Это нормально — подстановка происходит только на сайте, где есть реальные данные.

Способы передачи данных

Способ 1: Атрибуты на скрипте (самый простой)

Добавьте атрибуты data-context-* к тегу скрипта Poptimizer:
<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" → число, остальное → строка.
[!TIP] Этот способ идеально подходит для статических данных: имя пользователя, город, тариф. Данные считываются один раз при загрузке скрипта.

Способ 2: JavaScript API (для динамических данных)

Для данных, которые меняются после загрузки страницы (корзина, результат расчёта), используйте JavaScript API:
// Передать данные в попап
window.Poptimizer.setContext({
  cartTotal: 4500,
  itemCount: 3,
  promoCode: "SUMMER2026"
});

// Получить текущие данные
const ctx = window.Poptimizer.getContext();
console.log(ctx.cartTotal); // 4500
При вызове setContext попапы автоматически обновляются с новыми данными.
[!TIP] setContext мержит данные — он не стирает старые значения, а дополняет. Вызывайте его сколько угодно раз.

Способ 3: UTM-метки (автоматически)

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" → пропустить шаг регистрации.
🎥
Настройка Exit Rule с источником «Контекст» — условие на сумму корзины
Место для видео или скриншота

Полные примеры

Приветствие по имени

Скрипт:
<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}}%!

UTM-персонализация

Ссылка: https://shop.ru/?utm_campaign=black-friday
В попапе:
Специальное предложение для участников акции {{utmCampaign}}!

Что если переменная не найдена?

Если данные не были переданы, переменная остаётся как есть: {{userName}}. Это позволяет:
  • В редакторе — сразу видеть, где используются переменные.
  • На сайте — заметить, если что-то не настроено (вместо пустого места видна конструкция {{...}}).
[!TIP] Перед публикацией всегда проверяйте, что все используемые переменные передаются на сайте. Посетитель не должен видеть {{userName}} — он должен видеть своё имя.