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

Привет! 

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

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

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

 

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

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

Для регистрации кроме имени и почты, нужно было указать информацию о своих интересах, место работы и контактный телефон:

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

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

Где:

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

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

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

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

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

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

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

Добавляем 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):

 

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

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

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

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

Где:

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

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

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

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

Выводы

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