СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
сегодня товар смотрели/купили Н раз
Задача:
- На карточках товаров категории "Платья" показывать небольшую форму о популярности этого товара для стимулирования совершить покупку.
- Форма должна показываться слева внизу экрана и быть небольшой
- В форме должно быть указано, что этот товар смотрели сегодня от 5 до 20 раз.
- Форма должна показываться через 5 секунд на странице товара
- Форма должна показываться не чаще, чем 1 раз в день


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


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

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

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

Задайте в шаблоне минимальное и максимальное число, которое будет показано в форме.
Например, если минимальное число будет 5, а максимальное 10, то может сгенерироваться 5, 6, 7, 8, 9, 10
Это нужно задать для реалистичности формы.

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

3. Подберите шрифты для формы
Во вкладе ШРИФТЫ: НАСТРОЙКИ ОБЩИЕ вы можете выбрать шрифт из предложенных и настроить размеры шрифтов.

Если вы хотите, чтобы в этом шаблоне, использовался другой шрифт с сайта (необязательно):
- откройте редактор HTML/CSS (1) и разверните CSS (2)
- найдите строку font-family: <%=form_font%>; и удалите её
- добавьте строку font-family: ВАШ ШРИФТ С САЙТА;
Подставьте тот шрифт, который используется на сайте
Как посмотреть шрифт на сайте?
Зайдите на свой сайт, нажмите правой кнопкой мыши на текстовом поле – Посмотреть код
Копируйте его полностью.

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

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

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

Шаг 4. Создайте тестовую ссылку и проверьте форму

Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
Ссылка формата: http://faq.popmechanic.io?pm-test-form=47ea86ccbf3dd61076ae652dc06e5b30df59dffc45ddb176c02075bbfc4d7a17
Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида формы.
Шаг 5. Кнопка вызова формы

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

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

Сразу рекомендуем переключится на Расширенный режим настроек:
Добавьте условие - Страницы показа
Тут вы можете задать группу страниц, на которых показывать форму
У нас в задаче указано, что категория страниц товаров должна быть "Платья".
Мы можем определить категорию по самому url (если структура сайта позволяет это сделать).
Например, показывать только на страницах, где в url есть текст "dress":
Если же по структуре сайта нам непонятно, на каких урлах будут нужные продукты или категории, то необходимо использовать данные с расширенной интеграции с Popmechanic.
Для этого она должна быть настроена на сайте.
После этого вы можете воспользоваться шаблонами для расширенной интеграции
Вам нужны шаблоны для проверки свойств текущей страницы сайта.

И добавить условие – JS-сужение – подставляем код с шаблона и сохраняем:
2) Настройте любые другие исключения показа, которые необходимы на вашем сайте:

- страницы показа
- устройства
- география
- дата и время: день недели, время показа, период показа
- трафик на сайт: источники трафика, utm-метки, переход с сайта
- действия: форма показана/закрыта/заполнена- js-сужение
- сегмент Mindbox

Обратите внимание на вложенность условий в расширенном Pro-таргетинге

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

Шаг 7. Для того, чтобы измерять эффективность формы и повлияла ли она на показатели сайта, необходимо сделать A/B-тест с контрольной группой

Для этого используйте Google Optimize
Детальнее о настройке теста описано в этой статье
Без теста вы не сможете понять, повлиял ли показ форм на показатели сайта

У вас должна добавиться примерно такая настройка в таргетинг с вашим ID эксперимента в Google Optimize:

Шаг 8. Условия показа формы

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

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

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

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