Отслеживание отправки формы с помощью Яндекс Тег Менеджера и специального события

Универсальный способ отслеживания отправки формы с помощью Яндекс Тег Менеджера и специального события.

Введение

Читать еще:

• Отслеживание отправки формы с помощью Яндекс Тег Менеджера
• 9 способов отслеживания отправки форм с помощью Google Tag Manager
• Отслеживание полей формы в Яндекс Метрике

Если у вас не получилось настроить отслеживание отправки формы с помощью Яндекс Тег Менеджера и стандартного триггера типа Отправка формы (ваша форма не вызывает стандартное событие submit, например, при отправке через fetch, AJAX или React), то вам точно подойдет вариант, описанный ниже.

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

Пример кода выглядит так:

С помощью первой строки window.dataLayer = window.dataLayer || [] мы проверяем, существует ли объект dataLayer. Если он существует, то используем его. В противном случае мы его создаем и он у нас пустой. Второй строчкой window.dataLayer.push({'event':'form_send'}) мы дополняем с помощью метода .push() тот объект (массив), который был создан в первой строчке, а также передаем событие (event) с заданным названием (в нашем примере - form_send, но может быть любым, каким вы его зададите - send_form, form-submitted, otpravka_formi, formSend, submit_form и т.д.).

Таким образом, вы пишете техническое задание (ТЗ) разработчику с запросом такого вида (пример):

Просьба сформировать уровень данных с событием form_send, которое будет срабатывать после успешной отправки формы.

Пример итогового кода:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({'event': 'form_send'});

Именно название события, заданное в ТЗ для разработчика (event': 'form_send') и реализованное им, и будет в дальнейшем являться триггером специального события в Яндекс Тег Менеджере. Об этом я расскажу далее.

Подробнее об уровне данных (dataLayer) читайте в других материалах моего блога:

• Уровень данных (dataLayer)
• Способы формирования dataLayer
• Извлечение данных из dataLayer

Если на сайте присутствует несколько форм, и вы желаете отслеживать каждую из них в отдельности, то вы можете сформировать уровень данных с дополнительными параметрами. Просто перечислите все значения с помощью пар 'ключ':'значение'. Имя ключа и значения заключаются в одинарные кавычки, между собой они разделяются двоеточием. Например:

, где form_id и form_name - идентификатор формы и название формы соответственно.

Вместо значений Идентификатор формы и Название формы программист будет динамически передавать ID и название формы, которую отправил пользователь. А с помощью пользовательских переменных типа Переменная уровня данных в Яндекс Тег Менеджере вы сможете отправлять в Яндекс Метрику не только сам факт отправки, но и конкретные данные (как параметры событий):

• идентификатор формы;
• название формы;
• другие параметры.

Это позволит вам точно определять, какую форму отправил пользователь, а также сравнивать статистику по разным формам между собой.

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

Просьба сформировать уровень данных с событием form_send, которое будет срабатывать после успешной отправки формы. Вместе с событием требуется передавать дополнительный параметр form_name - название формы.

Пример итогового кода:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
'event': 'form_send',
'form_name': 'Название формы'
});

Перед тем как ставить задачу разработчику, составьте список всех параметров, которые должны передаваться в dataLayer при успешной отправке формы. Если параметров нет - используйте первый фрагмент кода, если планируется передавать дополнительный(ые) параметр(ы) - используйте второй код и пример ТЗ.

Таким образом, последовательность отслеживания отправки формы с помощью специального события и dataLayer следующая:

• определитесь с именем события, которое в дальнейшем вы будете использовать в Тег Менеджере в триггере типа Специальное событие (в примере выше – это form_send);
• определитесь с перечнем дополнительных параметров, которые вы будете передавать на уровень данных;
• напишите итоговый код для разработчика (за аналог возьмите мое техническое задание);
• отправьте разработчику текст такого вида: просьба внедрить конструкцию dataLayer.push() в функцию обратного вызова (код прилагаю к ТЗ), которая срабатывает при успешной отправке формы со следующими данными (ниже перечисляете все параметры, которые необходимо передать вместе с формой, чтобы программист вас понял);

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

Пример отслеживания

Давайте рассмотрим практический пример отслеживания. Предположим, у нас есть сайт, и на нем размещена форма расчета стоимости вступления в СРО, у которой есть множество различных вариантов полей:

Пример формы с полями

После того, как пользователь заполнит их, ему откроется еще одно окно для ввода имени и телефона.

Заполнение контактной информации

Оставив контактные данные и нажав на кнопку Рассчитать стоимость, форма будет успешно отправлена.

Поскольку в этой форме большое количество всевозможных полей, которые мы бы хотели отслеживать и передавать в Яндекс Метрику, целесообразнее поручить внедрение конструкции dataLayer.push() с событием и перечислением всех дополнительных параметров, как было разобрано выше.

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

Просьба сформировать уровень данных с событием form_send, которое будет срабатывать после успешной отправки формы. Вместе с событием требуется передавать дополнительные параметры (должны подставляться динамически в зависимости от выбора пользователя).

