Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная » Статьи » Настройка отслеживания форм на сайте с Google Tag Manager: полезная инструкция
Настройка отслеживания форм на сайте с Google Tag Manager: полезная инструкция
2076
02 июня 2017

Настройка отслеживания форм на сайте с Google Tag Manager: полезная инструкция

Для того, чтобы отслеживать какие-либо события на сайте – важно работать с точки зрения системного подхода. В противном случае вы будете постоянно вносить корректировки и терять драгоценное время. Предлагаем вашему вниманию схему, что позволит быстро настраивать отслеживание событий. Плюс в том, что в будущем вы сможете вносить минимальные изменения лишь в тегах, не прибегая к участию веб-разработчиков и дизайнеров. Ну, или почти не прибегая. Рассмотрим процесс в виде трех основных этапов:

  1. Анализ входных условий
  • Определение возможных моделей поведения объекта, который исследуется;
  • Проектирование связей пользователя с объектом;
  • Моделирование нескольких моделей отслеживания.
  1. Настройка отслеживания
  • Проведение настройки по всем моделям;
  • Тестирование;
  • Выбор и работа с наиболее оптимальной моделью.
  1. Отладка и поддержка метода, который был внедрен.

Одним из самых популярных целевых действий на посадочной странице считается отправка информации с лид-форм. По этой причине целесообразно рассмотреть работу приведенной схемы на примере отслеживания данных событий.

Анализ входных условий

Существует 2 вида форм:

  1. Статичная форма – она постоянно показана на странице.

 

  1. Динамичная форма – она отображается после того, как было совершено заданное условие.

 

Работа пользователя с формой в схеме выглядит вот так:

  1. Человек заполняет обязательные поля в форме и кликает на «Отправить»;
  2. Происходит проверка данных по критериям:
  • В обязательных полях введена информация;
  • Данные отвечают на требование поля (телефон, почта и т.д.).
  1. Работает одно из правил:
  • При успешной проверке информация приходит на сервер и пользователь видит информацию об отправке анкеты;
  • Если данные ввели неверно, то на странице будет оповещение об ошибке.

Настройка отслеживания форм произойдет с выполнением одного из таких действий:

  • Отправка события в систему аналитики изначально после нажатия на кнопку «Отправить» или Enter в крайнем поле формы;
  • Отправка события после срабатывания заданного условия.

Поговорим детально о каждом из случаев.

Настройка отслеживания

Вариант 1

Если события отправляются в систему после клика на клавишу «Отправить» или Enter, настройка в Google Tag Manager будет иметь такой вид.  

  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>

Тег после этого будет иметь такой вид:

 

  1. Создание триггера в Google Tag Manager – сразу мы указали условие submitted_pretty_form, поэтому нужно создать триггер Google Tag Manager с типом Custom Event:

 

  1. В режиме отладки нужно проверить правильность работы триггера:

 

Если настройки сделаны правильно, то панель отладки будет выглядеть так:

 

  1. Сделайте настройка отправки цели или события в систему аналитики. Для этого добавьте в уже созданный триггер новый тег в Google Tag Manager.

Вариант 2

Теперь поговорим о настройке отслеживания по заданному условию и 2 варианта действий:

  • переход на страницу формы, которая будет успешно отправлена:
  • трансляция сообщения в виде окна, которое всплывет.

Если человек попадет на страницу благодарности, то настройку будет сделать легко. Сделаем предположение: после того, как форма заполнится, пользователь окажется на странице http://site.ru/ty.php, к URL прибавим GET-параметр как имя из формы, к примеру:

 

Череда действий будет таковой:

  1. Добавляем в контейнер новую переменную с типом «Пользовательский скрипт» и сохраняем указанное имя в URL. Код для переменной:

function (){

return decodeURI(

(RegExp('name=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]

);

}

 

  1. Создание триггера с типом «Окно загружено»и ограничьте его посредством URL-адреса и переменной, которая создана.

 

Если же сообщение об успешной отправке  будет показано, то необходима настройка обработки событий после показа данных сообщений .

Если пользователь допустил ошибку при заполнении данных, то он увидит такое окно:

 

Если отправка информации будет успешной, то окно будет иметь такой вид:

 

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

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

 

  1. Создайте новый тег типа «Пользовательский 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>

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

Отладка и поддержка

Протестить правильность работы настроек можно во время работы в режиме предварительного просмотра в Google Tag Manager. Подробное описание найдете в справке.

Итоги

Отслеживание первого типа возможно с точки зрения прозрачности решения. В реальной жизни чаще приходится работать с более сложными формами, следить за которыми путем анализа действий на успешную отправку информации. Тогда лучше использовать второй вариант.

Успехов!