Инструкция: как настроить отслеживание форм на сайте через Google Tag Manager
Константинка Руденок
Web-аналитик,
Artics Internet Solutions
Гибридизм отслеживания любых событий на сайте (взаимодействие с кнопками и формами али интерактивными элементами страницы) требует системного подхода, иным способом может превратиться в бесконечное внесение корректировок и отладку. Ты да я разработали схему, которая позволяет нам быстро исправлять отслеживание событий, а все дальнейшие изменения сводятся к корректировке тегов с минимальным участием веб-разработчиков и аналитиков.
Вполне процесс мы разделили на три этапа:
1. Испытание входных условий
- Выявление возможных моделей поведения исследуемого объекта;
- Имитирование взаимодействия пользователя с объектом;
- Построение нескольких моделей отслеживания.
2. Установка отслеживания
- Настройка отслеживания по всем моделям;
- Опробывание;
- Выбор и внедрение оптимальной модели (в общем случае используется Google Tag Manager).
3. Организация и поддержка реализованного метода.
Наиболее популярным и общим целевым действием возьми посадочных страницах является отправка данных с лид-форм, вот п подробно рассмотрим, как работает наша схема нате примере отслеживания этих событий.
Анализ входных условий
(у)потреблять два вида форм:
1. Статичная форма (постоянно отображается в странице).
2. Динамичная форма (появляется после заданных условий, скажем, пользователь кликнул на кнопку).
Взаимодействия пользователя с формой схематически выглядит неведомо зачем (механизм появления формы не влияет на их функционирование):
1. Юзер заполняет обязательные поля формы и нажимает на кнопку «Отослать».
2. Идет проверка введенных данных по параметрам:
- обязательные полина заполнены;
- введенные данные соответствуют типу поля (стриптиз телефона, почтовый адрес и т.д.).
3. Срабатывает одно из правил:
- в случае успешной проверки информация отправляются на сервер, пользователь видит сообщение о часть, что анкета отправлена;
- если данные введены некорректно, в таком случае на странице появляется сообщение с ошибкой.
Настроить наблюдение форм в этом случае можно двумя способами:
- заниматься события в систему аналитики сразу после того, наравне пользователь нажал кнопку «Отправить» или Enter в последнем марго формы;
- отправлять события после того, как сработало заданное согласие (например, появилось сообщение о том, что анкета успешно отправлена).
Рассмотрим обстоятельно каждый случай.
Настройка отслеживания
Первый вариант
В этом случае, когда-нибудь события отправляются в систему сразу после клика для кнопку «Отправить»/Enter, настройка в Google Tag Manager хорошего понемножку выглядеть следующим образом.
Важно заполнить валидацию пользу кого всех полей формы, чтобы получить корректное цифра пользователей, успешно заполнивших анкету. Например, для обязательных полей нужно обозначить шаблон корректного заполнения: <input type="number" required pattern="d{2,5}">
1. Добавьте другой тег с типом «Пользовательский HTML» и кодом:
Если используете jQuery (трансформирование библиотеки не менее 1.7)
<script>
var form = $(‘#pretty_form’); // В данном примере pretty_form — идентификатор стать на странице
var dataLayer = window.dataLayer || [];
form.on(‘submit’, function(){
dataLayer.push({
‘event’: ‘submitted_pretty_form’
});
});
</script>
Разве что не используете jQuery:
<script>
var form = document.querySelector(‘#pretty_form’); // В данном примере pretty_form — идентификатор стать на странице
var dataLayer = window.dataLayer || [];
form.addEventListener(‘submit’, function(){
dataLayer.push({
‘event’: ‘submitted_pretty_form’
});
});
</script>
Позволено использовать готовое событие Form Submit в Google Tag Manager.
В результате тег полноте выглядеть следующим образом:
2. Создайте триггер в Google Tag Manager – изначально наш брат задали условие submitted_pretty_form, поэтому создаем подобающий триггер в Google Tag Manager с типом Custom Event:
3. В режиме отладки проверьте обходительность работы триггера:
Если настройки выполнены верно, обшивка отладки будет выглядеть следующим образом:
4. Настройте отправку цели/действие в систему аналитики. Для этого нужно добавить во (избежание уже созданного триггера новый тег в Google Tag Manager.
Дальнейший вариант
Теперь рассмотрим вариант настройки отслеживания ровно по заданному условию и два варианта действий:
• откочевывание на страницу успешной отправки формы (страницу благодарности);
• фестиваль сообщения в виде всплывающего окна /текстового поля.
В случае, рано или поздно пользователь попадает на страницу благодарности, настройка выполняется непринужденно. Для наглядности предположим, что после заполнения фигура пользователь попадает на страницу http://site.ru/ty.php, к URL добавляется GET-параметр в виде имени с формы, например:
Последовательность действий будет такой:
1. Добавьте в ларь новую переменную с типом «Пользовательский скрипт» с сохранением указанного в URL имени. Адрес для переменной:
function (){
return decodeURI(
(RegExp(‘nameБаamp;|$)’).exec(location.search)||[,null])[1]
);
}
2. Создайте триггер с типом «Окошко загружено» и ограничьте его URL-адресом и созданной переменной.
Приостановление по переменной Filled Name необходимо, чтобы отрубить тех посетителей страницы благодарности, которые перешли изо какого-либо другого места, без использования GET-параметра name или — или при задании его пустым.
В случае, если происходит воссоздание сообщения об успешной отправке данных, нужно настроить обработку событий задним числом показа этих сообщений (мы рассмотрим вариант с использованием библиотеки Sweet Alert в качестве обработчика склад).
Если пользователь ошибся при заполнении полей, ведь всплывает окно:
При успешной отправке данных доклад выглядит так:
Текст может отличаться в зависимости через настроек форм, поэтому мы покажем, как прослеживать иконку успешной отправки.
1. Выберете корректный способ определения нужного вы элемента (при помощи инструментов разработчика в браузере):
2. Создайте последний тег с типом «Пользовательский HTML» и следующим кодом:
Редакция с использованием jQuery:
<script>
dataLayer = window.dataLayer || []
var checker_stop = 0;
var checkerSubmitPopup = setInterval(function(){
if($(‘.sweet-alert.showSweetAlert’).hasClass(‘visible’) && !checker_stop)
{
// Попап отображается
if($(‘.sweet-alert.showSweetAlert .icon.success’).css(‘display’) == ‘block’)
{
// Сие попап успешной отправки данных
dataLayer.push({‘event’ : ‘form_submit_success’})
clearInterval(checkerSubmitPopup)
checker_stop = 1
}
}
}, 100)
</script>
(видо)изменение без использования jQuery:
<script>
dataLayer = window.dataLayer || []
var checker_stop = 0;
var alert = document.querySelector(‘.sweet-alert.showSweetAlert’);
var alert_icon = document.querySelector(‘.sweet-alert.showSweetAlert .icon.success’);
var checkerSubmitPopup = setInterval(function(){
if(alert.classList.contains(‘visible’) && !checker_stop)
{
// Попап отображается
if(alert_icon.style.display == ‘block’)
{
// Сие попап успешной отправки данных
dataLayer.push({‘event’ : ‘form_submit_success’})
clearInterval(checkerSubmitPopup)
checker_stop = 1
}
}
}, 100)
</script>
3. Создайте триггер с типом «Пользовательское событие» и значением form_submit_success и привяжите к нему нужные теги согласно аналогии с тем, как описано выше.
Отладка и крыша
Протестировать работоспособность настроек можно при помощи режима предварительного просмотра в Google Tag Manager, подробное определение в справке.
Заключение
Отслеживание первого типа лучше работает с точки зрения прозрачности решения. Получи практике же чаще всего приходится иметь демарш со сложными формами, отследить которые анализом действий для успешную отправку данных нельзя. В этом случае нужно пользоваться второй тип отслеживания.
Источник:
нет комментариев