9 способов отслеживания отправки форм с помощью GTM
Подробное руководство по отслеживанию отправки форм 9 различными способами с помощью Google Tag Manager.
Примечание:
Второй по значимости настройкой после кликов по кнопкам (а может быть и первой) у интернет-маркетологов является отслеживание различных форм на сайте. Обращение, заполненное и отправленное с контактной информацией пользователя, как правило, говорит об интересе к вашему товару или услуге, что, в свою очередь, может в дальнейшем привести к реальным продажам. Поэтому крайне важно правильно настроить сбор и передачу данных об этом событии в инструменты веб-аналитики.
В этой публикации рассмотрим девять способов отслеживания отправки форм с помощью Google Tag Manager и отправки данных в Universal Analytics, а именно:
Примечание: в зависимости от того, как у вас на сайте реализована отправка формы, вы выбираете для себя наиболее оптимальный вариант отслеживания.
Разберем каждый способ подробнее.
Способ №1. Отслеживание отправки формы с помощью отдельной страницы
Суть этого способа заключается в том, что после отправки формы пользователя перенаправляет на отдельную страницу с уникальным URL-адресом. Еще ее называют страницей Спасибо.
Отслеживание формы с помощью отдельной страницы
В этом случае нет необходимости использовать переменные, триггеры и теги Google Tag Manager. Достаточно просто в Яндек.Метрике и Universal Analytics настроить цель на посещение этой страницы:
Настройка цели на посещение страницы
Но если вы все же захотите настроить отслеживание как событие через GTM, то можете воспользоваться триггером Просмотр страницы с условием активации на конкретной странице (странице Спасибо):
Триггер «Просмотр страницы»
В моем примере – это Page Path содержит thank—you, поскольку URL-страницы имеет адрес /thank—you.html. А тег, который используется для передачи данных в Universal Analytics, имеет вид:
Через некоторое время все данные по событиям появятся в Google Analytics отчете Поведение — События — Лучшие события. Если вы планируете отслеживать отправку формы не только как события, но и как цель-события (конверсии), настройте цель с типом Событие:
Настройка цели-события в Universal Analytics
Данный способ является наиболее простым в отслеживании.
Способ №2. Отслеживание отправки формы с помощью триггера Отправка формы
Если на вашем сайте есть форма с тегом и кнопкой, которые имеют синтаксис:
Настраиваем цель на отправку AJAX-формы в т.ч. с помощью GTM
Feb 6, 2017 · 4 min read
Подписывайтесь на мой канал в Телеграме t.me/ppclifehacks — лайфхаки и решения проблем из PPC и веб-аналитики: как собрать свой коллтреккинг на коленке, устроить вечную рекламную акцию или правильно отследить заполнение AJAX-форм на сайте. Всё это и другие статьи в канале и этом блоге.
Самый простой способ отслеживать отправку обычной (не AJAX) формы через Google Tag Manager — это отправлять событие в Analytics или Метрику по триггеру на отправку формы:
А если не используете GTM, то повесив отправку цели на onsubmit.
Но если форма использует AJAX (отправка без перезагрузки страницы), то это событие не сработает и в качестве альтернативы часто отслеживают клик на кнопку “Отправить” либо через GTM по событию gtm.click либо вешая отправку цели на onclick по кнопке.
По факту, нажатие этой кн о пки не всегда означает успешную отправку формы, во-первых форму не всегда заполняют правильно, во-вторых иногда на кнопку нажимают просто так, вероятно вдохновившись призывом в объявлении “Ищешь шашлык? Купи септик! Жми!”
Что же делать?
В данной инструкции мы рассмотрим как отправить цель и сделать событие на успешную отправку AJAX-формы в GTM. Событие в GTM можно использовать не только для отправки цели, но и для других задач.
Возьмите за правило делать резервные копии перед внесением изменений в код.
1. Придётся немного влезть в код
Найти нужный нам код обычно можно по слову success, либо ищем что-то похожее. Проверяем, правильный ли код мы нашли — в моём случае отправка POST-запроса на url: ‘js/mail.php’ явно намекает, что мы нашли нужное. В вашем случае код может отличаться, ищите функцию, которая выполняется при успешной отправке формы. Приступаем к правкам.
Вариант без использования GTM:
Нужно в success дописать отправку нашей цели, например так:
Код для Universal Analytics:
Код для Universal Analytics gtag.js:
Код для Яндекс.Метрики:
Где XXXXXX номер вашего счётчика.
В принципе, если вы не используете GTM, на этом можно остановиться.
Вариант с использованием GTM:
Нужно в success дописать отправку пользовательского события GTM:
Отслеживание отправки форм с помощью GTM
Если у вас есть грамотные разработчики и формы на вашем сайте можно отследить с помощью стандартного триггера “Отправка формы” в Google Tag Manager или встроить событие в обработчик — я вам искренне завидую. Сегодня мы рассматриваем другой случай.
Последнее время всё реже можно встретить ситуацию, когда после отправки формы пользователь перенаправляется на новую страницу. Все манипуляции обычно происходят по тому же адресу. То есть для отправки данных используется технология AJAX.
Неточные и малоэффективные способы отслеживания статистики будут существовать всегда.
Как «косячили» раньше:
Раньше отправку форм отслеживали по индивидуальному адресу страницы. Если его не было — просили разработчиков изменить саму логику работы формы.
Как «косячат» сейчас:
Относительно новые технологии позволяют отправлять данные без перезагрузки страниц. Это создает проблему для отслеживания отправки форм: вместо изменившейся ссылки отслеживают НАЖАТИЕ на кнопку, а не факт отправки.
Плюсы таких подходов:
• Простота в установке цели. Если вы не знаете, как это делать, то сможете достаточно быстро в этом разобраться.
• Большее количество заявок *sarcasm*.
• Выполненные цели не совпадают с количеством заявок. Погрешность при этом может в среднем составлять 20-30%.
• Данные по результативности источников трафика также не будут соответствовать действительности.
К тому же, трудности возникают, когда нам необходимо внести правки в код сайта, чтобы ПРАВИЛЬНО отправить событие об отправке формы:
• Разработчики клиента не знают, что/как/где нужно исправить. Эта проблема встречается довольно часто.
• Сайт находится на сторонней платформе (nethouse, insales, wix, LPgenerator и др.). Они не всегда дают возможность оперативно изменять код.
В сети можно найти много способов отслеживания отправки форм. Но нередко они слишком индивидуальные или не всегда рабочие.
Я хочу рассказать вам о решении, которое срабатывает на всех сайтах, в которых мы его используем. Событие отправляется только в случае успешной отправки формы.
1. Необходимо сгенерировать код GTM и установить его на сайт в соответствии с требованиями Google Tag Manager: tagmanager.google.com
2. На вкладке с триггерами добавить новый — “Модель DOM Готова”.
3. На вкладке “Теги” создать новый с типом “Пользовательский HTML”, а в качестве триггера выбрать созданный на предыдущем шаге.
Он поможет отслеживать отправку форм. Подробнее о коде можете прочитать здесь: vk.cc/6Au3Jj
4. Затем создать переменную для данных об успешной отправке.
Чтобы узнать, какую переменную тянуть, необходимо:
— Заполнить и отправить форму
— Открыть консоль браузера и отправить запрос к уровню данных (скорее всего, вида «dataLayer» без кавычек). После этого появится несколько объектов:
В этом конкретном случае есть два объекта «ajaxSuccessData». В URL первого — “говорящая ссылка” об отправке сообщения. Второй показывает на странице блок с сообщением “Заявка отправлена”.
У вас не появились похожие данные? Вполне возможно, в вашем коде GTM просто используется другое название уровня данных.
Проверить название уровня можно в коде GTM:
5. Создать переменную: GTM → Переменные → Создать
На предыдущем скриншоте интересен только статус «success»:true в переменной уровня данных responseText, которая в свою очередь находится внутри контейнера ajaxSuccessData.
Как в этом случае проверить наличие статуса «success»:true? В поле имя переменной уровня данной нужно ввести через точку их названия:
Имя самой переменной может быть любым.
— Название триггера должно быть говорящим.
— Тип триггера «Пользовательское событие»
— Имя события — “ajaxSuccess”:
— Активация на некоторых страницах: только там, где переменная получает данные об успешной отправке формы.
В каждом конкретном случае форм может быть несколько. Если их нужно разделять, можно использовать другие данные, которые передаются при отправке. В нашем случае это был лендинг, и данного подхода было достаточно.
7. После того как триггер создан, можно создавать тэги отправки событий для Метрики и Analytics.
Обращаем внимание: на скриншоте для Analytics идентификатор отслеживания задан через переменную, если у вас используется другая переменная для указания идентификатора — используйте ее или укажите идентификатор вручную. Но последний вариант делать не рекомендуется.
Сайты разные, но последовательность действий, описанная выше, для всех одна.
Отслеживайте цели правильно, и пусть ваши продажи постигнут дзен!
Автор: Павел Мрыкин, руководитель отдела автоматизации и аналитики в digital-агентстве
Отслеживание формы AJAX с помощью Диспетчера тегов Google
Павел Мрыкин
Руководитель отдела автоматизации и аналитики MediaGuru
# 1. Отслеживание форм с помощью Google Tag Manager (со слушателем форм)
# 2. Отслеживание страницы «Спасибо» с помощью Диспетчера тегов Google
# 3. Отслеживание формы AJAX с помощью Диспетчера тегов Google
Если вы читаете эту часть, значит ваша форма, вероятно, не отправляет действительные формы отправки событий и не перенаправляет пользователей на страницу «спасибо за заказ». Вероятно, она просто обновляется, а затем отображает сообщение «Вы успешно заполнили форму» без фактического обновления страницы. Существует большая вероятность того, что эта форма использует AJAX. Я предлагаю пропустить все технические подробности в данном случае (так как я не являюсь разработчиком + я не думаю, что я способен четко объяснить, как это работает). Единственное, что вам нужно освоить — это прослушиватель AJAX.
Lunametrics поделились потрясающим прослушивателем AJAX для GTM, который каждый может использовать бесплатно. Более подробно о его работе вы можете узнать в блоге консалтингового агентства LunaMetrics. Здесь мы позаимствуем их код для отслеживания форм. Скопируйте приведенный ниже код и вставьте его в собственный HTML-тег в GTM:
Установите этот HTML-тег для запуска на всех страницах. Теперь давайте проверим, создана ли форма с помощью AJAX:
1. Включить (или обновить) режим предварительного просмотра и отладки.
2. Обновите веб-страницу с помощью формы.
3. Попробуйте отправить форму (без ошибок).
4. Появилось ли событие ajaxComplete в консоли предварительного просмотра и отладки?
Выглядит сложно, если ты не разработчик, верно?
Давайте рассмотрим это более подробно. Вы видите сообщение «Данное сообщение было успешно отправлено»? Ура! Мы можем использовать его в качестве триггера.
Давайте создадим переменную уровня данных в Диспетчере тегов Google.
1. Перейдите к переменным.
2. Прокрутите вниз и найдите переменную User-Defined и нажмите «Создать».
3. Нажмите «Конфигурация переменных» и выберите тип переменной — «Переменная слоя данных».
4. Введите имя переменной слоя данных — attributes.response. Оставьте все остальные настройки такими, какие они есть.
5. Моей рекомендацией для заголовка этой переменной GTM является dlv — attributes.response («dlv» означает переменную слоя данных).
После того, как мы создали переменную DataLayer атрибута.response в Диспетчере тегов Google, начнем отладку. Обновите предварительный просмотр и режим отладки, обновите страницу, где находится форма AJAX. Для образовательных/тестовых целей я использую формы с этого сайта (используйте пример 1). Вы также можете попробовать их самостоятельно.
Заполните форму и нажмите кнопку «отправить». Выберите самое последнее событие ajaxComplete в консоли предварительного просмотра и отладки, затем перейдите на вкладку «Переменные» и найдите новую переменную dlv — attributes.response. Если вы всё сделали правильно, это должно выглядеть так:
Теперь создадим триггер, который запускается, когда событие является ajaxComplete и наша новая переменная Data Layer содержит текст. Сообщение отправлено успешно.
1. Перейдите в «Триггеры» и нажмите «Создать».
2. Выберите Тип триггера — Пользовательское событие. Если вы новичок в этом, Custom event = Data Layer. AJAX-прослушиватель компании Lunametrics создает событие Data Layer ( через метод dataLayer.push ) каждый раз, когда выполняется запрос AJAX.
3. Введите название события — ajaxComplete.
4. Данный триггер должен срабатывать для некоторых специальных событий.
5. Определите условие при срабатывании триггера — dlv — attributes.response содержит «Сообщение успешно отправлено».
Проверка
1. Назначьте этот новый триггер тегу Google Analytics, который вы создали в начале.
2. Откройте (или обновите) режим предварительного просмотра и отладки, обновите веб-страницу с формой, которую вы хотите отслеживать.
3. Затем заполните форму AJAX и нажмите «отправить». После успешной подачи тега Google Analytics следует запустить (он будет отображаться в режиме предварительного просмотра и отладки, а также в отчетах о событиях в режиме реального времени в Google Analytics ).
Что следует учитывать при отслеживании форм AJAX:
1. Ответ вашей формы может выглядеть по-другому, поэтому попробуйте воспользоваться моим руководством в соответствии с вашей ситуацией.
2. Если разработчики изменят данные ответа, ваш триггер не сработает. Сообщите разработчикам о вашей реализации GTM.
3. Если страница содержит более одной формы AJAX, попробуйте найти дополнительную информацию в слое данных, которая может помочь диспетчеру тегов Google определить разницу между этими формами.
Еще о способах отслеживания формы с помощью Диспетчера тегов
# 4. ФОРМЫ ОТСЛЕЖИВАНИЯ С ИСПОЛЬЗОВАНИЕМ ТРИГГЕРА ВИДИМОСТИ ЭЛЕМЕНТОВ
# 5. НАПИШИТЕ СВОЙ СОБСТВЕННЫЙ АВТОМАТИЧЕСКИЙ ПРОСЛУШИВАТЕЛЬ СОБЫТИЙ
# 6. ОТСЛЕЖИВАНИЕ ФОРМ С ПОМОЩЬЮ СОБЫТИЙ DATALAYER
# 7. Отслеживание формы с помощью DOM Scraping
Материал подготовлен на основе статьи на Analytics mania
Настройка отслеживания ajax форм при помощи GTM без программиста
Постановка задачи
Настройку отслеживания форм будем проводить на тестовом сайте test.toolmark.ru
Скрипты, которые использованы в этой статье написаны с применением библиотеки jquery. Эта библиотека используется на многих сайтах в мире, если у вас на сайте эта библиотека не подключена, то скрипты работать не будут. Поэтому сначала проверим, подключена ли библиотека. Открываем панель разработчика и инспектируем наш код ищем подключение библиотеки. 
На скриншоте выше показано, как подключена библиотека на моём сайте. Для того чтобы точно удостовериться, что библиотека подключена и работает откройте консоль, нажмите ctrl+shift+j или правой кнопкой мыши вызовите контекстное меню и нажмите на пункт “исследовать элемент” перейдите на вкладку console и введите в консоль код ниже и нажмите энтер
В случае если jquery подключена, появится окно с уведомлением об этом, если jquery не подключена, то ничего не произойдет, окно не появится. 
Если вы выяснили, что на вашем сайте нет jquery, то необходимо подключить её, прописав код напрямую в шаблон сайта или установить используя GTM.
Создайте в GTM тег «пользовательский HTML» в теге пропишите следующую строку
в качестве триггера выберите «all pages» сохраните все изменения и опубликуйте обновленные данные контейнера. Теперь снова введите в консоль скрипт описанный выше, если вы все сделали правильно должно появиться окошко с уведомлением о версии jquery.
На сайте есть 2 типа форм
Форма с 2 полями: имя и телефон
и форма только с телефоном
Нам нужно отслеживать каждую форму по отдельности. Мы хотим считать количество отправок по каждой форме, для этого у нас будут 2 цели в google analytics.
У каждой формы есть атрибут name, значение атрибута у первой формы form-1
а у другой формы form-4
Для каждого типа форм подключен отдельный обработчик.
Значение атрибута name нам потребуются далее, для того чтобы понимать какая именно форма была отправлена.
Изучаем ответы сервера
Для того чтобы отслеживать формы, которые отправляют и получают данные от сервера при помощи ajax нужно научиться перехватывать запросы, которые получает браузер пользователя. Потом из этих запросов нужно извлечь данные и найти к чему привязаться при настройке кодов отслеживания в GTM.
В консоль браузера вводим код, который будет срабатывать при успешном ответе сервера и выводить в консоль содержимое объектов xhr и settings
Чтобы вызвать консоль нажмите ctrl+shift+j или правой кнопкой мыши вызовите контекстное меню и нажмите на пункт “исследовать элемент” и введите код описанный выше. Код в консоли будет выглядеть примерно так
Примечание. Названия аргументов в функции function( event, xhr, settings ) могут быть произвольными. Теперь заполняем и отправляем форму
У объекта settings есть свойство data
в значении содержится указание типа формы form-1, то есть по этому свойству мы можем определить какая именно форма была отправлена
У объекта xhr есть свойство responseJSON
в котором содержатся дополнительные свойства и их значение. В качестве значения передается сообщение об успешной отправке формы. Можем использовать эту информацию для настройки триггера в GTM.
Настройка GTM для отслеживания ответа сервера
Переходим в GTM. Необходимо создать 2 переменные уровня данных. Первую назовем name-form в неё мы будем передавать значение свойства data из объекта settings
Вторую переменную назовем response в неё мы будем передавать значение свойства responseJSON.infos из объекта xhr
Теперь создадим триггер типа пользовательское событие и назовем произвольно, например success-form
Создаем тег, типа пользовательский html с его помощью загружаем на сайт код для отслеживания ответа сервера в случае успешной отправки формы. В качестве триггера выбираем all pages. Код ниже
Разберем подробнее, что означает каждая строчка кода
1 — стандартный тег обозначающий начало тела скрипта
3 — уровень данных, объект в который можно записать данные для отправки в GTM
4 — event специальная переменная, которая используется для обозначения триггеров типа “пользовательское событие”. Указываем название пользовательского события созданного ранее.
5 — указываем название переменной которую создали ранее, в качестве значения пишем код который будет получать значение нужных нам свойств из объекта xhr
6 — указываем название переменной которую создали ранее, в качестве значения пишем код который будет получать значение нужных нам свойств из объекта settings
7,8 — Закрывающие скобки
10 — тег закрывающий скрипт
Созданный тег будет получать данные ответа сервера и отправлять их в GTM.
Теперь нужно донастроить триггер success-form в GTM. В качестве условий активации указываем наши переменные уровня данных и нужные нам значения.
Вначале статьи мы говорили о том, что у нас на странице есть 2 типа форм, у первой атрибут name=form-1, у другой form-4. Для того чтобы отслеживать form-4 нам нужно создать еще один триггер типа пользовательское событие, в котором для параметра name-form указать значение form-4, потом для этого триггера создать отдельный тег для отправки данных в аналитикс.
Создание тега для отправки события в аналитикс
Теперь создаем стандартный тег GA для отправки событий в аналитикс
В пункте переменная настроек выбираем переменную с нашим счетчиком. В качестве триггера выбираем триггер success-form созданный ранее. Публикуем изменения. Теперь при успешной отправке формы с атрибутом name = form-1, будет срабатывать наш тег. Такой же тег нужно создать для другой формы, но указать другое событие и выбрать соответствующий триггер созданный ранее для form-4. Опубликуйте изменения в контейнере GTM.
Настройка цели в GA
Теперь создаем в GA цель типа “собственная” для фиксации событий отправки первой формы. В качестве категории и действия события указываем те же данные что указали при создании тега для отправки данных в GA
Также создаем цель для фиксации отправки другой формы. После этого если все сделано правильно, аналитикс должен начать собирать данные об успешно отправленных формах.