Как настроить аналитику отслеживания форм с помощью Google Tag Manager и Google Analytics

Опубликовано: 2022-04-12

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

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

В этой статье мы расскажем вам, как разными способами собирать данные форм и передавать их в Google Analytics.

Способ 1. Отдельная страница благодарности
Способ 2. Триггер отправки формы в Диспетчере тегов Google
- Шаг 1. Активируйте переменные формы
- Шаг 2. Отрегулируйте спусковой крючок
- Шаг 3. Проверяем, работает ли триггер
- Шаг 4. Создайте тег
- Шаг 5. Настройте цель в Google Analytics
Способ 3. Триггер доступности элемента в Google Tag Manager
Способ 4. Отслеживание форм, использующих AJAX
- Шаг 1. Создайте тег, чтобы проверить, как работает ваша форма
- Шаг 2. Создайте переменную уровня данных
- Шаг 3. Создайте триггер
Способ 5. События DataLayer как триггер
Сколько времени пользователи тратят на заполнение ваших форм

Способ 1. Отдельная страница благодарности

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

Допустим, вы хотите отслеживать регистрации на вебинар. Страница благодарности после успешной регистрации выглядит так: https://www.site.com/registration/thankyou

На панели администратора в разделе « Настройки просмотра » в разделе «Цели» нажмите « Цель», затем нажмите « Пользовательский » . Укажите имя цели, выберите тип цели и введите адрес страницы благодарности:

Что важно учитывать: URL-адрес вашей страницы благодарности должен быть уникальным — то есть на сайте должна быть только одна страница с таким адресом, и пользователи не должны иметь возможности попасть на эту страницу, не заполнив форму. В противном случае Google Analytics может зафиксировать недостоверные данные о достижении вашей цели.

бонус для читателей

Лучшие маркетинговые кейсы OWOX BI

Скачать сейчас

Способ 2. Триггер отправки формы в Диспетчере тегов Google

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

При использовании этого метода, когда пользователь заполняет и отправляет форму, триггер отправляет событие gtm.formSubmit в массив dataLayer.

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

Шаг 1. Активируйте переменные формы

Для этого откройте меню « Переменные » в GTM, нажмите « Настроить » и выберите все переменные в разделе «Формы»:

Шаг 2. Отрегулируйте спусковой крючок

Для создания триггера вам нужен идентификатор формы или атрибут класса формы. Вы можете увидеть их в HTML-коде, щелкнув правой кнопкой мыши форму и выбрав «Исследовать элемент» в Firefox или «Просмотреть код» в Chrome:

В нашем примере идентификатор формы — send-request-form, который мы будем использовать при настройке триггера.

Перейдите в меню « Триггеры », нажмите « Создать », откройте « Настройки триггера » и выберите « Отправить форму »:

Выбор типа триггера в Диспетчере тегов Google

В открывшемся окне вы увидите два флажка:

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

После активации проверки ошибок появляются дополнительные настройки. Если вы включаете триггер, укажите URL-адрес страницы, содержащей вашу форму. И если вы активируете триггер, укажите ID формы, о котором мы говорили выше:

Придумайте удобное и понятное название для триггера, например «Отправить запрос», и сохраните его.

Шаг 3. Проверяем, работает ли триггер

Прежде чем публиковать изменения в контейнере, используйте режим предварительного просмотра в Диспетчере тегов Google. Откройте страницу с формой, заполните ее и нажмите «Отправить». В консоли отладки должно появиться событие gtm.formSubmit.

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

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

Шаг 4. Создайте тег

Теперь вам нужно создать тег, который будет отправлять в Google Analytics информацию о том, что форма была отправлена. Для этого перейдите в меню « Теги », нажмите « Создать», откройте « Конфигурация тегов » и выберите « Google Analytics — Universal Analytics».

Для наглядности тег можно назвать так же, как и триггер. Далее заполните следующие поля:

Тип тега — выберите {{Настройки Google Analytics}}.
Тип трека — выберите «Событие».
Категория — такая же, как тег и триггер для удобства.
Действие – Отправка
Ярлык — например, {{Идентификатор формы}})
Невзаимодействие — оставьте «False»

Если вы хотите активировать тег, выберите триггер, созданный на шаге 3, и нажмите « Сохранить »:

Форма конфигурации тега в Диспетчере тегов Google

Готово! Вы можете проверить, как работает сгенерированный тег, при отправке формы в режиме предварительного просмотра Диспетчера тегов Google или с помощью отчета о событиях в реальном времени в Google Analytics.

Шаг 5. Настройте цель в Google Analytics

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

панель администратора в Google Analytics

Сохраните цель. Готово. Вы настроили отслеживание форм без изменения кода на своем сайте!

Способ 3. Триггер доступности элемента в Google Tag Manager

Если после отправки формы на сайте всплывает окно с благодарностью или сообщением об успешной отправке, можно попробовать другой встроенный триггер GTM. Он срабатывает, когда на экране появляется определенный элемент (в нашем случае всплывающее окно) и отправляет событие gtm.elementVisibility в dataLayer.

Чтобы настроить этот триггер, вы должны знать селектор CSS отслеживаемого элемента. Чтобы найти этот селектор, щелкните окно правой кнопкой мыши и выберите « Просмотр кода» . Вы ищете следующую строку:

Чтобы скопировать селектор CSS, щелкните правой кнопкой мыши строку и выберите « Копировать» — «Копировать селектор»:

В нашем примере селектор выглядит так: #webinar_marketing_automation > div.

Затем создайте новый триггер, выбрав тип Element Visibility :

Заполните следующие поля:

Название триггера — например, «Получить запись вебинара».
Метод выбора — CSS-селектор
Селектор элементов — вставьте значение, которое вы скопировали из HTML-кода всплывающего окна.
Триггерное правило — если у вас есть одна форма на странице, оставьте вариант «Один раз на странице». Если есть несколько форм и появляется одно сообщение, вы можете выбрать «Один раз для каждого элемента».

Селектор элементов в меню Диспетчера тегов Google

Затем установите флажок «Зарегистрировать изменения DOM».
Условия активации триггера. Выбрав «Некоторые события видимости», вы можете указать страницу, на которой появляется всплывающее сообщение или текст.
Сохраните триггер.

дополнительные параметры в меню Диспетчера тегов Google

После создания триггера доступности элементов необходимо настроить те же параметры, которые подробно описаны в способе 2.

Добавьте новый тег в GTM, который будет отправлять данные отправки формы в Google Analytics, и прикрепите к нему созданный триггер.
Предварительный просмотр работы тега при отправке формы.
В Google Analytics установите цель события для отслеживания конверсий.

Способ 4. Отслеживание форм, использующих AJAX

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

    <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 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 on 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 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://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<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 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 on 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 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://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

Этот код проверяет, действительно ли ваша форма использует AJAX, а затем создает переменную и триггер в Диспетчере тегов Google.

Шаг 1. Создайте тег, чтобы проверить, как работает ваша форма

В Диспетчере тегов Google откройте «Теги » , нажмите « Создать » , нажмите «Конфигурация тега » и выберите «Пользовательский HTML » . Скопируйте код выше и вставьте его в текстовое поле. Укажите все страницы в качестве триггеров:

Затем включите предварительный просмотр GTM, откройте страницу формы, заполните форму и отправьте ее.

Уровень данных в Диспетчере тегов Google

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

Шаг 2. Создайте переменную уровня данных

Если вы щелкнете событие ajaxComplete в консоли предварительного просмотра, а затем откроете вкладку «Уровень данных», вы увидите, какая информация передается в массив уровня данных после отправки формы.

Нас интересует строка ответа в этом коде; он содержит текст о том, что форма была успешно отправлена:

Эту строку можно использовать для создания переменной и триггера в Диспетчере тегов Google. Откройте раздел «Переменные» в GTM, нажмите « Создать » и на экране «Конфигурация переменной» выберите «Переменная уровня данных». В поле Имя переменной уровня данных напишите attribute.response (две переменные можно назвать одним и тем же) и сохраните настройки.

Зачем вводить атрибуты . ответ вместо ответа ? Потому что атрибуты — это объект, который содержит ключ ответа и его значение. Тем самым мы указываем GTM точный путь к интересующим нас данным.

После создания переменной необходимо ее проверить. Для этого отправьте форму в режиме предварительного просмотра. Нажмите на событие ajaxComplete и откройте вкладку «Переменные» в Диспетчере тегов Google. Если вы видите переменную attribute.response и текст об успешной отправке формы, значит, вы все настроили правильно.

Шаг 3. Создайте триггер

В разделе «Конфигурация триггера» нажмите « Создать», затем « Конфигурация триггера » и выберите тип события «Пользователь ». Укажите ajaxComplete в поле «Имя события». Затем в качестве условия срабатывания триггера выберите Some Custom Events и пропишите условие: в переменной attribute.response содержится {введите свой пользовательский текст об успешной отправке формы}.

После этого остается:

Добавление нового тега отслеживания событий в GTM, который будет отправлять информацию об отправке формы в Google Analytics и прикреплять к ней созданный триггер.
Использование режима предварительного просмотра для проверки работы тега при отправке формы.
Настройка цели события для отслеживания конверсий в Google Analytics.

Мы подробно описали эти настройки выше в разделе Способ 2. Триггер отправки формы в Диспетчере тегов Google.

Способ 5. События DataLayer как триггер

Отслеживание форм методом dataLayer .push, на наш взгляд, является наиболее надежным и универсальным решением. Единственным недостатком является то, что если вы не понимаете код, вам понадобится помощь разработчиков.

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

dataLayer.push({
'событие': 'Формы',
«переменная»: «значение»
})

Где:

Событие — это название события. Вы можете заменить его на любое удобное для вас событие.
Переменная — это набор всех переменных, которые вы хотите передать вместе с событием.

После того, как ваши программисты настроят метод dataLayer.push для всех форм, вы можете проверить, как он работает. Для этого включите предварительный просмотр в Диспетчере тегов Google и заполните форму на своем сайте. В консоли отладки должно появиться новое событие (в нашем примере оно называется OWOX). При нажатии на событие и переходе на вкладку dataLayer вы увидите все параметры, которые передаются в массив данных:

На примере нашего события на скриншоте выше (загрузка PDF-файла из блога) рассмотрим, как настроить отслеживание с помощью GTM.

Сначала создайте все необходимые пользовательские переменные: eventCategory, eventAction, eventLabel и т. д. Затем выберите Тип переменной в разделе Пользовательские переменные и введите имя переменной в фигурных скобках: {{eventCategory}}:

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

Меню настройки триггера в Диспетчере тегов Google

Затем создайте тег, который будет перенаправлять события в Google Analytics. Установите тип тега Google Analytics — Universal Analytics, а тип отслеживания — Событие.

Далее заполните эти поля:

Категория – {{eventCategory}}
Действие – {{eventAction}}
Ярлык – {{eventLabel}}

Затем выберите переменную {{Настройки Google Analytics}} и триггер, созданный на предыдущем шаге:

Все готово. Остается только проверить, работает ли тег в режиме предварительного просмотра GTM и в отчетах Google Analytics в реальном времени.

Сколько времени пользователи тратят на заполнение ваших форм

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

Вашим разработчикам необходимо добавить в dataLayer имена и значения всех параметров, необходимых для аналитики формы. Это поможет вам отслеживать:

Время от открытия страницы до активации поля
Время от активации поля до деактивации поля
Время от активации первого поля до первой отправки формы
Время от активации первого поля до успешной отправки формы
Время от активации первого поля до неудачной отправки формы
Время получения ответа от сервера об успешной отправке формы
Время получения ответа от сервера о неудачной отправке формы
Время от активации формы до момента, когда пользователь покидает форму (без ее успешной отправки)

После того, как вы настроите сбор этих данных в Google Analytics, вы сможете импортировать эти данные в Google BigQuery — например, с помощью OWOX BI. Затем вы можете создавать аналитические отчеты любых форм в Google Sheets с помощью бесплатного дополнения OWOX BI BigQuery Reports.

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

Вот несколько примеров таких отчетов и вопросы, на которые они могут ответить:

1. При взаимодействии с какими полями формы пользователи чаще всего сталкиваются с ошибкой?

2. Сколько времени пользователи тратят на заполнение формы?

3. Сколько времени пользователи тратят на заполнение формы и от чего это зависит?

PS Если вам нужна помощь в настройке аналитики форм и создании собственной системы метрик для вашего бизнеса, напишите нам по адресу [email protected] или заполните контактную форму на сайте OWOX.