Инструкция: как настроить отслеживание форм на сайте через Google Tag Manager
Операция отслеживания любых событий на сайте (взаимодействие с кнопками и формами может ли быть интерактивными элементами страницы) требует системного подхода, сиречь может превратиться в бесконечное внесение корректировок и отладку. Наша сестра разработали схему, которая позволяет нам быстро налаживать отслеживание событий, а все дальнейшие изменения сводятся к корректировке тегов с минимальным участием веб-разработчиков и аналитиков.
Полный процесс мы разделили на три этапа:
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, подробное руководство в справке.
Заключение
Отслеживание первого типа лучше работает с точки зрения прозрачности решения. Получи и распишись практике же чаще всего приходится иметь бизнес со сложными формами, отследить которые анализом действий получай успешную отправку данных нельзя. В этом случае нужно пустить в дело второй тип отслеживания.
Источник:
нет комментариев