Пример итогового кода:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'send_form',
'type': 'Тип СРО',
'strahovanie': 'Страхование ответственности',
'genpodryad': 'Генподряд',
'osobieUsloviaya': 'Особые условия',
'kompencaziya': 'Компенсация',
'name': 'Имя пользователя',
'phone': 'Телефон пользователя'
});

Отправляем его программисту и ждем, пока он его внедрит. Как правило, это задача выполняется на стороне сервера. Если вам интересно, как это может выглядеть, то вот вам пример реализации от разработчика с использованиям языка программирования PHP для данной формы (у вас будет другая реализация!).

Нужные нам значения извлекаются и затем записываются в такие переменные:

Синтаксис разработчика

В завершение разработчик по нашему ТЗ формирует уровень данных, в котором прописывает все нужные нам параметры с динамическими значениями:

Сформированный уровень данных с дополнительными параметрами по нашему ТЗ

Примечание: <? echo …. > - конструкция в PHP.

Таким образом, каждый раз, когда пользователь будет отправлять заявку на расчет стоимости СРО, мы сможем не только отслеживать JavaScript-событие отправки формы, но еще извлекать всего его значения из полей формы и передавать их в Яндекс Метрику как параметры события. Осталось только разобраться в том, как это сделать в Яндекс Тег Менеджере.

Создание триггера

Перейдите на вкладку Триггеры и нажмите на кнопку Добавить триггер:

Создание триггера

В открывшемся окне выберите тип триггера Специальное событие:

Тип триггера "Специальное событие"

В поле Название события укажите название вашего события, которое вы задали в 'event': '...' в своем техническом задании. В моем примере - это send_form:

Название события = event

Триггер с типом Специальное событие позволяет запускать теги при получении пользовательского события, которое вручную отправлено в dataLayer. Подходит для отслеживания нестандартных действий — например, кастомных кликов, отправки форм через JavaScript или событий в SPA.

Задайте название триггеру (например - Отправка формы) и сохраните его.

Создание переменных уровня данных

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

Создание переменной

В шаблоне переменной выберите Переменная уровня данных:

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

В поле Имя переменной уровня данных укажите название переменной, которую вы задали в ТЗ:

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

Задайте переменной название (например - DLV Тип СРО) и сохраните ее.

Это нужно сделать для каждого параметра в dataLayer. Если у вас было два дополнительных параметра, тогда создайте две переменных уровня данных. Если параметров больше (например, в моем примере их семь - type, strahovanie, genpodryad, osobieUsloviaya, kompencaziya, name и phone), то для каждого из них нужно создать свою собственную переменную уровня данных. В результате я создал семь переменных уровня данных с соответствующими именами:

Созданные переменные уровня данных

Примечание: вы должны задавать имена переменным уровня данных точно так же, как прописано в ТЗ, учитывая регистр. Если было написано osobieUsloviaya, то и в переменной Яндекс Тег Менеджера нужно написать именно так, а не osobieusloviaya или OSOBIEUSLOVIAYA.

Создание JS-события

После этого перейдите в интерфейс Яндекс Метрики и в разделе Цели создайте цель с условием JavaScript-событие. Укажите произвольный идентификатор цели (например - otpravka_formi) и название цели:

Цель "JavaScript-событие"

Примечательно: я рекомендую использовать условие Идентификатор цели совпадает.

Обязательно запомните идентификатор, он вам понадобится в окончательной настройке тега Яндекс Метрики. В завершение сохраните цель.

Создание тега события Яндекс Метрики

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и нажмите на кнопку Добавить тег:

Создание тега

В открывшемся окне задайте следующие настройки:

• Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Отправка формы);
• Шаблон тега - Яндекс Метрика;

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

Шаблоны из каталога

И в открывшемся окне добавить тег Яндекс Метрика (Передача информации о достижении цели):

Шаблон тега - Яндекс Метрика

После этого вас вернет обратно в настройки тега, только в шаблонах уже будет значиться Яндекс Метрика.

• ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
• Идентификатор цели - задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие. В моем примере - otpravka_formi);

В качестве триггера активации выберите триггер специального события, созданный на предыдущем шаге. А чтобы вместе с событием отправить параметры события (поля формы), поставьте галочку напротив

Добавить поле params

В поле Дополнительные параметры события добавьте по аналогии шаблона (подсказки в поле) свои собственные параметры. В этом теге они должны передаваться как JavaScript-объект в фигурных скобках {}, а перечисляемые параметры должны содержать двойные кавычки "". Между параметрами и значениями используется символ двоеточия :, а сами параметры перечисляются через запятую ,

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

Двойные кавычки позволяют выбрать переменные

И тогда каждому параметру события можно задать динамическое значение переменной:

Пример одного параметра события

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

{"Тип СРО":"{{DLV Тип СРО}}", "Страхование":"{{DLV Страхование}}", "Генподряд":"{{DLV Генподряд}}", "Особые условия":"{{DLV Особые условия}}", "Компенсация":"{{DLV Особые условия}}", "Имя":"{{DLV Имя}}", "Телефон": "{{DLV Телефон}}"}

