Привет!
Сегодня расскажу о том, как подставлять данные, которые мы знаем о пользователях, в формы на сайте. Например, имя и адрес почты.
В качестве примера данные будут браться из Mailchimp и подставляться при помощи Google Tag Manager. Ниже есть видеоинструкция ;)
Почему это эффективно?
Уменьшается необходимое количество действий до момента совершения конверсии. Если мы говорим о стандартных формах, то в таких случай достаточно нажать на кнопку отправки формы. Человеку не нужно вводить никаких данных.
Например, в прошлый вторник мы проводили вебинар.
Для регистрации кроме имени и почты, нужно было указать информацию о своих интересах, место работы и контактный телефон:
Данные, которые мы знали о пользователей из нашей базы мы автоматически подставляли в поля формы. Это значительно повысило конверсию в регистрацию.
Мы также провели ab-тестирование, чтобы проверить, действительно ли подстановка данных влияет по коэффициент конверсии (CR) заполнения формы:
Где:
- Вариант С — это контрольная страница на которой использовалось подставление данных.
- Вариант V1 — статистическая страница без постановки данных.
Таким образом CR на странице с подставкой данных равен 58,7%. Стоит отметить, что у нас очень лояльные читатели :).
Техническая реализация
Стоит отметить, что реализация очень простая. Заключается в следующем:
- Каждое поле (input) в форме должно содержать уникальный id.
- В сервисе email-рассылки готовим специальную ссылку, которая будет содержать данные о пользователе.
- При переходе по этой ссылке Google Tag Manager проверят содержит ли ссылка данные о пользователе и подставляет их в формы.
Для большей ясности просмотрите короткую видео-инструкцию:
Ниже текстовая инструкция.
Добавляем ID полей.
В первую очередь необходимо проверить наличие id полей. Стоит отметить, что каждый ID должен быть уникальный. Если ваши поля не содержат их, то просто допишите их.
1 |
<input type="text" name="fullname" id="wv_name"> |
В данном случае поле предназначенное для ввода имени содержит id wv_name. Аналогичным образом добавляем id остальных полей: wv_mail, wv_phone и прочие.
Генерация ссылки в сервисах email-рассылок
Теперь все внешние ссылки в письмах, которые будут вести на сайт нужно разметить метками. Работает аналогично utm-меткам, только в качестве меток используем id полей.
Например, таким образом выглядит готовая ссылка для Mailchimp:
1 |
http://site.ua/?wv_email=*|EMAIL|*&wv_name=*|FNAME|*&wv_phone=*|phone|* |
Как вы заметили, ссылка содержит Merge Tags.
Merge Tags автоматически подставляют имя, почту и телефон пользователя.
Подробней в справке Mailchimp.
Настройка Google Tag Manager
В Google Tag manager необходимо создать:
- Переменные под каждую метку в URL (метка в url = id поля).
- Тег подстановки данных в поле.
Создаем переменные уровня URL
Чтобы создать переменную нужно перейти на вкладку Переменные (1) и создать новую переменную уровня URL (2):
Аналогично создаем переменные под другие метки в URL.
Кстати, обратите внимание на название переменных. В следующем шаге их нужно будет указать в коде подстановки данных.
Создаем код подставки данных
Для этого создаем новый Тег (1) и выбираем Пользовательский html код (2):
Далее добавляем следующий код (3):
1 2 3 4 5 6 |
<script> document.getElementById("wv_email").value = {{URLEmail}}; document.getElementById("wv_name").value = {{URLName}}; document.getElementById("wv_phone").value = {{URLPhone}}; document.getElementById("wv_company").value = {{URLCompany}}; </script> |
Где:
- getElementById — название id полей (input-ов)
- value — название переменных, которые мы создали в Google Tag Manager.
В качестве триггера (4) нужно указать, когда активировать код. Чисто теоретически, можно по-умолчанию указать все страницы.
Но лучше задать условие, что код необходимо активировать только когда url содержит email:
После чего сохраняем и опубликовываем тег.
С этого момента, когда пользователи будут переходить из ваших писем на сайт у него автоматически будут заполняться формы.
Выводы
- Время на интеграцию занимает не более 20 минут.
- Можно использовать не только Mailchimp, но и любые другие системы email-рассылок. Например, Esputnik.
А как например сделать это без рассылки, т.е. если пользователь был на сайте и до этого заполнял форму?
Супер! Очень интересная фича)
Спасибо, Олег!