👨‍🌾Отслеживаем отправку форм в Google Tag Manager (2018)

Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберемся, как отслеживать отправки форм в Google Analytics и Яндекс Метрике с помощью Диспетчера тегов.
Лень читать? Смотрите видео в конце статьи!

Два варианта развития событий

В GTM есть встроенный триггер, который так и называется “Отправка формы”. Однако он срабатывает не всегда. Например, данный триггер не видит отправки AJAX-форм. Поэтому сегодня мы рассмотрим два варианта развития событий.

Вариант номер 1: нам повезло и встроенный триггер решает задачу

Как это проверить? Для этого просто создайте триггер типа “Отправка формы”, задайте условие активации по умолчанию, то есть “Все формы”, включите режим предварительного просмотра и отправьте форму на сайте. А я перехожу в другой аккаунт для демонстрации.

Триггер типа Отправка формы
Создаем триггер типа Отправка формы

Для начала я просто нажму кнопку, чтобы убедиться, что триггер не срабатывает при неудачной отправке формы. А теперь заполню и отправлю форму. Как видите, появилось стандартное событие gtm.formSubmit, которое означает, что триггер сработал и диспетчер тегов видит отправку этой формы.

Для подробной информации по данному событию нажмите на название, а затем перейдите на вкладку “Уровень Данных”. Это нам еще пригодится.

Отлично, поскольку триггер видит формы, нам остается настроить теги, которые будут отправлять события в Google Analytics и Яндекс Метрику. Позже на данные события вы можете повесить цели и использовать для оценки рекламных мероприятий и других задач.

Создаем теги отправки событий

Итак, создаем новый тег: тип тега Universal Analytics, тип отслеживания: событие, задаем категорию и действие по событию, выбираем переменную настроек Google Analytics, созданную в прошлых занятиях. В качестве триггера указываем только что созданный – ”Отправка формы”. Даем говорящее название тегу, чтобы в дальнейшем не запутаться. Супер.

Теперь отправим событие в Метрику. Создаем новый тег: тип тега “Пользовательский HTML”. Вставляем знакомую конструкцию с той лишь разницей, что здесь она заключена в теги <script>.

Пушим событие в Яндекс Метрику
Пушим событие в Яндекс Метрику

Быстро напомню, как это работает. Набор цифр – это номер счетчика Метрики, в который отправляется событие. Значение в кавычках – это идентификатор события, который вы позже укажите в настройках цели.

В качестве триггера указываем “Отправка формы”. И даем говорящее название для тега. Как видите, в этом случае я придерживаюсь правила: что я отправляю, при каком условии и куда.

Включаем предварительный просмотр, проверяем работу тегов и публикуем новую версию контейнера. С этим вы справитесь самостоятельно, я уже показывал. Возникнут проблемы – пишите, будем разбираться.

Как отслеживать разные формы?

Важный момент, друзья. Если стоит задача отслеживать разные формы на странице, то в этом случае вам поможет фильтр на уровне триггера. Вернемся к его настройкам. Поменяем условие активации на “Некоторые формы” и заглянем в фильтр.

Как видите, сейчас он предлагает только несколько вариантов встроенных переменных. Это те переменные, которые активированы в моем аккаунте. Но они не имеют отношения к формам и не подходят нам.

Поэтому отправляемся в раздел “Переменные”, “Встроенные”, жмем кнопку “Настроить” и активируем все переменные в разделе “Формы”. Здесь нужно понимать следующий момент.

Когда срабатывает триггер “Отправка формы”, на уровень данных отправляется шесть атрибутов, которые связаны с этой формой. Только что мы активировали встроенные переменные, которые считывают эти значения. Эти переменные мы и будем использовать в качестве фильтра, чтобы разделять отправки различных форм.

Демонстрация. Обновляю отладку, перезагружаю сайт и отправляю тестовую форму. Жму на событие, связанное с триггером, вкладка “Уровень данных” и вижу набор атрибутов у отправленной формы. Обращаю внимание, что он не богат, но есть название класса и это уже неплохо.

Отправляю вторую форму и вижу, что у нее название класса отличается. Значит фильтр, который я буду использовать в настройках триггера, это встроенная переменная “Form Classes”, потому что именно она считывает значение ключа gtm.elementClasses.

Атрибуты форм для настройки фильтра триггера
Атрибуты форм для настройки фильтра триггера

Иду в настройки триггера, выбираю необходимую переменную, “равно”, вставляю название класса. Готово. Аналогично, для второй-третьей и так далее форм вы создаете новые триггеры, создаете новые теги, которые отправляют новые события.

Вариант номер 2: когда нам не повезло, и встроенный триггер “Отправка формы” не срабатывает

В этом случае мы возвращаемся к тому, от чего позволяет уйти Google Tag Manager, а именно: начинаем вносить правки в исходный код.

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

dataLayer.push({‘event’: ‘formsend’});

Еще раз: данной командой мы отправляем в Datalayer пользовательское событие с именем formsend и этого достаточно для отслеживания данной формы.

В таком варианте нам нужно использовать триггер типа “Пользовательское событие” и указать название переменной. Условие активации оставляем по умолчанию.

Создаем триггер на основе события уровня данных

Таким образом, триггер будет активирован, как только на уровне данных появится переменная formsend. А вместе с триггером сработает и тег, который отправит событие в Google Analytics или Яндекс Метрику. Используйте данный триггер для ранее созданных тегов.


Заключение

Хорошо идем, братва! В следующем уроке разберемся с показателем отказов для Google Analytics и триггером типа Таймер. Ставьте палец вверх, если было полезно и расскажите друзьям! Поехали!

comments powered by HyperComments
(2 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова