Как это работает
Сначала появляется окно с просьбой оставить контакт. После того, как пользователь внёс данные, показывается окно или несколько окон с вопросами.
Чтобы совсем не убить конверсию, анкету стоит показывать после того, как пользователь подписался. Даже если он не пройдёт опрос до конца, вы точно получите его контакт.
Чем больше будет полей с вопросами, тем меньшей окажется конверсия. Но при этом вы получите максимально целевую базу.
Пример анкеты для магазина спортивных товаров:
- собираем контакты пользователя;
- узнаём пол и возраст — это лёгкие вопросы, которые не занимают много времени, так что они не отпугнут пользователя;
- выясняем, какие вида спорта ему нравятся — это нужно, чтобы предлагать человеку конкретные товары.
Как настроить анкету-сегментатор
Вы можете настроить анкету-сегментатор через LeadPlan. Она будет состоять из двух виджетов: в первом мы получаем контакт человека, во втором — подробную информацию о нём.
Это бесплатно, если вы уже пользуетесь LeadPlan или у вас меньше 10 000 просмотров страниц в месяц.
Первый виджет
Шаг 1
Создаём новый виджет, задаём ему имя и в разделе «Внешний вид» включаем тонкую настройку:
Шаг 2
В блоке HTML нужно вставить форму. Базовый код формы выглядит так:
<form novalidate="novalidate" class="LP-form">
<div class="LP-input-block">
<input type="text" class="LP-input" name="email" placeholder="Email" value="">
</div>
<div class="LP-input-block">
<input type="text" class="LP-input" name="name" placeholder="Имя" value="">
</div>
<div class="LP-submit-block">
<button type="submit" class="LP-submit">Подписаться</button>
</div>
</form>Вставляем его в блок HTML вместо {{form}}:
Прочитайте статью о тонкой настройке поп-апа, чтобы лучше разобраться в теме.
Шаг 3
Нам нужно передать email из первого виджета во второй, чтобы данные «сцепились». Для этого в блоке HTML надо добавить id в поле, в котором будет находиться email.
Например, так:
Шаг 4
Далее — немного программирования на JavaScript.
Берём вот этот код:
emailfield = LP_tools.element.querySelector('#email-field');
LP_tools.onSubmit = function() {
window.lpLayer = window.lpLayer || {};
window.lpLayer.email = emailfield.value; // Сохраняем значение email во временную переменную
window.LP_show(123456); // Открываем второе окно
}… и вставляем его в блок JavaScript:
В этом коде мы просим LeadPlan запомнить email — отправить в базу информацию, собранную в первой форме — и открыть второй виджет.
Шаг 5
Теперь нужно задать содержимое первого виджета. Отредактируйте его на своё усмотрение. Мы, например, отключили комментарий:
Шаг 6
Задаём условия показа первого окна — такие, чтобы пользователь не раздражался. С этим поможет статья о том, как настроить не раздражающий поп-ап.
Теперь нужно закрыть первый виджет, чтобы затем открыть второй.
Шаг 7
Задайте таргетинг для виджета, если планируете показывать его не всегда и не всем. Мы оставили настройки по умолчанию:
Прежде чем запускать виджеты, нужно убедиться, что они работают так, как было задумано. Для того, чтобы вы со своей командой уже могли тестировать виджет, а от пользователя он пока был скрыт, используйте таргетинг по URL-параметрам, который будете знать только вы и ваши коллеги.
Например, такой:
Теперь виджет увидят только те, у кого в адресной строке будет написано t=test, и для теста нужно открыть любую страницу и дописать «?t=test».
(или «&t=test», если в адресе уже есть параметры).
А когда закончите тестировать и будете готовы запускать виджет для всех посетителей сайта, удалите этот таргетинг.
Шаг 8
Данные, полученные из формы, передаём в CRM-систему или платформу рассылки с помощью существующей интеграции или через вебхуки. Настраиваем это в блоке «Интеграции». Мы не можем показать это на примере, поэтому пропустим этот шаг.
Шаг 9
Нажимаем «Сохранить» и активируем виджет в списке:
Можно зайти на сайт и проверить:
Второй виджет
Теперь настроим второй шаг. Пусть это будет анкета с двумя вопросами — о компании и должности.
Шаг 1
Начало создания второго виджета такое же, как и первого. Создаём новый виджет, задаём ему имя, чтобы не перепутать с соседями, например, «Двухэтапная форма 2». В разделе «Внешний вид» включаем тонкую настройку:
Шаг 2
Этот шаг тоже такой же, как в первом виджете. В разделе HTML нужно вставить форму. Базовый код формы можно взять в нашей справке в статье про тонкую настройку, зайдя в раздел Переменная {{form}}. Копируем оттуда код формы:
… и его вставляем в блок HTML вместо {{form}}:
Шаг 3
Чтобы подхватить email из первого виджета, нужно добавить для него скрытое поле. Для этого у верхнего блока:
<div class="LP-input-block">
<input type="text" class="LP-input" name="email" placeholder="Email" value="">
</div>чтобы потом передать в это поле значение email.
Получится так:
<input hidden id="email-hidden" type="text" class="LP-input" name="email" placeholder="Email" value="">Шаг 4
Следующий div копируем, чтобы их стало два: в одно поле ввода будем собирать компанию, в другое — должность:
<div class="LP-input-block">
<input type="text" class="LP-input" name="name" placeholder="Имя" value="">
</div>Для этого меняем значения атрибутов name и placeholder и получаем вот такую конструкцию:
<div class="LP-input-block">
<input type="text" class="LP-input" name="company" placeholder="Компания" value="">
</div>
<div class="LP-input-block">
<input type="text" class="LP-input" name="position" placeholder="Должность" value="">
</div>А кнопку «Подписаться» переименовываем в «Отправить»:
<div class="LP-submit-block">
<button type="submit" class="LP-submit">Отправить</button>
</div>В итоге HTML этого блока выглядит так:
<div class="LP-image">
{{image}}
</div>
<div class="LP-content">
{{title}}
{{description}}
<form novalidate="novalidate" class="LP-form">
<input hidden id="email-hidden" type="text" class="LP-input" name="email" placeholder="Email" value="">
<div class="LP-input-block">
<input type="text" class="LP-input" name="commany" placeholder="Компания" value="">
</div>
<div class="LP-input-block">
<input type="text" class="LP-input" name="position" placeholder="Должность" value="">
</div>
<div class="LP-submit-block">
<button type="submit" class="LP-submit">Отправить</button>
</div>
</form>
{{note}}
</div>
<div class="LP-close-x"></div>Шаг 5
В CSS для id=»email-hidden» задаём невидимость:
123
#email-hidden {
display: none;
}
Шаг 6
Осталось при показе поп-апа подхватить email в скрытое поле. Это делается в блоке JavaScript:
LP_tools.onShow = function() {
var emailHidden = LP_tools.element.querySelector('#email-hidden');
if (emailHidden && window.lpLayer) {
emailHidden.value = window.lpLayer.email;
}
};Получается, здесь мы вносили изменения во все три блока: HTML, CSS и JS.
Шаг 7
Переходим к настройке содержимого. Меняем тексты заголовка и тела поп-апа, чтобы посетитель понимал, зачем нам знать его должность и компанию. Отображение полей и название кнопки мы переопределили при тонкой настройке.
Может возникнуть диссонанс: в одной вкладке написано одно, в другой — другое. Поэтому поля и названия кнопки можно задать, например, как на скрине.
Заголовок и описание сообщения об отправке можно оставить или поменять на свой вкус.
Шаг 8
Теперь отправляемся в условия показа. Задаём такие настройки, чтобы виджет показывался только при принудительном вызове, отображался на каждой странице и никогда не переставал показываться. За то, чтобы двухэтапная анкета показывалась нормально, отвечает первый виджет.
Таргетинг тоже полностью задаётся первым виджетом, поэтому этот этап можно пропустить.
Шаг 9
Настраиваем интеграцию с нужным вам сервисом и сохраняем его. После сохранения в списке виджетов вы увидите его номер. Запоминаем номер, активируем виджет.
Шаг 10
Номер мы запомнили, чтобы завершить настройку этой анкеты-сегментатора. Возвращаемся в первый виджет, на вкладке «Внешний вид» заходим в JS и вводим в строке 6 этот номер.
Готово!
Если для первого виджета вы включали тестовый таргетинг, не забудьте отключить его при боевом запуске.
