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

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

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

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

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

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

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

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

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

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

Вы можете настроить анкету-сегментатор через 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
Похожие статьи
Исследование: как топ-100 интернет-магазинов России сообщают о сборе куки

Исследование: как топ-100 интернет-магазинов России сообщают о сборе куки

У четырёх из пяти наших потенциальных клиентов нет виджета с уведомлением о сборе куки. Кто-то соглашается поставить на сайт форму, другие говорят, что «руководство не пропустит».

Между тем, оповещать посетителей сайта о сборе куки нужно по закону. Иначе бизнес рискует заработать штраф согласно 152-ФЗ. Мы писали об этом в статьях «Как предупредить о файлах куки на сайте» и «Как настроить сообщение о сборе куки-файлов через LeadPlan».

Поэтому мы решили провести исследование и выяснить, как предупреждают посетителей топ-100 интернет-магазинов России по объёму онлайн-продаж по итогам 2019 года.

Оказалось, что всего 20% магазинов рассказывают о сборе куки на сайте! Из них 2% дают краткую информацию только в подвале сайта.

comments powered by HyperComments
Как установить и настроить инлайн-виджет в LeadPlan

Как установить и настроить инлайн-виджет в LeadPlan

Инлайн-виджеты — это форма подписки, которую можно встроить в любое место страницы. Разберём, как самостоятельно подключить инлайн-виджет для сайта.

Сейчас разработчики готовят к релизу новую версию LeadPlan, поэтому некоторые функции (в частности, инлайн-виджеты) пока доступны в только тестовом режиме. Из-за этого к установке прибавится два обязательных шага. Когда выйдет LeadPlan 2.0, процесс станет проще и мы переработаем инструкцию.

comments powered by HyperComments
+85% к конверсии в подписку в интернет-магазине дизайнерских вещей. Кейс DesignBoom

+85% к конверсии в подписку в интернет-магазине дизайнерских вещей. Кейс DesignBoom

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

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

comments powered by HyperComments