Как собирать данные о пользователях при подписке. Анкета-сегментатор
Как сегментировать пользователей при подписке

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

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

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

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

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

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

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

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

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

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

Вставляем форму в блок HTML

Прочитайте статью о тонкой настройке поп-апа, чтобы лучше разобраться в теме.

Шаг 3

Нам нужно передать email из первого виджета во второй, чтобы данные «сцепились». Для этого в блоке HTML надо добавить id в поле, в котором будет находиться email.

Например, так:

В блоке HTML добавляем id в поле для email
Добавляем 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:

Вставляем код в блок JavaScript: просим LeadPlan запомнить email

В этом коде мы просим LeadPlan запомнить email — отправить в базу информацию, собранную в первой форме — и открыть второй виджет.

Шаг 5

Теперь нужно задать содержимое первого виджета. Отредактируйте его на своё усмотрение. Мы, например, отключили комментарий:

Создаём содержимое нового виджета

Шаг 6

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

Теперь нужно закрыть первый виджет, чтобы затем открыть второй.

Открываем второй виджет

Шаг 7

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

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

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

Например, такой:

Используйте для тестирования таргетинг по URL-параметрам, который будете знать только вы и ваши коллеги

Теперь виджет увидят только те, у кого в адресной строке будет написано t=test, и для теста нужно открыть любую страницу и дописать «?t=test».

Для теста откройте любую страницу и допишите "?t=test"

(или «&t=test», если в адресе уже есть параметры).

Если в адресе есть параметры, для теста допишите в адресе страницы "&t=test"

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

Шаг 8

Данные, полученные из формы, передаём в CRM-систему или платформу рассылки с помощью существующей интеграции или через вебхуки. Настраиваем это в блоке «Интеграции». Мы не можем показать это на примере, поэтому пропустим этот шаг.

Шаг 9

Нажимаем «Сохранить» и активируем виджет в списке:

Сохраняем и активируем виджет в списке

Можно зайти на сайт и проверить:

Проверяем виджет на сайте

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

Теперь настроим второй шаг. Пусть это будет анкета с двумя вопросами — о компании и должности.

Шаг 1

Начало создания второго виджета такое же, как и первого. Создаём новый виджет, задаём ему имя, чтобы не перепутать с соседями, например, «Двухэтапная форма 2». В разделе «Внешний вид» включаем тонкую настройку:

Настраиваем второй виджет: в разделе «Внешний вид» включаем тонкую настройку

Шаг 2

Этот шаг тоже такой же, как в первом виджете. В разделе HTML нужно вставить форму. Базовый код формы можно взять в нашей справке в статье про тонкую настройку, зайдя в раздел Переменная {{form}}. Копируем оттуда код формы:

Вставляем форму в разделе HTML

… и его вставляем в блок HTML вместо {{form}}:

Вставляем код формы в разделе HTML

Шаг 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;
}
В CSS для id="email-hidden"  задаём невидимость

Шаг 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 этот номер.

На вкладке «Внешний вид» заходим в JS и вводим в строке 6 номер виджета из предыдущего окна настройки

Готово!

Показ виджета с анкетой-сегментатором

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

comments powered by HyperComments
Похожие статьи
Как настроить сообщение о сборе куки-файлов через LeadPlan

Как настроить сообщение о сборе куки-файлов через LeadPlan

Если ваш сайт собирает куки-файлы, но не получает на это согласие пользователей — компания рискует заработать штраф согласно 152-ФЗ. Чтобы избежать санкций, нужно настроить на сайте виджет о сборе куки.

Вы можете попросить об этом своих IT-специалистов или сделать всё самостоятельно через LeadPlan.

Хорошие новости: если вы уже пользуетесь сервисом LeadPlan или у вас небольшой трафик на сайте (до 10 000 неуникальных просмотров страниц в месяц), услуга будет для вас бесплатной.

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

comments powered by HyperComments
Как предупредить о файлах куки на сайте

Как предупредить о файлах куки на сайте

В наши дни почти каждый сайт собирает куки-файлы. При этом далеко не все ресурсы предупреждают пользователей о том, как собирают и обрабатывают их персональные данные. Не настроив такое уведомление на своём сайте, компания рискует получить штраф.

В этой статье рассказываем, как соблюсти все юридические тонкости и при этом написать простое и понятное сообщение.

comments powered by HyperComments
Чем хорошие пуш-уведомления отличаются от плохих

Чем хорошие пуш-уведомления отличаются от плохих

Маркетинговые инструменты могут развивать лояльность к вашей компании и продвигать продукт на рынке. А могут сделать так, чтобы клиент навсегда забыл дорогу на ваш сайт или удалил продукт. Сегодня поговорим о пуш-уведомлениях и о том, как их нельзя настраивать.

comments powered by HyperComments