СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
промокод с таймером при добавлении товаров в корзину

Задача:
Для анонимных, неавторизованных посетителей сайта, которые добавили товар в корзину необходимо показывать промокод с таймером на 20 минут для стимулирования совершения первого заказа.

Настройки формы:
- Показать всплывающий баннер-уведомление тем посетителям, которые добавили товаров в корзину суммарной стоимостью от 3000 рублей
- Форма должна показываться только тем, кто не делал покупок раннее, не авторизован
- Форма должна показываться при уходе с сайта или неактивности 30 секунд на странице
- Форма должна показываться не чаще, чем 1 раз одному посетителю сайта


Пошаговая настройка формы

Шаг 1. Проверьте наличие скрипта сервиса и интеграции
Для этого войдите в аккаунт клиента
Перейдите на страницу установки скрипта
Там внизу должны быть указаны домены, где установлен скрипт.
В случае их отсутствия обратитесь к клиенту или своим разработчикам для установки скрипта.

Для настройки условия показа формы по действиям с корзиной необходима расширенная интеграция с Popmechanic
Без этой интеграции настроить такую механику будет сложно.

Шаг 2. Адаптируйте шаблон под сайт
Возьмите вот этот универсальный шаблон формы.

В нем в меню слева пройдитесь по всем вкладкам:

1. Подставьте нужные тексты и промокод
Тексты утвердите с клиентом или сделайте форму со своим предложением
Если в тексте нужен перенос строки используйте тег в поле ввода на месте переноса <br>.
В этом шаблоне мы рассматриваем создание статического промокода, одинакового для всех.
Не забудьте перед запуском проверить создание этого же промокода с заданными условиями в своей панели управления сайтом, чтобы он действительно выдавал скидку. Ограничения по использованию промокода так же на стороне сайта, мы устанавливаем ограничения только на показ формы.

2. Замените иконку (при необходимости)
На вкладке КАРТИНКИ И ИКОНКИ замените иконку (загрузить можно только формат png)
Сайты с иконками, где можно бесплатно скачать подходящую:
https://www.flaticon.com
https://thenounproject.com/


Обратите внимание, если планируется показ форм на территории Украины, то лучше грузить картинки на свой домен, потому как мы используем Яндекс облако по умолчанию для хранения загруженных картинок. То есть, возможны проблемы с отображение на некоторых провайдерах в Украине.
3. Откорректируйте размеры и отступы элементов
Во вкладках РАЗМЕРЫ (DESKTOP), РАЗМЕРЫ (MOBILE), ОТСТУПЫ (DESKTOP), ОТСТУПЫ (MOBILE), РАЗМЕРЫ ШРИФТОВ (DESKTOP), РАЗМЕРЫ ШРИФТОВ (MOBILE) откорректируйте размеры формы и отступы между элементами.
При выборе размеров рекомендуем ставить масштаб 100%.
При корректировке размеров обращайте особое внимание на мобильную версию формы:

4. Подберите шрифты для формы
Во вкладе ШРИФТЫ: НАСТРОЙКИ ОБЩИЕ (1) вы можете выбрать шрифт из предложенных или использовать свой с сайта.
(2) Шрифт формы из списка предложенных, будет сразу отображаться в превью и на сайте.
(3) Если на вашем сайте используется уникальный шрифт и вы бы хотели его же использовать, поставьте галочку "Использовать свой шрифт?"
(4) В поле "Свой шрифт" вы можете ввести шрифт, точно так же, как он прописан на вашем сайте, где будет показываться форма.
Зайдите на свой сайт, нажмите правой кнопкой мыши на текстовом поле – Посмотреть код
Копируйте его полностью в это поле.

Обратите внимание!
Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно, из-за того, что на сайте самого личного кабинета этого уникального шрифта может не быть. Поэтому тестируйте отображение шрифта по тестовой ссылке
5. Подберите цвета для формы
Во вкладе ЦВЕТА ФОРМЫ выберите подходящие цвета.
Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper
Или же использовать номер цвета с брендбука компании.

6. Определите расположение формы на экране
По умолчанию форма показывается посредине экрана и фон вокруг затемняется (на вкладке Поведение есть уровень затемнения формы)
Но вы можете изменить место расположения формы на экране настройками, которые находятся под превью формы.

Обратите внимание на чекер устройств.
По умолчанию на мобайле и планшете применяются такие же условия, как и на десктопе.
Но измените настройки, особенно, если вы используете отступы на десктопе (чтобы на мобайле форма не улетела за края экрана из-за отступов)

7. Настройте таймер на 20 минут после показа формы
Раздел Поведение – Таймер – На промежуток времени – с первого посещения клиентом – 20 минут
С первого посещения = с момента показа формы
Если всё корректно, то таймер будет показываться в превью:
8. Проверьте мобильную версию формы
Обратите внимание – кнопка "Копировать" в мобильной версии этого шаблона по умолчанию отключена.
Это сделано специально, потом как на мобильных устройствах не работает JS-код копирования в буфер обмена, а на десктопе работает на большинстве устройств и браузеров.
Шаг 4. Создайте тестовую ссылку и проверьте форму

Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
https://demoshop.mindbox.cloud/?pm-test-form=e4019309c60b55810880271b23207d276de6b57af56ee2173ba0ff84b1239bab

Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида формы.