1	{"Тип СРО":"{{DLV Тип СРО}}", "Страхование":"{{DLV Страхование}}", "Генподряд":"{{DLV Генподряд}}", "Особые условия":"{{DLV Особые условия}}", "Компенсация":"{{DLV Особые условия}}", "Имя":"{{DLV Имя}}", "Телефон": "{{DLV Телефон}}"}

А сам тег Яндекс Метрики примерно так (у вас будут другие параметры!):

Тег Яндекс Метрики

Сохраните тег.

Создание тега мини дебагера

Для каждой системы аналитики существуют свои способы и приемы отладки. Для Яндекс Тег Менеджера я рекомендую использовать такой подход:

• добавить еще один тег Мини дебагер триггеров и переменных;
• использовать в режиме предварительного просмотра _ym_debug=2;

Создайте еще один тег в своем контейнере Яндекс Тег Менеджера. Задайте ему название (например: Отладка отправка формы). Выберите тип тега Мини дебагер триггеров и переменных. Если его нет в списке, также добавьте его через Шаблоны из каталога.

Шаблон тега - Мини дебагер триггеров и переменных

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

Примечание: подробнее о режиме предварительного просмотра в Яндекс Тег Менеджере читайте в этом руководстве.

У мини дебагера всего две настройки:

Настройки тега "Мини дебагер триггеров и переменных"

1. установка триггера;
2. поле для ввода какого-то значения вручную (например, текста об успешно отправленном событии) или указания переменной, чтобы в консоли выводилось ее значение, если оно изменяется во времени динамически.

Нам этот тег необходим для того, чтобы:

• проверить корректность настройки созданного триггера отправки (срабатывает ли он в принципе);
• получить значения переменных и конкретизировать условие активации триггера, если нам нужно отследить конкретную форму.

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

Тип СРО - {{DLV Тип СРО}}, Страхование - {{DLV Страхование}}, Генподряд - {{DLV Генподряд}}, Особые условия - {{DLV Особые условия}}, Компенсация - {{DLV Особые условия}}, Имя - {{DLV Имя}}, Телефон - {{DLV Телефон}}

1	Тип СРО - {{DLV Тип СРО}}, Страхование - {{DLV Страхование}}, Генподряд - {{DLV Генподряд}}, Особые условия - {{DLV Особые условия}}, Компенсация - {{DLV Особые условия}}, Имя - {{DLV Имя}}, Телефон - {{DLV Телефон}}

Итоговый тег мини дебагера будет выглядеть так:

Тег отладки события отправки формы

Сохраните тег.

Режим отладки

Теперь нам необходимо проверить корректность выполненных настроек. В правом верхнем углу Тег Менеджера нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Предварительный просмотр

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

Открыть предварительный просмотр

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

Примечание: подробнее о режиме предварительного просмотра в Яндекс Тег Менеджере читайте в этом руководстве.

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Поскольку мы с вами создали тег мини дебагера триггеров и переменных, который выводит результат в консоли, нам необходимо открыть ее. Сделать это можно точно таким же образом, что и прежде, когда мы исследовали HTML-элементы на странице на вкладке Elements. Только теперь нам нужна вкладка Console:

Вкладка "Console" в браузере

Теперь совершите тестовую отправку формы на вашем сайте. Если вы все настроили правильно, тогда в консоли разработчика появится то уведомление, которое вы добавили в теге Мини дебагер триггеров и переменных, а именно в нем будут отображаться значения переменных уровня данных, извлеченные из полей формы, которую пользователь (=я) заполнил:

Значения переменных уровня данных после отправки формы

Если все переменные уровня данных определились как нужно, тогда вы можете перейти к заключительной части - проверить корректность срабатывания JS-события.

В Яндекс Метрике есть свой собственный отладчик. Вы можете использовать его вместе с режимом предварительного просмотра Яндекс Тег Менеджера для отслеживания любых JavaScript-событий. Для этого просто добавьте конструкцию _ym_debug=2 после параметра _ytm_preview через &, чтобы получилось так:

https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

1	https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок  . Нажмите на него, чтобы открыть панель отладки. Перейдите на вкладку Events и выполните то действие, которое вы проверяете/отслеживаете. Если вы все настроили корректно, то на шкале событий вы увидите достижение JS-цели:

Проверка JS-события с помощью _ym_debug=2

А когда вы перейдете на вкладку Console, то там будут отображаться параметры событий, которые вы указали в настройках тега в поле params:

Переданные параметры события

В завершение не забудьте опубликовать контейнер Яндекс Тег Менеджера, чтобы настройки применились ко всем пользователям вашего сайта. После публикации данные по событиям JavaScript будут передаваться в Яндекс Метрику. Посмотреть их можно будет в стандартных отчетах:

• Конверсии;
• Параметры событий и Параметры целей;
• выбрав любой стандартный отчет и созданную цель.

Пример переданных параметров событий для моей формы в Яндекс Метрику:

Параметры событий