Настройка отслеживания отправки AJAX-форм в ЯМ и GA – два эффективных способа

На этом сайте уже был пост про отслеживание отправки данных через AJAX-форму. Тем не менее, есть ещё два очень интересных способа, которые нельзя оставить без внимания. Опубликованы они на сайте агентства интернет-маркетинга SEOupdate. Но отличие от ранее опубликованных способов эти заключаются в точности заполнения полей формы, т.е. при нажатии кнопки Отправить в неудачно заполненной форме событие передаваться не будет, и соответственно, цель не будет засчитана. Разберём эти способы на примерах.

Но перед тем, как начать, необходимо убедиться, что код Google Tag Manager присутствует на сайте. Если его нет, надо обязательно сделать это, иначе не будет никакого толку.

Способ 1. Проверка заполнения полей формы

GTM засчитает и отправит событие только в том случае, когда при нажатии кнопки Отправить будут заполнены необходимые поля формы (например Имя, Телефон и/или E-Mail).

Настройка переменных Google Tag Manager

Встроенные переменные – Настроить

В Конфигурации встроенных переменных отмечаем галочками все пункты раздела Клики

Пользовательские переменные – Создать

Называем её, например, Name

В Конфигурации переменной выбираем тип Собственный код JavaScript

и вставляем в него код

function() {
	return document.getElementsByName("txtname")[0].value
}

Сохраняем

txtname – это будет у нас параметр атрибута name поля Имя (в приведённой выше форме). В каждой форме он может быть свой, поэтому внимательно изучаем её исходный HTML-код.

Таким же образом создаём ещё столько переменных, сколько необходимо для обязательного заполнения полей. Т.е., если для успешной отправки формы необходимы ещё E-Mail и Телефон, то таким же образом создаём ещё две переменных типа Собственный код JavaScript: E-Mail и Phone, и в коде меняем txtname на txtemail и txtphone соответственно (в соответствии в приведённой выше формой).

Настройка триггера Google Tag Manager

Триггеры – Создать

Задаём имя триггера, например Feedback Example – Clicks. В Настройках триггера выбираем тип Все элементы из раздела Клик

Условия активации – Некоторые клики

Активировать триггер при наступлении событий и выполнении условий

Click Classesравноbutton
Nameне соответствует регулярному выражению^$
E-Mailне соответствует регулярному выражению^$
Phoneне соответствует регулярному выражению^$

Click Classes – это мы зафиксируем событие нажатием на кнопку Отправить, т.к. она имеет атрибут класса button (в соответствии с нашей формой)

Сохраняем

Настройка тега GTM для Google Аналитики

Теги – Создать

  • Задаём имя тега: Feedback Example – GA
  • Тип тега: Google Аналитика – Universal Analytics
  • Категория: FeedbackExample
  • Действие: ClickSend
  • Ярлык: SendOK
  • Настройки Google Analytics: {{Google Analytics}}
  • Ставим галочку Включить переопределение настроек в этом теге
  • Идентификатор отслеживания: UA-XXXXXXXXX-1 (это id счётчика Google Analytics)

и привязываем к нему Триггер активации: Feedback Example – Clicks

Сохраняем

Таким образом мы передаём событие в Google Аналитику

Настройка тега GTM для Яндекс Метрики

В Яндекс Метрике переходим в Настройки – Цели

Добавляем цель с названием Отправка формы – пример типа JavaScript-событие с идентификатором feedback-example

После этого она появится в списке целей

Возвращаемся в ГТМ в раздел Теги и создаём тег типа Пользовательский HTML, назовём его Feedback Example – YM, вставляем в него код

<script>
  yaCounterXXXXXXXX.reachGoal('feedback-example');
</script>

и привязываем к нему триггер Feedback Example – Clicks

XXXXXXXX – это id счётчика Яндекс Метрики

Сохраняем и опубликовываем

Проверка

Заполняем обязательные поля формы (Имя, E-Mail и Телефон) и нажимаем кнопку Отправить.

Проверяем

В Яндекс Метрике: Отчёты – Стандартные отчёты – Конверсии

Выбираем созданную цель и видим как появляются данные

В Google Аналитике: Поведение — События — Лучшие события или Поведение — События — Обзор

Если в GA тоже нужна цель, то заходим в Администрирование – Цели – Добавить

Указываем:

  • Категория: FeedbackExample
  • Действие: ClickSend
  • Ярлык: SendOK

