# 1. Отслеживание форм с помощью Google Tag Manager (со слушателем форм)
# 2. Отслеживание страницы «Спасибо» с помощью Диспетчера тегов Google
# 3. Отслеживание формы AJAX с помощью Диспетчера тегов Google
Если вы читаете эту часть, значит ваша форма, вероятно, не отправляет действительные формы отправки событий и не перенаправляет пользователей на страницу «спасибо за заказ». Вероятно, она просто обновляется, а затем отображает сообщение «Вы успешно заполнили форму» без фактического обновления страницы. Существует большая вероятность того, что эта форма использует AJAX. Я предлагаю пропустить все технические подробности в данном случае (так как я не являюсь разработчиком + я не думаю, что я способен четко объяснить, как это работает). Единственное, что вам нужно освоить — это прослушиватель AJAX.
Lunametrics поделились потрясающим прослушивателем AJAX для GTM, который каждый может использовать бесплатно. Более подробно о его работе вы можете узнать в блоге консалтингового агентства LunaMetrics. Здесь мы позаимствуем их код для отслеживания форм. Скопируйте приведенный ниже код и вставьте его в собственный HTML-тег в GTM:
<script id="gtm-jq-ajax-listen" type="text/javascript">
(function() {
'use strict';
var $;
var n = 0;
init();
function init(n) {
// Ensure jQuery is available before anything
if (typeof jQuery !== 'undefined') {
// Define our $ shortcut locally
$ = jQuery;
bindToAjax();
// Check for up to 10 seconds
} else if (n < 20) {
n++;
setTimeout(init, 500);
}
}
function bindToAjax() {
$(document).bind('ajaxComplete', function(evt, jqXhr, opts) {
// Create a fake a element for magically simple URL parsing
var fullUrl = document.createElement('a');
fullUrl.href = opts.url;
// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
// Manually remove the leading question mark, if there is one
var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
// Turn our params and headers into objects for easier reference
var queryParameters = objMap(queryString, '&', '=', true);
var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');
// Blindly push to the dataLayer because this fires within GTM
dataLayer.push({
'event': 'ajaxComplete',
'attributes': {
// Return empty strings to prevent accidental inheritance of old data
'type': opts.type || '',
'url': fullUrl.href || '',
'queryParameters': queryParameters,
'pathname': pathname || '',
'hostname': fullUrl.hostname || '',
'protocol': fullUrl.protocol || '',
'fragment': fullUrl.hash || '',
'statusCode': jqXhr.status || '',
'statusText': jqXhr.statusText || '',
'headers': headers,
'timestamp': evt.timeStamp || '',
'contentType': opts.contentType || '',
// Defer to jQuery's handling of the response
'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
}
});
});
}
function objMap(data, delim, spl, decode) {
var obj = {};
// If one of our parameters is missing, return an empty object
if (!data || !delim || !spl) {
return {};
}
var arr = data.split(delim);
var i;
if (arr) {
for (i = 0; i < arr.length; i++) {
// If the decode flag is present, URL decode the set
var item = decode ? decodeURIComponent(arr[i]) : arr[i];
var pair = item.split(spl);
var key = trim_(pair[0]);
var value = trim_(pair[1]);
if (key && value) {
obj[key] = value;
}
}
}
return obj;
}
// Basic .trim() polyfill
function trim_(str) {
if (str) {
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
}
})();
/*
* v0.1.0
* Created by the Google Analytics consultants at http://www.lunametrics.com
* Written by @notdanwilkerson
* Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
* Licensed under the Creative Commons 4.0 Attribution Public License
*/
</script>
Установите этот HTML-тег для запуска на всех страницах. Теперь давайте проверим, создана ли форма с помощью AJAX:
1. Включить (или обновить) режим предварительного просмотра и отладки.
2. Обновите веб-страницу с помощью формы.
3. Попробуйте отправить форму (без ошибок).
4. Появилось ли событие ajaxComplete в консоли предварительного просмотра и отладки?
- Если да, форма использует AJAX.
- Если нет, перейдите к следующему разделу статьи.
Если ваш ответ на предыдущие вопросы был «Да», давайте посмотрим, что мы можем сделать с этой формой AJAX. Кликните по событию ajaxComplete в режиме предварительного просмотра и отладки, затем кликните по Data Layer:
Выглядит сложно, если ты не разработчик, верно?
Но это проще, чем вы думаете. Это данные, которые были переданы на уровень данных после успешной подачи формы, каждая строка представляет собой отдельную точку данных DataLayer, которая может использоваться как переменная DataLayer в GTM. Вы должны найти что-то, что поможет идентифицировать успешную подачу формы. Прокрутите вниз и ищите response.
Давайте рассмотрим это более подробно. Вы видите сообщение «Данное сообщение было успешно отправлено»? Ура! Мы можем использовать его в качестве триггера.
Давайте создадим переменную уровня данных в Диспетчере тегов Google.
1. Перейдите к переменным.
2. Прокрутите вниз и найдите переменную User-Defined и нажмите «Создать».
3. Нажмите «Конфигурация переменных» и выберите тип переменной — «Переменная слоя данных».
4. Введите имя переменной слоя данных — attributes.response. Оставьте все остальные настройки такими, какие они есть.
5. Моей рекомендацией для заголовка этой переменной GTM является dlv — attributes.response («dlv» означает переменную слоя данных).
Вероятно, вы догадываетесь, почему я ввел attributes.response как имя переменной в массиве слоя данных вместо обычного response. Давайте подробнее рассмотрим Data Layer в режиме предварительного просмотра и отладки. В строке 2 вы видите имя события ajaxComplete — это то же имя, которое отображается в левой части панели «Просмотр» и «Отладка».
Затем мы видим атрибуты, которые являются объектами, содержащими различные точки данных (пары ключ-значение). И response является одним из этих ключей.
Поэтому, когда мы хотим сообщить диспетчеру тегов Google, что нас интересует ценность response, нам нужно указать точный путь к этим данным. В нашем случае это атрибуты → response. Каждый уровень пути должен быть разделен точкой → attributes.response.
Другой пример: предположим, что вас интересуют данные сервера (от этого очень точного AJAX response). В этом случае имя переменной слоя данных должно быть attribute.headers.Server.
После того, как мы создали переменную DataLayer атрибута.response в Диспетчере тегов Google, начнем отладку. Обновите предварительный просмотр и режим отладки, обновите страницу, где находится форма AJAX. Для образовательных/тестовых целей я использую формы с этого сайта (используйте пример 1). Вы также можете попробовать их самостоятельно.
Заполните форму и нажмите кнопку «отправить». Выберите самое последнее событие ajaxComplete в консоли предварительного просмотра и отладки, затем перейдите на вкладку «Переменные» и найдите новую переменную dlv — attributes.response. Если вы всё сделали правильно, это должно выглядеть так:
Это сообщение успешно отправленной формы. Если значение этой переменной не определено, вы должны выполнить поиск ошибок. Наиболее распространенными являются опечатки в имени переменной или неточно определенная переменная. Некоторые пытаются использовать response вместо 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