СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
встроенный промокод в карточках группы товаров

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


Шаг 2. Убедитесь, что была сделана расширенная интеграция
Если вы планируете показывать это уведомление только от какой-то стоимости товара в карточке, то для этой механики нужно сделать расширенную интеграцию согласно инструкции.
Для этой механики нужно настроить пункт 3: "Передача данных о текущей странице"

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

Шаг 3. Адаптируйте шаблон под внешний вид сайта
Рекомендуем вот этот шаблон встроенной формы

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

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

3. Скройте элементы, которые не нужны
На вкладке СКРЫТИЕ ЭЛЕМЕНТОВ ФОРМЫ можно убрать таймер, картинку, кнопки при необходимости.
Или можете его настроить на вкладке Поведение до определенной даты
Рекомендуем отключать кнопку на мобильном, потому как копирование промокода может не работать на некоторых мобильных устройствах.

3. Откорректируйте размеры и отступы элементов

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

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

(3) В поле "Свой шрифт" вы можете ввести шрифт, точно так же, как он прописан на вашем сайте, где будет показываться форма.
Зайдите на свой сайт, нажмите правой кнопкой мыши на текстовом поле – Посмотреть код
Копируйте его полностью в это поле.

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

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

Сразу рекомендуем переключится на Расширенный режим настроек:
1. Удалите лишние условия
Поскольку это форма встроенная, то в ней можно удалить лишние условия, например частоты показа (Действия с формами):
2. Добавьте геотаргетинг (при необходимости)
Условие – География – Город или Страна
Введите нужные условия.
Например, если нужно показывать ярлык об акции только по Москве добавьте Город – Одно из значений – Москва:
3. Добавьте условие ограничения показа по стоимости продукта
Если вам нужно показывать форму только на тех страницах товаров, стоимость которых больше какой-то суммы, то необходимо добавить такое условие:

4. Задайте страницы показа
Если вам нужно показывать форму только на тех страницах товаров, стоимость которых больше какой-то суммы, то необходимо добавить такое условие:

4. Настройте любые другие исключения показа, которые необходимы на вашем сайте:

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

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

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

Рекомендуем также добавить исключение показа этого баннера на страницах, на которые мы ведем с него.
Потому как условие "Просмотренные страницы" может не успеть сработать на этой же странице:

5. Настройте тест с помощью Google Optimize
К этой механике рекомендуем сразу создавать тест в Google Optimize
Это тест, который разделит трафик сайта на 2 группы и половина увидит форму.
Необходим для того, чтобы точно определить влияние формы на любой бизнес-показатель, например, доход за сеанс, коэффициент конверсии.
Детальнее о настройке теста в Google Optimize

У вас должно получиться вот так:
Шаг 5. Выбрать, где именно встроить форму на странице сайта

Встроенную форму нужно "встроить" в текущую страницу сайта.
Это можно сделать 2 способами:
1) выбрать селектор на сайте, куда вставить
2) привлечь разработку и поставить div-блок в нужное место страницы сайта

Детальнее о встраивании встроенных форм
Попробуем вставить форму без привлечения разработки на сайт https://gulliver-wear.com/
Как найти нужный селектор, чтобы вставить форму:
1. Заходим на страницу любого товара, например https://gulliver-wear.com/ru/catalog/detskie-platya/plat-e-s-printom-12008gjc2504/
2. Подводим курсор к тому месту, где хотим поместить встроенную форму
Например, я хочу встроить блок с уведомлением после блока названия товара.
3. Нажимаем правой кнопкой мыши – Посмотреть код (если вы используете Google Chrome):

4. Находим этот элемент в коде слева. Жмем опять правой кнопкой мыши – Copy – Copy selector

5. У меня для сайта https://gulliver-wear.com/ru/catalog/detskie-platya/plat-e-s-printom-12008gjc2504/ получился такой селектор:
#current-product-name

В настройках формы вставляем полученное значение (1)
В нашем случае мы хотим отображать уведомление после блока заголовка

6. Нажимаем проверить форму на сайте.
Вставляем полный url карточки товара: https://gulliver-wear.com/ru/catalog/detskie-platya/plat-e-s-printom-12008gjc2504/
Вам может выдавать ошибку, что url не найден, игнорируйте её.
Копируйте полученную тестовую ссылку (3) и откройте её в браузере:

https://gulliver-wear.com/ru/catalog/detskie-platya/plat-e-s-printom-12008gjc2504/?pm-test-form=2f8849d1455de2dbd40ce5495acb3c7d306cf3572b572ccd7cf48a9752cbd241
7. Если вы всё сделали правильно – вам сразу покажется ваша форма в нужном месте.
Тестовая ссылка игнорирует настройки таргетинга.
Отправьте ссылку себе и проверьте корректность отображения формы на мобильном.
Откорректируйте внешний вид на предыдущей вкладке, если это необходимо.

8. Запустите форму.
Проверьте, чтобы она отображалась на нужных страницах.


Если у вас возникли сложности с настройкой данной механики – обратитесь в поддержку Popmechanic
Вам была полезна эта статья?