Повышение конверсии: автоматическое заполнение форм на сайте

Сергей Довганич Сергей Довганич 10 февраля 2016

Привет! 

Сегодня расскажу о том, как подставлять данные, которые мы знаем о пользователях, в формы на сайте. Например, имя и адрес почты.

В качестве примера данные будут браться из Mailchimp и подставляться при помощи Google Tag Manager. Ниже есть видеоинструкция ;)

Почему это эффективно?

 

Уменьшается необходимое количество действий до момента совершения конверсии. Если мы говорим о стандартных формах, то в таких случай достаточно нажать на кнопку отправки формы. Человеку не нужно вводить никаких данных. 

Например, в прошлый вторник мы проводили вебинар.

Для регистрации кроме имени и почты, нужно было указать информацию о своих интересах, место работы и контактный телефон:
Snimok-yekrana-2016-02-01-v-12.21.17 копия

Данные, которые мы знали о пользователей из нашей базы мы автоматически подставляли в поля формы. Это значительно повысило конверсию в регистрацию.

Мы также провели ab-тестирование, чтобы проверить, действительно ли подстановка данных влияет по коэффициент конверсии (CR) заполнения формы:

vwo-test

Где:

  • Вариант С — это контрольная страница на которой использовалось подставление данных. 
  • Вариант V1 — статистическая страница без постановки данных. 

Таким образом CR на странице с подставкой данных равен 58,7%. Стоит отметить, что у нас очень лояльные читатели :). 

Техническая реализация

Стоит отметить, что реализация очень простая. Заключается в следующем:

  1. Каждое поле (input) в форме должно содержать уникальный id. 
  2. В сервисе email-рассылки готовим специальную ссылку, которая будет содержать данные о пользователе. 
  3. При переходе по этой ссылке Google Tag Manager проверят содержит ли ссылка данные о пользователе и подставляет их в формы. 

Для большей ясности просмотрите короткую видео-инструкцию: 

Миниатюра для видео
Автоматическое заполнение форм на сайте — GTM

Ниже текстовая инструкция.

Добавляем ID полей. 

В первую очередь необходимо проверить наличие id полей. Стоит отметить, что каждый ID должен быть уникальный. Если ваши поля не содержат их, то просто допишите их. 

В данном случае поле предназначенное для ввода имени содержит id wv_name. Аналогичным образом добавляем id остальных полей: wv_mail, wv_phone и прочие. 

Генерация ссылки в сервисах email-рассылок

Теперь все внешние ссылки в письмах, которые будут вести на сайт нужно разметить метками. Работает аналогично utm-меткам, только в качестве меток используем id полей. 

Например, таким образом выглядит готовая ссылка для Mailchimp:

Как вы заметили, ссылка содержит Merge Tags. 

Merge Tags автоматически подставляют имя, почту и телефон пользователя.
Подробней в справке Mailchimp.  

Настройка Google Tag Manager

В Google Tag manager необходимо создать:

  1. Переменные под каждую метку в URL (метка в url = id поля)
  2. Тег подстановки данных в поле. 

Создаем переменные уровня URL

Чтобы создать переменную нужно перейти на вкладку Переменные (1) и создать новую переменную уровня URL (2):

variables

 

Аналогично создаем переменные под другие метки в URL. 
Кстати, обратите внимание на название переменных. В следующем шаге их нужно будет указать в коде подстановки данных.

Создаем код подставки данных

Для этого создаем новый Тег (1) и выбираем Пользовательский html код (2):

тег подмены копия

Далее добавляем следующий код (3):

Где:

  • getElementById — название id полей (input-ов)
  • value — название переменных, которые мы создали в Google Tag Manager. 

В качестве триггера (4) нужно указать, когда активировать код. Чисто теоретически, можно по-умолчанию указать все страницы. 

Но лучше задать условие, что код необходимо активировать только когда url содержит email:

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

Выводы

  1. Время на интеграцию занимает не более 20 минут. 
  2. Можно использовать не только Mailchimp, но и любые другие системы email-рассылок. Например, Esputnik. 
Сергей Довганич
Сергей Довганич,
Руководитель проектов
Другие интересные материалы:
Комментарии
  • Илья

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

    16 Июл в 20:49 | Ответить
  • Олег

    Супер! Очень интересная фича)

    21 Июн в 11:46 | Ответить
    • Сергей Довганич
      Сергей Довганич, автор публикации

      Спасибо, Олег!

      31 Июл в 23:37

Ваш комментарий:
Ваш ответ: