Как сегментировать пользователей при подписке

Email-маркетинг | LeadPlan | Лидогенерация — читать 5 мин.

Анкеты-сегментаторы — это формы подписки, которые помогают получить дополнительную информацию о подписчике в момент регистрации. Фактически это поп-ап с анкетой. После регистрации пользователь сразу попадает в нужный сегмент.

Маша Горохова

Писатель

07 мая 2020 г.

Как это работает

Сначала появляется окно с просьбой оставить контакт. После того, как пользователь внёс данные, показывается окно или несколько окон с вопросами.

Чтобы совсем не убить конверсию, анкету стоит показывать после того, как пользователь подписался. Даже если он не пройдёт опрос до конца, вы точно получите его контакт.

Чем больше будет полей с вопросами, тем меньшей окажется конверсия. Но при этом вы получите максимально целевую базу.

Пример анкеты для магазина спортивных товаров:

собираем контакты пользователя;
узнаём пол и возраст — это лёгкие вопросы, которые не занимают много времени, так что они не отпугнут пользователя;
выясняем, какие вида спорта ему нравятся — это нужно, чтобы предлагать человеку конкретные товары.

Как настроить анкету-сегментатор

Вы можете настроить анкету-сегментатор через 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 этот номер.

Готово!

Если для первого виджета вы включали тестовый таргетинг, не забудьте отключить его при боевом запуске.

Как сегментировать пользователей при подписке

Как это работает

Как настроить анкету-сегментатор

Первый виджет

Второй виджет

Похожие статьи

Увеличили конверсию в 2 раза и сделали процесс подписки увлекательнее, используя геймификацию. Кейс DesignBoom

14 примеров виджетов social proof

Кейс. Как мы разработали анкету для Kérastase на LeadPlan

Нужна помощь?
Ответим на любые вопросы про LeadPlan и подскажем, как эффективно использовать сервис.