отслеживание ajax форм через gtm
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 или встроить событие в обработчик — я вам искренне завидую. Сегодня мы рассматриваем другой случай.
Последнее время всё реже можно встретить ситуацию, когда после отправки формы пользователь перенаправляется на новую страницу. Все манипуляции обычно происходят по тому же адресу. То есть для отправки данных используется технология 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 Tag Manager (GTM)
Введение или постановка проблемы
Описанное решение отлично подойдет маркетинговым агентствам не имеющим возможности управлять разработкой заказчика и нуждающимся в настройке трекинга конверсий.
Очень часто бывает так, что разработчики веб-сайтов и интернет-магазинов используют AJAХ-верфикацию полей формы до её окончательной отправки на сервер и при этом Thank You Page отсутствует как таковая и не имеет отдельного URL для идентификации момента успешной отправки формы инструментами веб-аналитики (Google Analytics или Яндекс Метрикой).
Некоторые веб-аналитики не хотят лишний раз напрягаться (или попросту не могут) и настраивают отправку кодов конверсий на клик по кнопке «Отправить», но мы же с вами понимаем, что этот путь ведет к завышению количества конверсий и искажению данных о маркетинговых результатах рекламных кампаний (РК) Яндекс Директ, Google Adwords и прочих представителей рекламных площадок. Искажение произойдет каждый раз, когда пользователь забудет ввести или введет в неправильном формате email или номер телефона и нажмет на кнопку «Отправить». При этом конверсия будет засчитана, а заявка фактически не отправится.
Успешная отправка формы для пользователя ознаменуется появлением всплывающего модального окна, всплывёт которое благодаря модификации CSS класса (атрибута class) div’а этого модального окна, затаившегося в коде страницы.
Стоит так же отметить, что путь размещения кода конверсии, лежащий через правку кода шаблона CMS (Content Management System: Битрикс, OpenCart, WordPress и прочих представителей веб-фауны), может оказаться ничуть не проще настройки тега Google Tag Manager’a, чем мы и собираемся заняться в данной статье. Данный факт подкрепляется еще и тем обстоятельством, что на сегодняшний день весьма популярны различные конструкторы сайтов и посадочных страниц (таких как UKit, Wix, Flexbe), которые используют собственный набор JS библиотек для контролов недоступных для редактирования простым смертным пользователям.
Предлагаемое решение
Что же делать аналитикам? Попытка поймать стандартное JavaScript событие onSubmit формы не позволит корректно идентифицировать момент успешной отправки формы. Мы пойдем другим путем и попытаемся поймать необходимый момент путем отслеживания мутаций кода и поймав момент показа формы обратной связи отправим соответствующее событие в Google Tag Manager.
С вашего позволения момент создания GTM контейнера и настройки базовых тегов веб-аналитики мы пропустим и перейдем сразу к конфигурации необходимого тега.
Итак, для начала мы разберемся, какая именно происходит мутация при успешной отправке формы заявки. Для этого вызовем Chrome Developer Tool и рассмотрим код модального окна успешной отправки формы.
Обратив внимание на CSS класс div’а «m_modal m_65730_done show» можно догадаться, что добавка show появляется после успешной отправки формы.
Проверить это можно закрыв модальное окно и найдя в коде div по классу «m_65730_done».
Что же дальше? Теперь нам потребуется небольшое подспорье в виде специальной JavaScript функции, которая позволит нам прикрепить наблюдателей за изменениями DOM интерфейсом MutationObserver.
Следует оговориться, что MutationObserver поддерживается не всеми существующими браузерами. Интерфейс MutationObserver поддерживается в Opera 15+, Firefox 14+ и Chrome 26+. Его также будет поддерживать Internet Explorer 11 и Safari 6.1. Safari 6.0 и Chrome 18—25 поддерживают MutationObserver, но с WebKit-префиксом (WebKitMutationObserver).
Более подробную информацию про MutationObserver Вы можете найти здесь.
Выглядит наша функция следующим образом:
Отлично, теперь нам осталось прикрепить attrchange к целевому div’у, при этом проверяя, что мутация привела к открытию окна, а не его закрытию:
Создадим HTML-тег в Google Tag Manager и опубликуем его.
В данном примере мы отправляем событие в dataLayer, которое в последствии обрабатываем отдельным HTML-тегом в GTM, вызывающий в свою очередь коды отправки конверсий Google Analytics и Yandex Metrika.
Ура, проблема решена! Теперь мы исполняем код трекинга конверсии только после того, как конверсия действительно произошла и получаем более точное количество конверсий по сравнению с количеством нажатий на кнопку «Отправить».
Настройка отслеживания 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
Также создаем цель для фиксации отправки другой формы. После этого если все сделано правильно, аналитикс должен начать собирать данные об успешно отправленных формах.
4 способа отслеживания AJAX-форм через GTM
Если вы PPC | SEO | SMM-специалист, интернет-маркетолог или просто человек, которому не безразлична судьба продвигаемого сайта, то вы должны знать сколько и из какого канала приходит заявок. Поэтому вы должны иметь навык настраивать отслеживание AJAX-форм через GTM. Есть 100500 способов как это сделать, но в этой статье мы разберем ТОП-4, которые сработают с 99% вероятностью. В одном из способов нам понадобится товарищ разработчик и его умение вставлять нужные коды на сайт. В остальных случаях можно справиться самостоятельно
С помощью встроенного триггера “Отправка формы”
Чтобы настроить цель через встроенный триггер GTM “Отправка формы”, необходимо узнать ID формы. Для этого кликаем правой кнопкой мыши на форму и вызываем консоль разработчика (“Посмотреть код”)
В открывшемся окне видим form id (если у вас прописаны id)
Далее создадим триггер для активации тега. Для этого заходим в GTM во вкладку “Триггеры” и создаем новый триггер. Выбираем тип триггера “Отправка формы” и заполняем поля:
При верной настройке видим, что тег сработал, а конверсия была успешно отправлена в Google Analytics
Доступность элемента
Далее переходим на сайт на страницу с формой и вызываем консоль разработчика. Копируем селектор текста благодарности, который появляется после успешной отправки формы
Сохраняем, публикуем, создаем цель Google Analytics и идем проверять. Обновляем страницу с формой и отправляем тестовую заявку. При корректной работе, в режиме отладки GTM вы увидите, что элемент виден, а цель подтянется в Google Analytics
Собственный код JavaScript
Этот способ отправляет данные об успешной отправке формы только при условии, что все обязательные поля заполнены. В нашем случае обязательные поля – имя и телефон
Для этого необходимо создать переменные с собственным кодом JavaScript для каждого поля. Идем по следующему пути: Переменные (пользовательские переменные) > Создать > Тип переменной Собственный код JavaScript
Далее вставляем в поле следующий код:
Вместо “name” вставляем собственные данные из кода формы. Для этого вызываем консоль разработчика в браузере, наводим на нужное поле, ищем в коде значение “name” (в нашем примере – это “user-name”), которое копируем и вставляем в код выше
Получаем переменную следующего вида:
Сохраняем и повторяем процедуру для всех обязательных полей.
После чего заходим на сайт, обновляем страницу и отправляем тестовую заявку. Если все корректно настроено, то после отправки формы тег переместится в строку “Tags Fired On This Page”. В отчете режима реального времени в Google Analytics также подтянется сработавшая цель.
Через события Ajax-форм
Для того, чтобы настроить отслеживания успешной отправки формы данным методом, необходимо добавить код в обработчик. Здесь нам понадобится помощь разработчика. Нужно внедрить JavaScript код, который будет передавать данные в DataLayer при успешной отправке формы. В success нужно добавить вот этот код:
Затем в GTM создаем триггер типа “Пользовательское событие”. В строку с именем прописываем такое же значение, как и в установленном коде. В нашем примере – formsend. Сохраняем, создаем тег, настраиваем цель в Google Analytics и проверяем работоспособность
При успешной отправке формы в отладке GTM вы увидите следующее:
Все вышеописанные способы имеют место быть, вам остается выбрать на свой вкус. У вас все получится!
Еще больше интересных инструкций и статей в нашем блоге
Хотите так же? Мы поможем!
Как предоставить доступ в Яндекс.Директ
Как предоставить доступ в аккаунт Google Ads
Конструктор для видеодополнений в Яндекс.Директе
Отвечаем в мессенджерах:
SILVERWEB: Комплексный интернет-маркетинг © 2017-2021
Заявка на обратный звонок
SILVERWEB с уважением относится к правам наших клиентов. Мы безоговорочно признаем важность конфиденциальности личной информации и соблюдаем правила защиты персональных данных от несанкционированного доступа третьих лиц (защита персональных данных).
Заполнение формы с контактными данными означает согласие с настоящей Политикой конфиденциальности и указанными в ней условиями обработки персональной информации.
Ниже приводится информация об обработке персональных данных.
1. Персональные данные. Цель сбора и обработки персональных данных.
1.1. Вы всегда можете посетить данную страницу, не раскрывая никакой персональной информации.
1.2. Под персональными данными понимается любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу.
1.3. Наше агентство собирает и использует персональные данные, необходимые для выполнения Вашего запроса, это – имя, телефон и электронный адрес.
1.4. Наше агентство не проверяет достоверность персональных данных, предоставляемых физическими лицами, и не проверяет их дееспособность.
2. Условия обработки персональной информации покупателя и её передачи третьим лицам.
2.1. При обработке персональных данных наших клиентов мы руководствуемся законом РБ «Об информации, информатизации и защите информации».
2.2. В отношении персональной информации покупателя сохраняется ее конфиденциальность.
2.3. Наше агентство не передает персональные данные третьим лицам.
3. Меры, применяемые для защиты персональной информации пользователей.
Наше агентство принимает необходимые и достаточные организационные и технические меры для защиты персональной информации пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с ней третьих лиц.