Шаг 5. Кнопка вызова формы

При желании вы можете под форму создать небольшой ярлык сбоку экрана, который будет открывать форму по заданным условиям
Нажмите "Пропустить", если этот пункт не нужен.

Для данной механики пункт можно использовать, чтобы после закрытия формы кнопка показывалась и к промокоду можно было вернуться позже.

Детальнее о кнопке вызова по ссылке

Установите у кнопки поведение – После показа и закрытия поп-апа
Тогда она появится только для того, чтобы к форме можно было вернуться позже.
Но обратите внимание, что мы не можем ограничить показ кнопки 20 минутами после показа формы.
Шаг 6. Настройки таргетинга: кому показывать форму

1. Сразу рекомендуем переключится на Расширенный режим настроек:
В нашей задаче были такие условия:
1) Показ тем посетителям, которые добавили товаров в корзину суммарной стоимостью от 3000 рублей
2) Форма должна показываться только тем, кто не делал покупок раннее, не авторизован
3) Форма должна показываться не чаще, чем 1 раз одному посетителю сайта

Условие 1 по сумме товаров в корзине реализуется с помощью JS-сужения по шаблонам, которые можно найти в этой инструкции

Добавляем условие в основную группу условий – JS-сужение:
С инструкции берем нужный код и адаптируем его под задачу

Добавляем в окошко для ввода js-кода шаблон ниже, где вместо 3000 – нужная вам минимальная сумма:
Показ тем посетителям, у кого сумма товаров в корзине больше 3 000 рублей
var sum = 3000; 
var sign = '>'; 
var checkDiscount = true; 
var includeDelivery = true;

var total = (checkDiscount && window.PopMechanicCartData.totalWithDiscount ? window.PopMechanicCartData.totalWithDiscount : window.PopMechanicCartData.total) + (includeDelivery ? window.PopMechanicCartData.delivery || 0 : 0);

switch (sign) {
  case '=': return total === sum;
  case '>=': return total >= sum;
  case '>': return total > sum;
  case '<=': return total <= sum;
  case '<': return total < sum;
  default: return false;
}
2) форма должна показываться только тем, кто не делал покупок раннее
Для этого нам нужно использовать данные расширенной интеграции (если вы передаете флажки посетителю сайта, когда он является клиентом) или же сегмента Mindbox (выбирайте этот вариант, если пользуетесь Mindbox)

Для этого создайте в Mindbox сегмент "Делали покупки хотя бы 1 раз" и настройке ИСКЛЮЧЕНИЕ показа формы этому сегменту по инструкции:
3) форма должна показываться не чаще, чем 1 раз одному посетителю сайта

Для этого добавляем условие Действия с формой – форма показана – текущая форма – никогда не была:
6. Настройте тест в Google Optimize и добавьте условие в таргетинг
Для того, чтобы понять, насколько влияет показ такой формы на доход сайта крайне рекомендуем создать тест в Google Optimize. Это позволит создать контрольную группу посетителей сайта, которым форма не будет показана.
О том, как настроить тест и связать его с формой описано в этой статье.
Шаг 7. Условия показа формы

Условия показа – настройка, чтобы не раздражать посетителей сайта показом сразу же.
Можете на старте работы оставить условие 5 секунд на странице, а со временем пробовать другие условия и комбинировать их.

Детальнее об условиях показа
Шаг 8. Настройка интеграции

Для этой формы данный шаг можно пропустить.
Контактов в этой форме нет, чтобы их куда-либо передавать
Или же можете настроить передачу данных в Google Analytics
Шаг 10. Тест и запуск формы
Включите форму с помощью переключателя активности формы:
Если у вас возникли сложности на любом шаге настройки – напишите в нашу поддержку.
Чат с поддержкой есть справа внизу в личном кабинете.

Настройка формы 2
- Показать всплывающий баннер-уведомление тем посетителям, которые добавили товаров в корзину суммарной стоимостью от 10 000 рублей о том, что они могут получить скидку -5% на свой заказ
- Форма должна показываться только тем, кто не делал покупок раннее
- Форма должна показываться не чаще, чем 1 раз одному посетителю сайта
- В форме должен быть промокод, который можно скопировать

Используйте вот этот шаблон, если промокод будет статическим и одним для всех (рекомендуем)
Обратите внимание, что копирование промокода не работает на мобайле, поэтому кнопку рекомендуем на мобильных устройствах отключать.

Если же вы хотите загрузить пулл промокодов в Popmechanic с файла и выдавать их по клику в форме, то используйте вот этот шаблон
Детальнее о том, как настроить динамические промокоды в форме

Адаптируйте, протестируйте форму по аналогии с формой 1.

Обратите внимание, что само выполнение условий акции должно проверяться на сайте.
Чтобы не возникло ситуации, когда добирают в корзину на определенную сумму, получают промокод и используют его с меньшей суммой.

Вам была полезна эта статья?