9 способов отслеживания отправки форм с помощью GTM

22 апреля, 2021

Подробное руководство по отслеживанию отправки форм 9 различными способами с помощью Google Tag Manager.

Данный материал - отрывок из электронного руководства по Google Tag Manager (2020).

Примечание:

в октябре 2020 года (после выхода книги) Google Tag Manager изменил режим предварительного просмотра;
в 2021 году в диспетчере тегов Google переименовали некоторые триггеры: Пользовательское событие на Специальное событие, а Доступность элемента на Видимость элемента.

Второй по значимости настройкой после кликов по кнопкам (а может быть и первой) у интернет-маркетологов является отслеживание различных форм на сайте. Обращение, заполненное и отправленное с контактной информацией пользователя, как правило, говорит об интересе к вашему товару или услуге, что, в свою очередь, может в дальнейшем привести к реальным продажам. Поэтому крайне важно правильно настроить сбор и передачу данных об этом событии в инструменты веб-аналитики.

В этой публикации рассмотрим девять способов отслеживания отправки форм с помощью Google Tag Manager и отправки данных в Universal Analytics, а именно:

с помощью отдельной страницы;
с помощью триггера Отправка формы;
с помощью триггера Доступность элемента (Видимость элемента);
с помощью триггера Пользовательское событие (Специальное событие) и уровня данных (dataLayer);
с помощью прослушивателя автоматических событий;
с помощью универсального кода для форм на AJAX;
с помощью DOM Scraping;
с помощью виртуальных страниц;
брошенные формы.

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

На моем YouTube-канале есть отдельная лекция, посвященная отслеживанию отправки форм веси перечисленными способами. Рекомендую к просмотру:

Разберем каждый способ подробнее.

Способ №1. Отслеживание отправки формы с помощью отдельной страницы

Суть этого способа заключается в том, что после отправки формы пользователя перенаправляет на отдельную страницу с уникальным URL-адресом. Еще ее называют страницей Спасибо.

Отслеживание формы с помощью отдельной страницы

В этом случае нет необходимости использовать переменные, триггеры и теги Google Tag Manager. Достаточно просто в Яндек.Метрике и Universal Analytics настроить цель на посещение этой страницы:

Настройка цели на посещение страницы

Но если вы все же захотите настроить отслеживание как событие через GTM, то можете воспользоваться триггером Просмотр страницы с условием активации на конкретной странице (странице Спасибо):

Триггер "Просмотр страницы"

В моем примере – это Page Path содержит thank-you, поскольку URL-страницы имеет адрес /thank-you.html. А тег, который используется для передачи данных в Universal Analytics, имеет вид:

Настройка тега

Через некоторое время все данные по событиям появятся в Google Analytics отчете Поведение — События — Лучшие события. Если вы планируете отслеживать отправку формы не только как события, но и как цель-события (конверсии), настройте цель с типом Событие:

Настройка цели-события в Universal Analytics

Данный способ является наиболее простым в отслеживании.

Способ №2. Отслеживание отправки формы с помощью триггера Отправка формы

Если на вашем сайте есть форма с тегом <form> и кнопкой, которые имеют синтаксис:

<form action="URL">
...
<input type="submit">
</form>

...

</form>

Тег <form>

вы можете попробовать использовать стандартный триггер Отправка формы. Но перед тем, как это сделать, необходимо активировать встроенные переменные типа Формы, которые позволят вам настроить корректное условие активации:

Активация встроенных переменных

Затем создайте триггер типа Отправка формы. Для начала зададим условие активации на все формы и сохраним изменения.

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

Если событие Form Submit появилось в консоли предварительного просмотра, то вы можете использовать стандартный прослушиватель для своей формы. Воспользуйтесь значениями активированных переменных, чтобы узнать, есть ли у данной формы идентификатор (id) или класс (class), и активировать триггер только для конкретной формы, а не всех, которые есть на сайте. Для этого кликните на событие Form Submit и перейдите на вкладку Variables:

Идентификатор и класс формы

