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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

var minPrice = 10000;
return window.PopMechanicPageData.product.price > minPrice;
Где вместо 1000 – нужная вам минимальная сумма товара на текущей странице.
5. Настройте тест с помощью Google Optimize
К этой механике рекомендуем сразу создавать тест в Google Optimize.
Настраивается он сразу же в таргетинге формы.
Это тест, который разделит трафик сайта на 2 группы и половина увидит форму.
Необходим для того, чтобы точно определить влияние формы на любой бизнес-показатель, например, доход за сеанс, коэффициент конверсии.
Детальнее о настройке теста в Google Optimize

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

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

Детальнее о встраивании встроенных форм
Попробуем вставить форму без привлечения разработки на сайт https://demoshop.mindbox.cloud/
Как найти нужный селектор, чтобы вставить форму:
1. Заходим на страницу любого товара, например https://demoshop.mindbox.cloud/catalog/dlya_malchikov/tolstovki-3/2427/
2. Подводим курсор к тому месту, где хотим поместить встроенную форму
Например, я хочу встроить блок с уведомлением после блока "Found cheaper?"
3. Нажимаем правой кнопкой мыши – Посмотреть код (если вы используете Google Chrome):

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

5. У меня для сайта https://demoshop.mindbox.cloud/catalog/dlya_malchikov/tolstovki-3/2427/ получился такой селектор:
#bx_117848907_2427 > div.right_info > div > div.middle_info.main_item_wrapper > div.prices_block > div.quantity_block_wrapper
В настройках формы вставляем полученное значение (1)
В нашем случае мы хотим отображать уведомление после блока "Found cheaper?"

6. Нажимаем проверить форму на сайте.
Вставляем полный url карточки товара: https://demoshop.mindbox.cloud/catalog/dlya_malchikov/tolstovki-3/2427/
Вам может выдавать ошибку, что url не найден, игнорируйте её.
Копируйте полученную тестовую ссылку (4) и откройте её в браузере:

https://demoshop.mindbox.cloud/catalog/dlya_malchikov/tolstovki-3/2427/?pm-test-form=81cec1d1e32b17748b3449c3dd296093196269e1ff7b97b420988d2d47e5aec1
7. Если вы всё сделали правильно – вам сразу покажется ваша форма в нужном месте.
Тестовая ссылка игнорирует настройки таргетинга.
Отправьте ссылку себе и проверьте корректность отображения формы на мобильном.
Откорректируйте внешний вид на предыдущей вкладке, если это необходимо.


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


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