Визуализация последовательности заполнения полей формы

Октябрь 20, 2020

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

Предположим, у нас на сайте есть форма, в которой N-ое количество полей, и мы хотим отслеживать статистику не только по количеству отправленных форм (достижению цели), но еще по тому, какие поля заполняют пользователи. И все эти последовательности визуализировать. Для этого нам понадобится:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Пример формы и полей на сайте (graphanalytics.ru)

Перейдите в диспетчер тегов Google и создайте тег типа Пользовательский HTML. Вставьте нижеописанный код:

В Google Tag Manager это будет выглядеть так:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Пользовательский HTML тег – событие blur

Подробнее:

  • событие blur/onblur – это браузерное стандартное событие типа onclick. Возникает, когда элемент теряет фокус, т.е. курсор покидает этот элемент. Таким образом мы можем отслеживать перемещение пользователя между полями;
  • #popup-audit – это селектор формы с бесплатным аудитом (для вашего проекта он будет другим);
  • {{GenericEvent}} – объект, который фиксирует различные значения нашего события.

Далее создайте пользовательскую переменную типа Собственный код JavaScript с именем {{GenericEvent}} и следующим кодом:

В GTM:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Переменная Собственный код JavaScript

На следующем шаге добавьте триггер типа Пользовательское событие с именем custom.event.blur, поскольку наша конструкция имеет вид event: 'custom.event' + event.type:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Триггер Пользовательское событие

Еще нам нужна переменная уровня данных для создания шагов виртуальной страницы, которая извлекает Id элемента, на который пользователи кликают:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Уровень данных события custom.event.blur

Для всех это переменная уровня данных custom.gtm.elementId. При клике на поле Имя будет значение reg_name, на Ссылка на сайт или мобильное приложение - reg_site и т.д. Поэтому создаем ее:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Переменная уровня данных

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

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Переменная Таблица поиска

Логика простая:

  • если custom.gtm.elementId = reg_name, то будет значение /Поле-Имя
  • если reg_site - /Поле-Сайт и т.д.

Их мы и будем передавать в теге как виртуальные страницы.

Теперь осталось добавить стандартный тег Universal Analytics с типом отслеживания Просмотр страницы, а в расширенных настройках добавить Поля, которые необходимо задать - page и нашу таблицу поиска:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Настройка тега Google Аналитика – Universal Analytics

Триггер активации – пользовательское событие custom.event.blur. После заполнения полей формы в режиме реального времени GA на вкладке Контент:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Отчет "В режиме реального времени"

Чтобы построить визуализацию, необходимо создать цель с целевой страницей и последовательностью:

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Создание составной цели в Google Analytics

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

Наш итоговый отчет в Google Analytics: Конверсии – Цели – Визуализация последовательности

Визуализация последовательности заполнения полей формы с помощью Google Tag Manager

Визуализация последовательности

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике