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

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

Читать еще:

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

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

Сейчас в Яндекс Метрике отследить отправку формы можно несколькими способами:

• использовать отдельный тип цели, который называется Отправка формы

Отслеживание с помощью цели «Отправка формы»

Важное условие для срабатывания данной цели - форма должна быть создана с помощью тега <form>, а отправка формы выполняться через элемент <button type="submit">:

Элемент <button type="submit"> должен находиться внутри элемента <form>. Если форма на вашем сайте сделана по-другому, например, через теги <div>, а отправка формы реализована через <button type="button">, она отслеживаться с помощью данной цели не будет. Тогда я рекомендую использовать JavaScript-событие и обратиться за помощью к разработчику, либо настроить отслеживание отправки формы через Google Tag Manager или Яндекс Тег Менеджер.

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

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

Вам откроется страница сайта, на которой необходимо нажать на один из выделенных блоков, чтобы выбрать форму. Метрика подсвечивает выбор формы только на тех страницах, на которых были визиты в течение последних 30 дней. Форма определяется по наличию на сайте элемента <form> и некоторых параметров формы: идентификатора (id), имени (name) или XPATH-пути к элементу. При добавлении цели в Метрике отображается параметр, который удалось распознать. Он указывает, для какой формы создана цель - по нему может быть удобно различать цели в Метрике в списке целей. При проверке достижения целей не учитывается, на какой именно странице эта форма была выбрана.

Блоки с формой, которые Метрика обнаружила, будут выделены розовым цветом:

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

После этого в настройках цели у вас отобразится путь к этой форме:

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

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

В этом случае тоже соблюдается условие - если на вашем сайте есть форма с тегом <form> и кнопкой, которые имеют синтаксис:

Вы можете попробовать использовать стандартный триггер Отправка формы. Именно он будет запускать тег Яндекс Метрики с отправкой JavaScript-события.

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

Настройка триггера

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

В открывшемся окне выберите тип триггера Отправка формы:

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

Создание цели типа «JavaScript-событие»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь совершите тестовую отправку формы на вашем сайте. Поскольку ранее мы создали триггер отправки формы без каких-либо дополнительных условий, то он должен сработать корректно (если форма удовлетворяет вышеописанным критериям). И тогда в консоли разработчика появится то уведомление, которое вы добавили в теге Мини дебагер триггеров и переменных, а именно в нем будут отображаться значения переменных Form ID, Form URL, Form Classes и Form Element:

Запишите эти значения отдельно и запомните, для какой формы они были отображены. Если на вашем сайте форм несколько/много (2,3,4...N), тогда проделайте то же самое действие (оставьте тестовую заявку) поочередно для каждой формы. Таким образом, вы найдете значения Form ID, Form URL, Form Classes и Form Element для каждой формы.

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

Переменные	Форма 1	Форма 2
Form ID	form1	-
Form Classes	mailchimp-subscribe	mailchimp-subscribe
Form URL	./contact/contact-first.php	./contact/test-contact-tariff.php
Form Element	[object HTMLFormElement]	[object HTMLFormElement]

В таблице представлены значения двух форм на моем тестовом сайте. Как видите, у одной формы определился Form ID, а у другой нет. У обеих форм одинаковый Form Classes, поэтому мы не можем использовать эту переменную в качестве дополнительного условия активации триггера и отслеживать отдельно отправку формы 1 и отправку формы 2. Значит нам нужно какое-то другое условие. Form Element тоже не подходит, поскольку в нем передается не совсем то, что нам нужно. А вот Form URL у этих двух форм отличается. И это можно использовать в качестве дополнительного условия активации триггера.

Уточнение условия активации триггера

Обладая этой информации, вы можете вернуться в Тег Менеджер и конкретизировать условие активации триггера для своего тега. Более того, вы теперь можете создать два отдельных триггера типа Отправка формы. В одном вы зададите условие для одной формы, а в другом триггере - условие для другой формы. Если форм больше, то каждую из них вы можете отслеживать отдельно (если это требуется).

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

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

Отслеживание нескольких форм

После этого вы можете скорректировать цели в интерфейсе Яндекс Метрики, создав одну цель типа JavaScript-событие для одной формы, а другую цель такого же типа - для другой формы.

И затем просто добавить отдельные теги событий отправки со своими триггерами:

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

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