СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
форма подписки интерактивная "Колесо фортуны"
форма подписки интерактивная "Колесо фортуны"
Задача:
Создать игровую форму с "Колесом фортуны", которая будет предлагать выиграть один из подарков за подписку.
Возможные подарки:
- скидка -5%
- бесплатная доставка
- бонусные 500 рублей
- бонусные 400 рублей
Выпадает 1 из вариантов рандомом, вариант нужно передавать в сервис рассылки при создании контакта как его дополнительное поле клиента или действия.
Форму показывать всем, кто посещает сайт в 1 раз, через 2 страницы на сайте.
Исключить показ подписчикам.
К форме можно вернуться после закрытия через кнопку.
Шаг 1. Проверьте наличие скрипта сервиса
Для этого войдите в аккаунт клиента
Перейдите на страницу установки скрипта
Там внизу должны быть указаны домены, где установлен скрипт.
В случае их отсутствия обратитесь к клиенту для установки скрипта.
Шаг 3. Адаптируйте шаблон под сайт
В каталоге Popmechanic есть 2 готовых шаблона для этой механики:
Для этого войдите в аккаунт клиента
Перейдите на страницу установки скрипта
Там внизу должны быть указаны домены, где установлен скрипт.
В случае их отсутствия обратитесь к клиенту для установки скрипта.
Шаг 3. Адаптируйте шаблон под сайт
В каталоге Popmechanic есть 2 готовых шаблона для этой механики:
Для примера возьмем шаблон 1
В нем в меню слева пройдитесь по всем вкладкам:
1. Подставьте нужные тексты
Тексты утвердите с клиентом или сделайте форму со своим предложением
Если в тексте нужен перенос строки используйте тег в поле ввода на месте переноса <br>
2. Загрузите картинки на вкладке КАРТИНКИ И ИКОНКИ.
В вашем случае можно загрузить Картинка верхняя и Картинка на экране благодарности (покажется после подписки)
Дополнительно можно сделать фон самой формы (лучше брать однородную неяркую текстуру при необходимости)
Обратите внимание, если планируется показ форм на территории Украины, то лучше грузить картинки на свой домен, потому как мы используем Яндекс облако по умолчанию для хранения загруженных картинок. То есть, возможны проблемы с отображение на некоторых провайдерах.
В вашем случае можно загрузить Картинка верхняя и Картинка на экране благодарности (покажется после подписки)
Дополнительно можно сделать фон самой формы (лучше брать однородную неяркую текстуру при необходимости)
Обратите внимание, если планируется показ форм на территории Украины, то лучше грузить картинки на свой домен, потому как мы используем Яндекс облако по умолчанию для хранения загруженных картинок. То есть, возможны проблемы с отображение на некоторых провайдерах.
3. Настройте подарки и условия выпадения приза
На вкладке Настройки колеса можно выбрать:
- количество секторов
- количество призов (2 или 4, в нашей задаче 4)
- сами призы, которые нужно написать
Результат выигрыша:
- случайный - выпадает с равной вероятностью один из вариантов (25% если 4 варианта и 50/50, если 2)
- всегда первый - имитируем игру, но при этом подарок всегда один и тот же.
В данном случае при выборе этого варианта будет выпадать всегда скидка -5%, которую мы задали в Заголовке 1-го варианта:
На вкладке Настройки колеса можно выбрать:
- количество секторов
- количество призов (2 или 4, в нашей задаче 4)
- сами призы, которые нужно написать
Результат выигрыша:
- случайный - выпадает с равной вероятностью один из вариантов (25% если 4 варианта и 50/50, если 2)
- всегда первый - имитируем игру, но при этом подарок всегда один и тот же.
В данном случае при выборе этого варианта будет выпадать всегда скидка -5%, которую мы задали в Заголовке 1-го варианта:
4. Вставьте ссылку на политику конфиденциальности
Во вкладке ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ.
Найдите на сайте клиента эту страницу.
Эту настройку не рекомендуем отключать, потому как по законодательству России такая ссылка должна быть в формах сбора данных.
Во вкладке ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ.
Найдите на сайте клиента эту страницу.
Эту настройку не рекомендуем отключать, потому как по законодательству России такая ссылка должна быть в формах сбора данных.
5. Оставьте только нужные поля ввода
Во вкладке ПОЛЯ ВВОДА
Выключите те поля, которые не нужны
Можно оставить или убрать поле имени:
Во вкладке ПОЛЯ ВВОДА
Выключите те поля, которые не нужны
Можно оставить или убрать поле имени:
6. Откорректируйте размеры и отступы элементов
Во вкладках РАЗМЕРЫ, ОТСТУПЫ откорректируйте размеры формы и отступы между элементами.
При выборе размеров рекомендуем ставить масштаб 100%.
При корректировке размеров обращайте особое внимание на мобильную версию формы
Во вкладках РАЗМЕРЫ, ОТСТУПЫ откорректируйте размеры формы и отступы между элементами.
При выборе размеров рекомендуем ставить масштаб 100%.
При корректировке размеров обращайте особое внимание на мобильную версию формы
7. Подберите шрифты для формы
Во вкладе ШРИФТЫ: НАСТРОЙКИ ОБЩИЕ вы можете выбрать шрифт из предложенных и настроить размеры шрифтов на десктопе и мобайле
Во вкладе ШРИФТЫ: НАСТРОЙКИ ОБЩИЕ вы можете выбрать шрифт из предложенных и настроить размеры шрифтов на десктопе и мобайле
Если вы хотите, чтобы в этом шаблоне, использовался другой шрифт с сайта (необязательно):
- откройте редактор HTML/CSS (1) и разверните CSS (2)
- найдите строку font-family: <%=form_font%>; и удалите её
- добавьте строку font-family: ВАШ ШРИФТ С САЙТА;
Подставьте тот шрифт, который используется на сайте
- откройте редактор HTML/CSS (1) и разверните CSS (2)
- найдите строку font-family: <%=form_font%>; и удалите её
- добавьте строку font-family: ВАШ ШРИФТ С САЙТА;
Подставьте тот шрифт, который используется на сайте
Обратите внимание!
Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно, из-за того, что на сайте самого личного кабинета этого уникального шрифта может не быть. Поэтому тестируйте отображение шрифта по тестовой ссылке
Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно, из-за того, что на сайте самого личного кабинета этого уникального шрифта может не быть. Поэтому тестируйте отображение шрифта по тестовой ссылке
8. Подберите цвета для формы
Во вкладе ЦВЕТА ФОРМЫ выберите подходящие цвета.
Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper
Или же использовать номер цвета с брендбука компании.
Во вкладе ЦВЕТА ФОРМЫ выберите подходящие цвета.
Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper
Или же использовать номер цвета с брендбука компании.
9. Определите расположение формы на экране
По умолчанию форма показывается посредине экрана и фон вокруг затемняется (на вкладке Поведение есть уровень затемнения формы)
Но вы можете изменить место расположения формы на экране настройками, которые находятся под превью формы.
Для этой формы можем не изменять эти настройки
По умолчанию форма показывается посредине экрана и фон вокруг затемняется (на вкладке Поведение есть уровень затемнения формы)
Но вы можете изменить место расположения формы на экране настройками, которые находятся под превью формы.
Для этой формы можем не изменять эти настройки
Шаг 4. Создайте тестовую ссылку и проверьте форму
Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
Ссылка формата: http://faq.popmechanic.io?pm-test-form=47ea86ccbf3dd61076ae652dc06e5b30df59dffc45ddb176c02075bbfc4d7a17
Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида формы.
Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
Ссылка формата: http://faq.popmechanic.io?pm-test-form=47ea86ccbf3dd61076ae652dc06e5b30df59dffc45ddb176c02075bbfc4d7a17
Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида формы.
Шаг 5. Кнопка вызова формы
При желании вы можете под форму создать небольшой ярлык сбоку экрана, который будет открывать форму.
Нажмите "Пропустить", если этот пункт не нужен
Детальнее о кнопке вызова по ссылке
При желании вы можете под форму создать небольшой ярлык сбоку экрана, который будет открывать форму.
Нажмите "Пропустить", если этот пункт не нужен
Детальнее о кнопке вызова по ссылке
Шаг 6. Настройки таргетинга: кому показывать форму
1) Исключить существующих подписчиков
Если вы используете сервис Mindbox – исключите сегмент подписчиков
Сразу рекомендуем переключится на Расширенный режим настроек:
1) Исключить существующих подписчиков
Если вы используете сервис Mindbox – исключите сегмент подписчиков
Сразу рекомендуем переключится на Расширенный режим настроек:
Добавьте условие - Сегмент Mindbox.
Это нужно для того, чтобы исключить показ формы тем, кто уже ранее был подписан и, например, зайдет с нового устройства.
В Mindbox создайте операцию проверки сегмента (разово на аккаунт) и сегмент тех, кто имеет емейл или тех, кто подписан на емейл рассылку.
Чтобы исключить им показ формы.
Детальнее о настройках показа формы по сегментам.
(1) Название операции проверки сегмента
(2) ID сегментации тех, у кого есть емейл и которым форму показывать не нужно
(3) Не показываем форму сегменту
(4) При ошибке - считаем, что в сегменте, чтобы не показывать форму:
Это нужно для того, чтобы исключить показ формы тем, кто уже ранее был подписан и, например, зайдет с нового устройства.
В Mindbox создайте операцию проверки сегмента (разово на аккаунт) и сегмент тех, кто имеет емейл или тех, кто подписан на емейл рассылку.
Чтобы исключить им показ формы.
Детальнее о настройках показа формы по сегментам.
(1) Название операции проверки сегмента
(2) ID сегментации тех, у кого есть емейл и которым форму показывать не нужно
(3) Не показываем форму сегменту
(4) При ошибке - считаем, что в сегменте, чтобы не показывать форму:
Если вы используете НЕ сервис Mindbox – исключить сегмент подписчиков можно с помощью внедрения вашими разработчиками расширенной интеграции с Popmechanic
Далее в этой статье вы сможете найти шаблон Сразу рекомендуем переключится на Расширенный режим настроек:
Далее в этой статье вы сможете найти шаблон Сразу рекомендуем переключится на Расширенный режим настроек:
По условиям задачи нужно настроить показ формы только при первом посещении.
Учёт посещений при этом ведется с момента установки скрипта сервиса на сайт.
Сделать это можно так:
Расширенный таргетинг – добавить условие – Посещенные страницы/посещения – Посещение сайта – Равно – 1
Учёт посещений при этом ведется с момента установки скрипта сервиса на сайт.
Сделать это можно так:
Расширенный таргетинг – добавить условие – Посещенные страницы/посещения – Посещение сайта – Равно – 1
2) Настройте любые другие исключения показа, которые необходимы на вашем сайте:
- страницы показа
- устройства
- география
- дата и время: день недели, время показа, период показа
- трафик на сайт: источники трафика, utm-метки, переход с сайта
- действия: форма показана/закрыта/заполнена- js-сужение
- сегмент Mindbox
- ветка эксперимента Google Optimize
Обратите внимание на вложенность условий в расширенном Pro-таргетинге
И обязательно настройте действия, чтобы форма не показывалась постоянно, а с определенной частотой.
- страницы показа
- устройства
- география
- дата и время: день недели, время показа, период показа
- трафик на сайт: источники трафика, utm-метки, переход с сайта
- действия: форма показана/закрыта/заполнена- js-сужение
- сегмент Mindbox
- ветка эксперимента Google Optimize
Обратите внимание на вложенность условий в расширенном Pro-таргетинге
И обязательно настройте действия, чтобы форма не показывалась постоянно, а с определенной частотой.
Шаг 7. Условия показа формы
Условия показа – настройка, чтобы не раздражать посетителей сайта показом сразу же.
Можете на старте работы оставить условие 2 страницы сайта, а со временем пробовать другие условия и комбинировать их.
Детальнее об условиях показа
Условия показа – настройка, чтобы не раздражать посетителей сайта показом сразу же.
Можете на старте работы оставить условие 2 страницы сайта, а со временем пробовать другие условия и комбинировать их.
Детальнее об условиях показа
Шаг 8. Настройка интеграции
Если в настройках формы вы выбрали вариант подарка - всегда первый, то вам будет достаточно простой интеграции с сервисом рассылок.
А если нам нужно не просто передать контакт, но и подарок, который ему выпал, то нужно передать дополнительные поля контакта или дополнительные свойства действия (в некоторых сервисах доступно).
Вам нужно в интеграции использовать такую переменную, чтобы передать значение подарка:
%customs.result%
То есть, там, где вы в интеграции напишите %customs.result% будет подставлена цифра (1-4) с номером подарка, который выпал
Пример интеграции с сервисом eSputnik:
Если в настройках формы вы выбрали вариант подарка - всегда первый, то вам будет достаточно простой интеграции с сервисом рассылок.
А если нам нужно не просто передать контакт, но и подарок, который ему выпал, то нужно передать дополнительные поля контакта или дополнительные свойства действия (в некоторых сервисах доступно).
Вам нужно в интеграции использовать такую переменную, чтобы передать значение подарка:
%customs.result%
То есть, там, где вы в интеграции напишите %customs.result% будет подставлена цифра (1-4) с номером подарка, который выпал
Пример интеграции с сервисом eSputnik:
Настроить интеграцию с сервисом Mindbox можно 2 способами:
1) Использовать стандартную интеграцию и в ней добавить дополнительное поле контакта %customs.result%:
1) Использовать стандартную интеграцию и в ней добавить дополнительное поле контакта %customs.result%:
В таком случае данные о подарке будут храниться в анкетных данных подписчика.
По этим данным уже можно сделать фильтр в триггере для отправки нужного письма.
Если Доп. поле Подарок = 1, то отправить письмо с подарком 1.
Минус такого типа интеграции – скорее всего такое доп. поле будет использоваться только разово, а в анкете будет у всех клиентов.
2) Использовать JS-интеграцию и передать доп. поле действия
Чтобы не захламлять анкетные данные, можно передавать подарок, который выпал в виде доп. поля к действию.
В таком случае не получится использовать стандартную интеграцию, т. к. в ней нет такого функционала.
Выберите Интеграции – JS и используйте такую конструкцию, заменив OPERATION на имя операции для интеграции, а BRAND на бренд, если это необходимо в вашей инетеграции:
По этим данным уже можно сделать фильтр в триггере для отправки нужного письма.
Если Доп. поле Подарок = 1, то отправить письмо с подарком 1.
Минус такого типа интеграции – скорее всего такое доп. поле будет использоваться только разово, а в анкете будет у всех клиентов.
2) Использовать JS-интеграцию и передать доп. поле действия
Чтобы не захламлять анкетные данные, можно передавать подарок, который выпал в виде доп. поля к действию.
В таком случае не получится использовать стандартную интеграцию, т. к. в ней нет такого функционала.
Выберите Интеграции – JS и используйте такую конструкцию, заменив OPERATION на имя операции для интеграции, а BRAND на бренд, если это необходимо в вашей инетеграции:
mindbox("async", {
operation: "OPERATION",
data: {
customer: {
email: "%email%",
subscriptions: [
{
brand: "BRAND",
pointOfContact: "Email"
}
]
},
customerAction: {
customFields: {
fortuneroll: "%customs.result%"
}
}
}
});После этого вам нужно будет настроить столько триггеров, сколько вариантов выигрыша было в колесе фортуны, чтобы каждый получил письмо с нужным подарком:
Шаг 9. Тест перед запуском
После всех настроек, проверьте еще раз форму на сайте по тестовой ссылке (См. шаг 4)
Заполните форму по тестовой ссылке.
Если вы всё настроили правильно - данные с формы должны прийти в сервис рассылок
После всех настроек, проверьте еще раз форму на сайте по тестовой ссылке (См. шаг 4)
Заполните форму по тестовой ссылке.
Если вы всё настроили правильно - данные с формы должны прийти в сервис рассылок
Шаг 10. Запуск формы подписки
Включите форму с помощью переключателя активности формы:
Включите форму с помощью переключателя активности формы:
Если у вас возникли сложности на любом шаге настройки – напишите в нашу поддержку.
Чат с поддержкой есть справа внизу в личном кабинете.
Чат с поддержкой есть справа внизу в личном кабинете.
Вам была полезна эта статья?
