Отслеживания AJAX-форм через GTM — 4 способа

Вы — специалист по SMM или SEO? Или же просто человек, которому не всё равно на собственный продвигаемый сайт? Тогда вам надо знать, с каких каналов вам поступают заявки. И пришло то время, когда требуется научиться отслеживать формы AJAX через GTM. Ниже мы разберем несколько рабочих способов, как это сделать.

№1 Через встроенный триггер “Отправка формы”

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

Ниже вы увидите form id:

Чтобы активировать тег, создайте триггер. Для этого зайдите во вкладку “Триггеры” в GTM. Выберите “Отправка формы” и заполните каждое поле:

Поставьте флажок напротив “Проверки ошибок”. При активации триггера кликните по “Некоторые формы” и задайте следующие параметры: Form ID > содержит > *id вашей формы*, после чего сохраните.

После создайте тег. Триггером будет служить “Отправка формы”. Его тоже нужно сохранить.

Проверьте работоспособность цели в Google Ads. Для этого нужно активировать предварительный просмотр, перейти на сайт и обновить страницу. В GA зайдите в “Отчеты в реальном времени” и кликните по пункту “Конверсии”. Сделайте тестовую заявку.

№2 Доступность элемента

Сначала нужно сделать триггер. В его виде выберите “Доступность элемента”. Дальше кликните на “Селектор CSS”.

Перейдите на портале на страницу с формой и вызовите консоль разработчика. Скопируйте текст благодарности.

Селектор нужно вставить в “Селектор элементов”. В правилах запуска поставьте флажок рядом с полем “Один раз за элемент”. В проценте видимости выставьте значение 25. Также галочка должна стоять у “Регистрации изменений DOM”. Задавайте триггеру имя и сохраните его.

Дальнейшие действия:

  • создайте тег;
  • задайте тип тега в Google Analytics;
  • перейдите в Universal Analytics;
  • выберите триггером “Доступность элемента”.

Сохраните, опубликуйте и проверьте, отправив тестовую заявку.

№3 Свой код Java Script

Данные будут отправлены, если каждое обязательное поле заполнено.

Чтобы это сделать, создайте переменные со своим кодом JS для всех полей. В поле нужно вставить:

В качестве “name” будет собственная информация из кода формы.

Переменная будет такого вида:

Сохраните, после чего эту процедуру нужно повторить для каждого поля.

После создайте тег, у которого активационным триггером будет сделанный ранее. Дальше зайдите на свой портал, обновите страницу и отправьте заявку на тест.

№4 С помощью событий форм AJAX

Для отслеживания в обработчик потребуется добавить код:

После в GTM сделайте триггер вида “Пользовательское событие”. В строчке с именем прописывается тоже самое значение. Сохраните, создайте тег, настройте цель и проверьте работоспособность.

Если всё правильно, то вы увидите: