СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
баннер о сроках доставки с таймером и геолокацией (всплывающий в карточках)

Задача:
- Показать всплывающий баннер-уведомление о том, что при заказе до 17:00 можем доставить товар на следующий день по Москве, Рязани и Санкт-Петербургу.
- Форма должна показываться только на карточках товаров категории "Бытовая техника"
- Форма должна показываться до 16:59 каждый день, кроме выходных.
- Форма должна показываться не чаще, чем раз в 20 минут одному посетителю сайта

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

Пошаговая настройка механики

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

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


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

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

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

Как сделать так, чтобы нужный город (Москва, Рязань, Санкт-Петербург) подставился в форму?
Мы можем:
- показывать формы по городам доставки без текста города
- сделать 3 отдельные формы на разные города
- сделать специальную настройку, которая будет подтягивать город в форму.
Попробуем настроить всё с автоматическим подтягиванием города с инструкции по ссылке выше.
Слово ГОРОД будет заменяться на нужный город:


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. Настройте таймер
- нам не нужен показ дней, их можно отключить на вкладке СКРЫТИЕ ЭЛЕМЕНТОВ ФОРМЫ:
1) Сами настройки таймера находятся на вкладке Поведение (см. на скриншоте ниже п. 1)
2) В задаче у нас было сказано, что при заказе до 17:00 можем доставить товар на следующий день, а значит нам нужно отсчитывать время до этого.
По настройкам это будет цикличный таймер
3) Дни недели тут можно не выбирать, мы их ограничим в настройках таргетинга на следующих шагах
4) Старт отсчета в 00:00
5) Часовой пояс – задайте, по какому будет считаться, в нашем случае UTC(+3) Москва
6) Длительность – задайте до какого часа вести отсчета. В нашем случае это 17 часов

7) Если вы всё задали верно – таймер в превью начнет отсчитывать время до 17 часов , у меня осталось 10 минут :)
А если таймер показывает одни нули, то скорее всего время до 17:00 закончилось и в превью он не будет ничего считать, это нормально:
Шаг 4. Создайте тестовую ссылку и проверьте форму

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

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

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

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

1. Сразу рекомендуем переключится на Расширенный режим настроек:
2. Настраиваем геотаргетинг по городам, которые указаны в задаче
Добавить условие – География – Город – Одно из значений – Москва, Рязань, Санкт-Петербург
3. Настраиваем таргетинг по дням недели и времени
– Добавить условие – Дата и время – День недели – Одно из значений – понедельник, вторник, среда, четверг, пятница
– Добавить условие – Время показа (фикс. часовой пояс) – меньше или равно – 15:59 – по локальному времени (в нашем случае +3)
Это означает, что форма будет показываться по будням с 00:00 до 15:59:
4. Редактируем частоту показа
– Действие с формами – форма показана – как минимум 20 минут
Поскольку целевого действия (клика или подписки) в форме нет, то второе условие с группы можно убрать:
5. Настраиваем показ формы только на карточках товаров определенной категории
Для этого условия обязательно должна быть расширенная интеграция с Popmechanic
– Добавить условие – JS-код – Скопируйте в поле ввода кода пример ниже:
var pattern = "Бытовая техника";
return window.PopMechanicPageData.category.name.toUpperCase() === selectedCategoyName.toUpperCase()
Где вместо "Бытовая техника" – нужная вам категория товаров.
Или же используйте другие js-сужения по id категории, типу страниц и т. д:
6. Настройте тест в Google Optimize и добавьте условие в таргетинг
Для того, чтобы понять, насколько влияет показ такой формы на доход сайта крайне рекомендуем создать тест в Google Optimize. Это позволит создать контрольную группу посетителей сайта, которым форма не будет показана.
О том, как настроить тест и связать его с формой описано в этой статье.
Шаг 7. Условия показа формы

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

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

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

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