Сохраняем и проверяем как появляются данные.

Способ 2. Передача данных формы через AJAX с применением библиотеки jQuery

GTM засчитает и отправит событие только в том случае, когда при нажатии кнопки Отправить jQuery запустит событие ajaxSuccess

Для описания этого способа будем рассматривать callback-форму, скачанную с сайта postovoy.net. Она открывается в модальном окне (popup) и такой тип формы встречается довольно часто.

Триггеры – Создать

Задаём имя триггера, например Feedback Example 2 – DOM Ready. В Настройках триггера выбираем тип Модель DOM готова из раздела Просмотр страницы.

В Условиях активации выбираем Все события “Модель DOM готова” и сохраняем

Далее переходим в раздел Теги и создаём тег, задаём имя, например Feedback Example 2 – Script – Tag, выбираем тип Пользовательский HTML, вставляем код:

<script>
$(document).ajaxSuccess(function(event, request, settings) {
dataLayer.push({
'event': 'ajaxSuccess',
'ajaxSuccessData': {
'url': settings.url || '',
'data': settings.data || '',
'responseText': request.responseText || ''
}
});
});
</script>

и привязываем к нему Триггер активации Feedback Example 2 – DOM Ready

Сохраняем

После этого в ГТМ включаем режим Debug, нажав на кнопку Предварительный просмотр

появится вот такой блок

Далее переходим к самой форме, обновляем страницу (обязательно!), заполняем имя и телефон и нажимаем Тест формы !

В окне отладчика во вкладке Data Layer видим необходимые для нас данные

Возвращаемся в ГТМ, выходим из предварительного просмотра.

Переходим в Переменные и в пункте Пользовательские переменные создаём 2 переменные уровня данных.

Первая.

Название: AJAX Success Data – Response Text, тип: Переменная уровня данных, имя переменной уровня данных: ajaxSuccessData.responseText, версия уровня данных: 2.

Сохраняем.

Вторая.

Название: AJAX Success Data – URL, тип: Переменная уровня данных, имя переменной уровня данных: ajaxSuccessData.url, версия уровня данных: 2.

Сохраняем.

Снова переходим в Триггеры, и создаём триггер с названием AJAX Success типа Пользовательское событие, имя события: ajaxSuccess, условия активации: Некоторые специальные события, активировать при выполнении условий:

AJAX Success Data – Response Textсодержит“ok”:1
AJAX Success Data – URLсодержитfeedback/

Сохраняем.

Данные “ok”:1 и feedback/ – это ответ скрипта, который содержится в отладчике на вкладке Data Layer (строчки 24 и 21)

Переходим в Теги, создаём тег для Google Analytics.

  • Название: Feedback Example 2 – GA
  • тип тега: Google Аналитика – Universal Analytics
  • Категория: Feedback Example 2
  • Действие: Click 2
  • Ярлык: Send OK 2
  • Настройки Google Analytics: {{Google Analytics}}
  • Ставим галочку Включить переопределение настроек в этом теге
  • Идентификатор отслеживания: UA-XXXXXXXXX-1 (это id счётчика Google Analytics)

и привязываем к нему Триггер активации: AJAX Success

Сохраняем.

Таким образом мы передаём событие в Google Аналитику

В Яндекс Метрике переходим в Настройки – Цели

Добавляем цель с названием Отправка формы – Обратный звонок типа JavaScript-событие с идентификатором callback-example

После этого она появится в списке целей.

Возвращаемся в ГТМ в раздел Теги и создаём тег типа Пользовательский HTML, назовём его Feedback Example 2 – YM, вставляем в него код

<script>
  yaCounterXXXXXXXX.reachGoal('callback-example');
</script>

и привязываем к нему триггер AJAX Success

XXXXXXXX – это id счётчика Яндекс Метрики

Сохраняем и опубликовываем.

Проверяем

В Яндекс Метрике: Отчёты – Стандартные отчёты – Конверсии

Выбираем созданную цель и видим как появляются данные

В Google Аналитике: Поведение — События — Лучшие события или Поведение — События — Обзор

Если в GA тоже нужна цель, то заходим в Администрирование – Цели – Добавить

Указываем:

  • Категория: Feedback Example 2
  • Действие: Click Send 2
  • Ярлык: Send OK 2

Сохраняем и проверяем как появляются данные.

Поделиться ссылкой: