отправка формы google tag manager
Отслеживание отправки форм с помощью 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-агентстве
Как с помощью Google Tag Manager отследить отправку формы на сайте
Отслеживание конверсий позволяет узнать, как часто происходят полезные действия: покупка, подписка на рассылку, отправка контактных данных и так далее. Процесс настройки зависит от типа выполняемого действия пользователем на сайте.
Отслеживание с помощью триггера в Google Tag Manager
Если сайт выполнен корректно (со стороны программистов), доступен вариант отслеживания конверсии с помощью стандартного триггера в Google Tag Manager (GTM). Работает довольно редко, но тем не менее стоит попробовать.
Этот триггер прослушивает submit формы и когда происходит конверсия, передает событие gtm.formSubmit. Когда срабатывает событие gtm.formSubmit можно, например, отправить событие в Google Analytics.
Проверяем корректность работы данного триггера:
Как отслеживать конверсии из всплывающего окна
Для отслеживания отправки формы такого рода необходим установленный на сайте GTM и Google Analytics.
Селектор элемента необходимо определить на сайте. Для этого выполняем отправку формы. Затем видим всплывающее окно (или ответ сайта). Если сообщение через пару секунд пропадает, нажимаем на клавиатуре Esc — так можно остановить загрузку страницы и выполнение других сценариев. Нажимаем правой кнопкой мыши на окне и выбираем «Просмотреть код». В появившемся окне нас интересует:
Нажимаем правой кнопкой мыши и выбираем:
Копируем его и вставляем в поле № 3.
Далее ставим флажок «Некоторые события типа “Доступность”». Затем выбираем из выпадающего списка значения как на изображении. Используя предварительный просмотр GTM, находим текст всплывающего окна и копируем его:
Переходим на вкладку и создаем новый тег.
Далее заполняем поля:
Выбираем тип тега Google Analytics — UA, для удобства называем тег также как и триггер.
Выбираем тип отслеживания — «Событие». Категорию называем также как и тег. Указываем настройку GA (с отмеченным идентификатором отслеживания).
В качестве правила активации тега указываем созданный ранее триггер.
Нажимаем кнопку «Save» и с помощью предварительного просмотра проверяем, насколько исправно работает созданный тег при отправке формы.
В поле «Категория» копируем значение из поля категории, созданного тега из GTM и нажимаем «Сохранить».
Как отслеживать конверсии с помощью прослушивания ответа функции ajaxSuccess
Этот вариант подходит для случаев, когда невозможно отследить конверсию ни одним из вышеперечисленных способов.
Важно: все обработчики события ajaxSuccess вызываются при успешном завершении любого запроса Ajax. Код будет получать данные от функции только при успешной обработке формы и ее отправке.
Создаем триггер столько раз, сколько форм нам необходимо отслеживать, повторяя вышеперечисленное и даем уникальное название каждому.
Важно: если Ajax используется только для формы заявки, достаточно настроить триггер на пользовательское событие «ajaxSuccess».
Если на странице есть динамический контент, который использует ajax, то более подробную информацию вы можете получить из переменной уровня данных ajaxSuccessData.
Эти данные можно использовать для фильтрации нужной вам формы.
Затем настраиваем «Цель» в Google Analytics.
Важно: такой способ нуждается в тщательном тестировании и отладке.
В большинстве случаев код срабатывает прямо из «коробки», но могут быть свои необходимые доработки отслеживания. Необходимость доработок и тестирования зависит от «чистоты» и корректности написанного кода на сайте, от правильно определенных событий и условий их отработки.
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. Отслеживание отправки формы с помощью триггера Отправка формы
Если на вашем сайте есть форма с тегом и кнопкой, которые имеют синтаксис:
Отслеживание отправки форм на сайте с помощью GTM
Ранее мы уже писали о том, как установить и настроить Google Tag Manager на сайт, а также как с его помощью настроить отслеживание кликов. В этой статье мы расскажем о том, как с помощью GTM настроить отслеживание успешной отправки формы.
В зависимости от настроек CMS отслеживание отправки форм на сайте можно настроить разными способами. Например, если после отправки формы происходит перенаправление на страницу благодарности, настроить отслеживание будет очень просто, так как в таком случае конверсией можно считать посещение страницы благодарности. Соответственно, можно настроить цель без помощи GTM и вмешательства в исходный код сайта.
Достаточно настроить в Google Analytics цель «Переход на страницу благодарности».
Рисунок 1 
В этой статье мы расскажем, как настроить отслеживание отправки формы, если после успешной отправки нет перенаправления на страницу благодарности, а всплывает только окно благодарности.
Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью submit
В нашем случае такие формы отправляются на сервер через submit. Для отслеживания цели можно привязаться к классу или идентификатору формы. Для этого находим уникальный идентификатор элемента, к которому можно привязаться. В нашем случае это id-формы.
Рисунок 2
Далее проверяем, активированы ли переменные в разделе «Формы».
Рисунок 3 
На следующем этапе создаём триггер с такими параметрами:
Тип: «Отправка формы»
Условия активации: «Некоторые формы»
Условие, при наступлении которого должен активироваться триггер: в нашем случае это Form на главной странице сайта
Рисунок 4
Затем создаём тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «Form»
Действие: мы назвали «Otpravka»
Триггер активации: триггер, созданный на предыдущем шаге
Рисунок 5 
Рисунок 6 
После того как мы убедились в правильной настройке тега (для этого используем режим предварительного просмотра), настраиваем отслеживание цели в Google Analytics.
Таким образом, мы настроили отслеживание события с помощью GTM без вмешательства в исходный код сайта.
Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью AJAX
Настроить отслеживание успешной отправки форм без вмешательства в исходный код сайта можно не во всех случаях. Например, при передаче данных с помощью AJAX необходимо выполнить следующие действия:
А. Найти Javascript код, в котором расположена функция, отправляющая данные через AJAX;
Б. Найти в этой функции параметр «Success», отвечающий за действия, которые будут выполняться после успешной отправки данных на сервер;
В. Прописать внутри function() < … >команду
dataLayer.push(<'event': 'event_name'>) заменив «name» придуманным названием.
Мы написали так:
dataLayer.push(<'event': 'otpravka_form'>)
В коде это выглядит следующим образом:
Рисунок 7 
Г. Настроить отслеживание успешной отправки формы с помощью GTM. Для этого нужно создать триггер со следующими параметрами:
Тип триггера: «Пользовательское событие»
Имя события: нужно указать event, который был прописан в функции; в нашем случае это ‘otpravka_form’
Рисунок 8 
Затем нужно создать тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «form ajax»
Действие: мы назвали «otpravka»
Триггер активации: триггер, созданный на предыдущем шаге
Рисунок 9 
После того как вы убедитесь в правильной настройке тега (для проверки нужно использовать режим предварительного просмотра), можете настроить отслеживание цели в Google Analytics.
По примерам, приведённым выше, вы сможете сами настроить отслеживание отправки форм на сайте. Если возникнут вопросы, пишите в комментариях, с радостью вам ответим!
Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager
Среди трех основных способов оставить свою заявку на сайте, а именно: отправить форму, совершить звонок и написать в чат, первый занимает львиную долю в общем количестве и отслеживается намного чаще, чем остальные.
Большинство интернет-маркетологов норовят знать с каких конкретно источников приходят на площадку посетители, отправившие формы, и это не может не радовать. Но кроме успешной отправки, есть и другие способы взаимодействия с формами, и именно их отслеживание помогает понять, почему часть заинтересованных пользователей так и не совершили обращение. Мы разберем, как отслеживать следующие способы взаимодействия пользователя с формами (перечень от простого к сложному):
Интересно? Тогда давайте по-быстрее приступим.
Отслеживание клика по кнопке отправки формы
Начнем с простого: клик по кнопке отправки формы, и нам понадобится:
где, вместо YOUR_SELECTOR указываем скопированное значение CSS-селектора.
На этом настройка отслеживания клика по кнопке успешно завершена. Но на практике, у большинства форм есть валидация, и хорошо бы понимать, какой процент пользователей вводит корректные данные, а какой процент это делает с ошибками.
Передача значения введенного в поля формы
Чтобы настроить проверку валидации формы при клике на кнопку отправки нам необходимо сначала научиться сохранять значения, которые вводит пользователь в поля формы. Для этого нам понадобится пользовательская переменная типа Собственный код JavaScript со следующим кодом:
Перед использованием необходимо заменить YOUR_SELECTOR на CSS-селектор необходимого поля. Получить его можно по аналогии с CSS-селекторами кнопки. Только кликать правой кнопкой теперь нужно не на кнопку, а на соответствующее поле:
Чтобы проверить, действительно ли вы скопировали необходимый селектор, запустите в консоли разработчика следующий код:
Если все верно, получите текущее значение поля:
Созданная переменная будет выглядеть следующим образом:
Теперь сможете использовать эту переменную для передачи данных в любую внешнюю систему. Рады? Я тоже! Самое время перейти к настройке валидации формы через Google Tag Manager.
Проверка валидации формы при клике
Для этого решения нам понадобиться еще одна пользовательская переменная, назовем её <
Для удобства можно скопировать код ниже:
где вместо значений YOUR_SELECTOR_NAME, YOUR_SELECTOR_EMAIL, YOUR_SELECTOR_TEL необходимо ввести значение CSS-селекторов для соответствующих полей формы. Как это сделать мы разбирали выше.
Теперь, когда мы настроили валидацию внутри переменной GTM самое время создать триггер и тег для отправки данных в Google Analytics. Первый создаем по аналогии с обычным кликом на кнопку, единственное отличие — созданная нами переменная для проверки валидации должна иметь значение true.
Тег будет выглядеть примерно так:
Изменение данных в полях формы
Мы разобрали, как с помощью Google Tag Manager отслеживать попытки, а также успешные отправки формы. Но есть еще одна серая зона: посетители, которые начали заполнять форму, но так её и не отправили. Сейчас это исправим!
Здесь нам понадобится:
Код который используется:
Вместо значения YOUR_SELECTOR необходимо ввести значение CSS-селектора формы.
Триггером для данного тега выбираем событие Window Loaded. Лучше всего ограничить трегер только теми страницами, на которых есть соответствующая форма. Например для главной:
И в момент когда пользователь изменяет значение в любом из полей формы, мы передаем на уровень данных информацию о событии change form, что позволит в следующем пункте настроить на это событие соответствующий триггер.
При создании тега для передачи данных в Google Analytics важно в пункте Расширенные настройки > Настройки активации тега указать значение Один раз на страницу. Мы же не хотим, чтобы событие отправлялось каждый раз при смене значения в полях формы? Сам тег будет выглядеть следующим образом:
С полученных данных вполне можно построить следующую воронку, которая даст нам понимание, на каком этапе взаимодействия с формой мы теряем вовлеченных пользователей:
Если у вас остались вопросы по отслеживанию форм с помощью Google Tag Manager — пишите их в комментариях.