Как видим из рисунка выше, у данной формы есть и то, и то. Поэтому мы можем указать в качестве условия активации триггера Form Classes содержит st_contact_form_box или Form ID содержит email-form.

Например, если у вас на сайте есть несколько форм с одинаковыми значениями класса или идентификатора, вы можете добавить для триггера дополнительное условие, например, отслеживать отправку формы только на странице Контакты:

Настройки триггера "Отправка формы"

Сохраним настройки триггера. Чтобы передать информацию об успешной отправке формы в Google Analytics необходимо создать тег Google Аналитика – Universal Analytics с типом отслеживания Событие, задать соответствующие настройки Категории и Действия, и в качестве триггера активации выбрать созданный триггер типа Отправка формы. Например, так:

Настройка тега

Такой способ отслеживания подойдет не всем сайтам, поскольку Google Tag Manager с помощью триггера Отправка формы определяет далеко не все отправки формы. Во многом это зависит от специфики проекта.

Иногда вы можете наблюдать следующее: в режиме предварительного просмотра GTM события Form Submit фиксируются, тег на отправку формы срабатывает, и данные в инструменты веб-аналитики передаются даже тогда, когда пользователь не заполнял форму. Или вы просто обновляете страницу и, когда страница загружается, видите событие gtm.formSubmit. Как правило, такие события возникают из-за установленного Facebook Pixel (пикселя Facebook). Подробнее об этом я писал в этом материале.

Способ №3. Отслеживание отправки формы с помощью триггера Доступность элемента (Видимость элемента)

С помощью триггера Доступность элемента вы можете отслеживать определенные элементы на странице, которые появляются в видимой области экрана браузера пользователя. Например, когда посетитель сайта просматривает страницу и доходит до определенного блока контента. В этот момент вы можете активировать триггер и передать информацию о совершенном событии в счетчики аналитики.

Тот же самый метод может быть применен и к формам, когда после успешной отправки обращения появляется некоторое сообщение, например, «Спасибо! Данные успешно отправлены»:

Пример формы

Чтобы настроить отслеживание отправки с помощью данного способа, для начала требуется проверить, а появляется ли такое сообщение после успешной отправки формы. Для этого необходимо создать тестовое обращение.

Как только вы убедились в этом, не закрывая окна, проинспектируйте элемент, чтобы узнать его CSS-селектор. Для этого наведите курсор мыши на текст сообщения и нажмите правой кнопкой – Просмотреть код:

Определение селектора элемента

После этого откроется консоль разработчика на вкладке Elements (браузер Google Chrome) с подсвеченным элементом. Из рисунка выше видно, что у данного элемента есть класс js-successbox t-form__successbox t-text t-text_md, который мы можем применить при настройке триггера в Google Tag Manager.

