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

Задача:
У компании есть скидка - 5% для покупок от 10 000 рублей.
Нужно сделать 2 формы, где стимулировать докупать до этой суммы.

Форма 1:
- Показать всплывающий баннер-уведомление тем посетителям, которые добавили товаров в корзину суммарной стоимостью от 2 000 до 9 999 рублей
- Указываем сколько рублей осталось до получения скидки
- Форма должна показываться только тем, кто не делал покупок раннее
- Форма должна показываться не чаще, чем 1 раз одному посетителю сайта

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

Рассмотрим использование подстановки промокода, цифры, сколько осталось до скидки.

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

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

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

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

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

1. Подставьте нужные тексты
Тексты утвердите с клиентом или сделайте форму со своим предложением
Если в тексте нужен перенос строки используйте тег в поле ввода на месте переноса <br>.

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

В этом шаблоне мы предварительно настроили специальную подстановку данных.

Работает она таким образом:

1) В поле "Текст подзаголовка" есть текст "403" с id="popmechanic-upsale-cart"
Если на сайте настроена расширенная интеграция с Popmechanic, то вместо 403 будет показываться сколько осталось добавить товаров в корзину до определенной суммы.
Если вам эта настройка не нужна уберите id="popmechanic-upsale-cart" с текста, если нужна, то оставьте.

2) Саму сумму, до которой мы проверяем необходимо задать в настройках на вкладке "ОСНОВНЫЕ ПАРАМЕТРЫ"
В нашем случае это 10000
То есть, в этой форме на месте "403" на сайте покажется число X
10000 - сумма товаров в корзине = X
То, сколько осталось добрать в корзине до получения суммы, от которой действует спец. предложение:
Интеграция подстановки такой суммы преднастроена только в этом шаблоне.
Вы можете использовать другой шаблон, но для этого вам необходимо будет настроить интеграцию самостоятельно по инструкции

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


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

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

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

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

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

7. Вставьте ссылку на кнопку в форме или уберите показ кнопки вообще
Ссылку можно поставить в параметрах "КНОПКА ФОРМЫ"
Задайте Действие кнопки – перейти по ссылке
И нужную вам ссылку на условия акции на сайте, посадочную или корзину

Скрыть показ кнопки, если решили, что она не нужна, можно в параметрах "СКРЫТИЕ ЭЛЕМЕНТОВ ФОРМЫ"
Шаг 4. Создайте тестовую ссылку и проверьте форму

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

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

ВАЖНО!!!
В данной механике при проверке по тестовой ссылке может не успеть подставиться в форму значение по данным с корзины, потому как форма по тестовой ссылке показывается сразу при переходе на сайт. Таким образом саму подстановку в форму нужной цифры лучше всего тестировать сделав показ формы только на определенных страницах сайта, например, когда страница содержит #pm-test
Шаг 5. Кнопка вызова формы

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

Шаг 6. Настройки таргетинга: кому показывать форму

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

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

Нам нужно сделать 2 условия: больше 2000 рублей в корзине и меньше 9 999 рублей в корзине

Добавляем условие в основную группу условий – JS-сужение:
С инструкции берем нужный код и адаптируем его под задачу
Показ тем посетителям, у кого сумма товаров в корзине меньше 9 999 рублей
var sum = 9999; 
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 000 рублей
var sum = 2000; 
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 отдельных условия JS-сужения и сохраняем их:
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.

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

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