Примечание: элемент может иметь/не иметь идентификатор (#id) или класс (.class). В этом случае вы можете привязаться к его CSS-селектору. Подробно о селекторах было разобрано в соответствующей главе.

Вернемся в Google Tag Manager и создайте триггер типа Доступность элемента. В качестве метода выбора будем использовать Селектор CSS, поскольку у данного элемента нет идентификатора. Как вы уже знаете, в CSS перед каждым классом ставится точка (.), а пробелы между несколькими классами также заменяются на точки.

Первая настройка для моего примера будет выглядеть так:

Настройка триггера "Доступность элемента"

Правило запуска этого триггера оставим без изменений - Один раз на страницу. Настройку Минимальный процент видимости также не будем менять – 50%. Главное – это не забыть поставить галочку напротив Регистрация изменений DOM, поскольку изначально данного элемента нет в структуре DOM-дерева, и сообщение об успешной отправки формы появляется на экране только после ее отправки.

Настройки триггера "Доступность элемента"

Сохраним настройки триггера. Чтобы проверить срабатывание события после отправки формы воспользуемся режимом отладки GTM и повторно создайте тестовое обращение.

Событие Element Visibility

Видим, что событие Element Visibility (gtm.elementVisibility) сработало после успешной отправки формы. Теперь вы можете использовать этот триггер в различных тегах для передачи информации в инструменты веб-аналитики (Яндекс.Метрику, Google Analytics, Facebook Pixel и др.). Например, как событие в Universal Analytics:

Настройка тега

Способ №4. Отслеживание отправки формы с помощью триггера Пользовательское событие (Специальное событие) и уровня данных

Данный способ отслеживания отправки формы является не самым простым и требует от интернет-маркетолога коммуникации с разработчиком, поскольку для его реализации необходимо внедрение дополнительного кода на сайт.

Если стандартный триггер Отправка формы может не работать с вашей формой, то отслеживание отправки формы с помощью триггера Пользовательское событие и уровня данных 100% вызовет нужное событие (при условии, что настройка верна!). Вы можете попросить разработчика внедрить конструкцию dataLayer.push () в функцию обратного вызова, которая вызывается при успешной отправке формы.

Пример кода, который вы можете отправить программисту, выглядит так:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
'event': 'formSuccess',
'formName': 'Название формы',
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push ({

'event': 'formSuccess',

'formName': 'Название формы',

});

, где после event может и вовсе не быть дополнительных переменных. В моем примере есть formName, в которую вы можете попросить разработчика добавить название формы, при условии, что на сайте их несколько, и они имеют разное назначение.

Таким образом, используя переменную уровня данных, вы сможете передавать информацию в аналитику не только об успешной отправке формы, но и ее название, чтобы всегда знать, какую конкретно форму на сайте отправил пользователь, а также ряд других дополнительных параметров. Потом статистику по каждой заполненной форме можно будет сравнить между собой в отчетах Google Analytics и Яндекс.Метрики. Кроме formName можно передавать и другие данные.

Здесь уже зависит от вашего желания и конкретной задачи. Например, на моем сайте (osipenkov.ru) есть 5 различных форм:

бесплатный анализ проекта;
запись на вебинар;
скачать бесплатные книги;
подписка на рассылку новостей;
связаться по форме «Контакты»;

Я могу использовать дополнительную переменную для передачи этой информации в уровне данных. У вас этого может не быть. Перед постановкой задания разработчику вам нужно выписать на листке бумаге все возможные варианты параметры передачи данных, которые вы хотите, чтобы отправлялись в dataLayer при успешной отправке формы. Я в примере привел минимальный фрагмент кода, который удовлетворяет условию отслеживания с помощью триггера Пользовательское событие и уровня данных. Можно использовать и более упрощенную конструкцию, без formName:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({'event': 'formSuccess'});

1 2	window.dataLayer = window.dataLayer \|\| []; window.dataLayer.push ({'event': 'formSuccess'});

Последовательность отслеживания следующая:

определяетесь с именем события, которое в дальнейшем вы будете использовать в триггере GTM типа Пользовательское событие (в примере выше – это formSuccess);
определяетесь с количеством дополнительных данных/переменных, которые вы хотите передавать в dataLayer;
записываете итоговый код для разработчика (за аналог берете код в примере выше);
отправляете разработчику текст такого вида: просьба внедрить конструкцию dataLayer.push () в функцию обратного вызова (код прилагаю к ТЗ), которая вызывается при успешной отправке формы со следующими данными (ниже перечисляете все параметры, которые необходимо передать вместе с формой, чтобы программист вас понял);

Ожидайте, пока разработчик выполнит ваше ТЗ и добавит код на все отслеживаемые формы. На это требуется время. После внедрения вы должны протестировать сформированный уровень данных. Для этого в Google Tag Manager также воспользуйтесь режимом предварительного просмотра., перейдите на сайт и отправьте тестовую форму. В результате одним из событий должно идти с вашим названием:

Событие formSuccess

Посмотрите на вкладке Data Layer вашего события все ли данные правильно переданы в уровень данных:

Уровень данных события

Проверить следует также и не успешную отправку формы. В этом случае оставьте некоторые поля формы пустыми и попробуйте оправить форму вновь. Если вы и в этом случае увидите событие, то попросите разработчика внести изменения. Вполне вероятно, что он сформировал уровень данных на клик по кнопке или же не учел валидацию формы.

Теперь в Google Tag Manager создайте триггер типа Пользовательское событие с именем, которое вы назначили. В моем примере это formSuccess:

Триггер типа "Пользовательское событие (Специальное событие"

Поскольку в нашем примере в уровне данных еще есть дополнительные переменные, которые мы передаем (речь о formName), то можно создать пользовательскую переменную типа Переменная уровня данных для извлечения значения из нее:

Переменная уровня данных

Сохраните настройки. На заключительном шаге создайте тег Google Аналитика – Universal Analytics с типом отслеживания Событие с соответствующими настройками для передачи информации об успешной отправки формы в Google Analytics. Пример:

Настройка тега

В Категории передайте произвольное название, в Действии я укажите пользовательскую переменную DLV – formName, которая передает название формы, а в Ярлыке события можно передать URL-адрес страницы, на которой произошло событие отправки формы. Конфигурация тега может быть иной. Главное, чтобы при отслеживании отправки формы с помощью уровня данных и пользовательского события наш триггер был добавлен в качестве условия активации тега, то есть триггер активации – Пользовательское событие, которое было создано на предыдущем шаге.

Способ №5. Отслеживание отправки формы с помощью прослушивателя автоматических событий

Прослушивание автоматических событий — это очень полезная функция в JavaScript, которая позволяет отслеживать определенные взаимодействия пользователя на страницах сайта. При срабатывании запускается событие, которому назначается обработчик (функция, которая отвечает за реакцию на действие пользователя), а само событие помещается в уровень данных (dataLayer). Это событие в дальнейшем можно использовать в качестве триггера активации в Google Tag Manager. Кроме этого, в момент срабатывания события, уровень данных может содержать дополнительную информацию о самом объекте. Помните предыдущий пример, где в dataLayer вместе с отправкой формы передавалась информация по и названию формы?

По умолчанию диспетчер тегов Google предоставляет встроенный прослушиватель (триггер Отправка формы). Но в большинстве настроек он не подходит или не может быть использован. Тогда на помощь приходит прослушиватель автоматических событий. Их еще называют прослушивателями пользовательских событий.

Если вы используете готовый CMS-движок (OpenCart, WordPress, 1С-Битрикс), то, как правило, для них существует ряд готовых решений (модулей, плагинов), которые вы можете приобрести или скачать бесплатно. Например, на своем сайте я использую плагин Contact Form 7.

Подробнее об отслеживании отправки форм с помощью прослушивателя автоматических событий я писал в отдельном материале как раз на примере Contact Form 7.

Способ №6. Отслеживание отправки формы с помощью универсального кода для форм на AJAX

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

Пример формы

AJAX (аббревиатура от Asynchronous JavaScript and XML) – это технология взаимодействия с сервером без перезагрузки страницы. Поскольку не требуется каждый раз обновлять страницу целиком, повышается скорость работы с сайтом и удобство его использования (см. приложение).

Компания Bounteous (ex LunaMetrics) в 2015 году опубликовала в своем блоге бесплатный прослушиватель AJAX событий для диспетчера тегов Google, который прекрасно работает и сейчас для большинства сайтов на этой технологии и который передает информацию на уровень данных.

Все, что требуется сделать, это скопировать код с их страницы и вставить его в тег типа Пользовательский HTML с условием активации триггера на всех страницах сайта (All Pages).

<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>

100

101

102

103

104

105

(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>

В Google Tag Manager это выглядит так:

Универсальный код для AJAX форм (Bounteous)

Сохраните изменения. Тег будет прослушивать все $.ajax запросы, включая $.post, $.getJSON, $.getScript и другие. Чтобы проверить корректность выполнения, в Google Tag Manager перейдите в режим предварительного просмотра и отправьте тестовую заявку.

Если в консоли появилось событие ajaxComplete, то значит форма использует AJAX. Если нет, значит этот код вам не подойдет, и вам необходимо использовать любой другой из представленных в этой главе способов отслеживания отправки формы.

Уровень данных события ajaxComplete

Выбрав событие ajaxComplete, перейдите на вкладку Data Layer. Здесь отображаются данные, которые были переданы на уровень данных после успешной отправки формы. Каждую строку в dataLayer можно использовать в качестве переменной уровня данных в GTM. Но перед этим следует определить, какая из представленной информации свидетельствует об успешной отправке формы. Чаще всего в этом коде используют значения из двух переменных:

statusText;
response.

К сожалению, в данном примере никакой информации в response нет, поэтому будем использовать значение success из переменной statusText. Но если бы она была, вы могли бы использовать сообщение, которое отобразилось в message в качестве триггера активации. Пример:

Текстовое сообщение в message

Возвращаемся к нашему примеру. Чтобы настроить триггер, нам сначала следует создать пользовательскую переменную типа Переменная уровня данных. Чтобы правильно написать имя переменной уровня данных, перейдите в консоль разработчика браузера на вкладку Console, введите команду dataLayer и нажмите Enter. Сделать это нужно сразу после отправки тестовой заявки, пока уровень данных заполнен событиями.

Команда dataLayer в консоли разработчика

Ниже вы увидите перечень событий в хронологическом порядке, точно такой же, какой представлен в режиме отладки GTM. Найдите событие ajaxComplete и раскройте его на всех уровнях с помощью стрелочки:

Копирование пути к переменной

Найдите ту переменную, которую хотите использовать в качестве переменной уровня данных. Как я написал ранее, я буду использовать statusText со значением success. Нажмите на переменную правой кнопкой мыши и выберите пункт меню Copy property path. Вставьте полученное значение в переменную GTM и удалите все лишнее перед словом attributes, чтобы получилось так:

Переменная уровня данных

Каждый уровень пути должен быть разделен точкой (точечная нотация). Если вы будете использовать message, то имя переменной уровня данных в диспетчере тегов будет attributes.response.message, поскольку message находится внутри response, а response внутри attributes.

После этого создайте триггер типа Пользовательское событие с такими настройками:

Имя события – ajaxComplete;
Условие активации триггера – statusText содержит success.

Триггер "Пользовательское событие" с условием активации

Триггер будет срабатывать в случае, если в отправленной форме переменная уровня данных примет значение, содержащее success. Для переменной attributes.response.message триггер тот же самый, только условие активации будет примерно следующим:

Пример триггера с attributes.response.message

Условие содержит будет для каждого свое, в зависимости от того текста, который отображается на вашем сайте после успешной отправки формы и определяется данным прослушивателем в переменной message.

Сохраните триггер. Добавьте тег Google Аналитика – Universal Analytics с типом отслеживания – Событие, в котором задайте собственные настройки и используйте триггер активации ajaxComplete, созданный на предыдущем шаге:

Настройка тега

Поскольку мы настроили отслеживание отправки форм как событие, то через некоторое время все данные по событиям появятся в отчете Поведение — События — Лучшие события.

Способ №7. Отслеживание отправки формы с помощью DOM Scraping

Технология получения веб-данных путем извлечения их со страниц сайтов по-английски называется DOM Scraping (Web scraping). Этим мы и будем заниматься.

В таком способе извлечения данных со страницы сайт есть один существенный недостаток - все, что вы будете делать, завязано на объектной модели документа (DOM). И при изменении каких-либо классов, идентификаторов отслеживаемых элементов на сайте есть вероятность потерять текущие настройки. Именно поэтому лучше выполнять отслеживание отправки формы или любых других нестандартных событий на сайте с помощью функций и привлечения разработчика, а не извлекая данные с помощью DOM-скрапинга.

Но такой метод отслеживания тоже существует и давайте разберем его. Например, на сайте после отправки заявки страница перезагрузилась, отображаемый контент поменялся, но URL-страницы не изменился, то есть произошло перенаправление на ту же самую страницу. Такое бывает, но встречается на практике реже (обычно наоборот – страница не перезагружается, а URL меняется). В этом случае нам как раз поможет встроенная переменная Элемент DOM.

Для демонстрации такого способа отслеживания я создал форму с двумя полями: Имя и E-mail.

Пример формы

После заполнения полей пользователь нажимает кнопку Подписаться, происходит перезагрузка страницы, URL-адрес остается прежним, а контент изменяется и появляется сообщение об успешной подписке:

URL не изменился, а содержимое поменялось

Для отслеживания отправки такой формы вы можете использовать пользовательскую переменную типа Элемент DOM и извлечь значение элемента с текстом Спасибо за вашу подписку…

Чтобы настроить переменную, необходимо сначала проинспектировать данный элемент и узнать его селектор. Откройте консоль разработчика, в которой будет отображен наш подсвеченный элемент в структуре DOM-дерева, нажмите на него правой кнопке и выберите Copy – Copy selector:

Копирование селектора

В Google Tag Manager создайте пользовательскую переменную типа Элемент DOM, в которой будут следующие настройки:

Метод выбора – Селектор CSS;
Селектор элементов – скопированный селектор.

Переменная "Элемент DOM"

Отправив тестовое обращение, поверьте корректность извлечения данных с помощью режима предварительного просмотра. Если вы указали верный селектор CSS и выбрали событие Container Loaded, то напротив имени вашей переменной отобразится текст сообщения:

Проверка в режиме предварительного просмотра

Теперь нам нужно создать триггер, который зависит от нашей новой переменной DOM. Я буду использовать тип триггера Просмотр страницы с условием срабатывания Некоторые просмотры страниц – переменная Элемент DOM – содержит – Спасибо за вашу подписку.

Триггер типа "Просмотр страницы"

Таким образом, триггер будет срабатывать только на тех страницах, на которых посетителям отображается сообщение об успешной подписке. Остается только создать тег Google Аналитика – Universal Analytics с типом отслеживания Событие, а в качестве триггера активации задать Просмотр страницы.

Настройка тега

Если вы все сделали правильно, то после отправки формы в режиме отладки должен активироваться тег:

Активация тега

А поскольку тег имеет тип отслеживание Событие, то данные в Google Analytics будут отображаться в отчете Поведение - События - Лучшие события.

Способ №8. Отслеживание отправки формы с помощью виртуальных страниц

По умолчанию, просмотр страницы в инструменты веб-аналитики отправляется каждый раз, когда вы:

обновляете веб-страницу (на которой установлен счетчик веб-аналитики);
переходите на новую страницу (на которой установлен счетчик веб-аналитики).

И в одном и другом случае у страницы есть URL-адрес, который вы видите в адресной строке браузера. Однако, когда дело доходит до одностраничных веб-сайтов (Single Page Application, SPA), такое отслеживание перестает работать.

Одностраничное приложение Single Page Application (SPA) - веб-сайт или веб-приложение, в котором все данные, необходимые для переходов между разделами сайта, загружаются вместе с первой страницей, а весь контент загружается динамически, без обновления страницы и/или без перехода на другую веб-страницу, следовательно, просмотра страницы не происходит, и данные в инструменты веб-аналитики не отправляются.

Как правило, при таком отслеживании используется все та же технология AJAX. Наиболее распространенным примером SPA являются сайты на конструкторе Tilda. Тильда передает данные в системы веб-аналитики на основе просмотра страниц. Когда пользователь совершает какое-либо действие на странице, создается виртуальная страница. Подробнее о том, как работают виртуальные страницы, читайте в этой статье.

Мы же разберем практический пример отслеживания отправки формы с помощью данной технологии для сайта на конструкторе Tilda. Есть сайт, на котором добавлено n-ое количество форм, в том числе и на первом экране:

Пример формы (сайт на Тильде)

Существует два подхода к анализу статистики:

через создание целей и фиксирование событий;
через просмотр страниц.

Когда пользователь совершает какое-либо действие на странице: открывает попап, нажимает на кнопку или заполняет форму, создается виртуальная страница. Данные о том, сколько человек «посетили» эту виртуальную страницу (другими словами, открыли попап или нажали на кнопку) всегда доступны в системах аналитики без дополнительных настроек.

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

Данные о том, что пользователь заполнил форму и отправил информацию, поступают в системы аналитики автоматически. Адрес виртуальной страницы можно посмотреть в настройках блока: попапа, блока с кнопкой или формой. Пример того, как выглядит адреса виртуальных страниц:

tilda/popup/rec31654896/opened — для попапа;
tilda/click/rec31742916/button1— для клика на кнопку;
tilda/form31751802/submitted — для заполнения формы.

Адрес виртуальной страницы отображается в настройках блока

Об этом подробно написано в справочном центре сервиса.

Если вы устанавливаете идентификаторы отслеживания Google Analytics и Яндекс.Метрики через интерфейс Тильды, то просмотры страниц создают автоматически при выполнении пользователями определенных событий. В случае установки кода Google Tag Manager необходимо произвести дополнительные настройки, поскольку в GTM виртуальные страницы по умолчанию не передаются. Вы можете воспользоваться этим руководством и настроить отслеживание отправки формы с помощью виртуальных страниц.

Сначала необходимо создать три пользовательских переменных с типом Переменная уровня данных. Их имена eventAction, referer и title соответственно.

Три переменных уровня данных

Переменная eventAction отвечает за адрес виртуальной страницы, а именно за формирование уникальной ссылки отправки формы. title – это заголовок формы, который предопределен в Тильде, а referer содержит URL исходной страницы, с которой был осуществлен переход на текущую страницу.

Затем создайте триггер с типом Пользовательское событие и именем pageView:

Триггер "Пользовательское событие"

На завершающем этапе добавьте тег Google Аналитика - Universal Analytics с типом отслеживания Просмотр страницы и следующими настройками:

Поля, которые необходимо задать, название поля:

page – {{eventAction}}
title – {{title}}
referrer – {{referer}}

Триггер активации – пользовательское событие pageView

Настройка тега

Сохраните изменения. Таким образом, когда пользователь отправит заявку на сайте, сработает событие pageView, а с помощью тега Google Analytics и поля page вы передадите в аналитику просмотр страницы с заголовком и реферера.

Если вы хотите передать такую же информацию в Яндекс.Метрику, то создайте тег типа Пользовательский HTML со следующим кодом:

Тег для Яндекс.Метрики

где XXXXXXXX – идентификатор счетчика Яндекс.Метрики. а конструкция {{ }} ссылается на три наших переменных уровня данных, которые были созданы на шаге ранее.

Подробнее об отправке данных о просмотре страницы в Яндекс.Метрику и методе hit читайте в официальной документации Яндекса (см. приложение).

Выполнить проверку настройки можно с помощью режима отладки Google Tag Manager и отправки тестового обращения. Если вы увидите событие pageView и активированный тег Google Analytics, это значит, что данные успешно отправлены в аналитику, а на вкладке Data Layer будет отображена информация по событию и трем нашим переменным:

Информация на уровне данных при отправке формы

О том, как настроить цели в Яндекс.Метрике и Google Analytics для сайтов на Tilda с помощью Google Tag Manager, смотрите в моем видео:

Способ №9. Отслеживание данных брошенных форм

Брошенная форма — это когда пользователь частично или полностью заполняет форму, но не отправляет ее нам по какой-либо причине: отвлекли, передумал, нечаянно закрыл вкладку браузера и не знает, как вернуться назад и т.д. С помощью Google Tag Manager вы можете отслеживать и такие формы.

Алгоритм отслеживания брошенных форм я подробно описал в отдельной статье.

Заключение

Основная проблема с отслеживанием форм в Google Tag Manager — отсутствие единого стандарта создания форм. Разработчик может сделать форму на HTML, а может в AJAX. В каких-то случаях будет достаточно встроенного триггера Отправка формы, а где-то поможет только уровень данных и пользовательское (специальное) событие.

Метки: AJAX, dataLayer, DOM Scraping, Google Analytics, Google Tag Manager, виртуальные страницы, Отправка формы

9 способов отслеживания отправки форм с помощью GTM

Получайте бесплатные уроки и фишки

Еще статьи