Советы
Как настроить аналитику форм с помощью Google Tag Manager и Google Analytics
Конверсия — одна из самых простых и при этом самых важных метрик эффективности маркетинга. Она показывает, сколько пользователей выполнили целевое действие: совершили покупку, подписались на рассылку, заказали обратный звонок и т.д. И если для учета и анализа продаж в Google Analytics есть электронная торговля, которую относительно просто настроить, то с отслеживанием заполненных форм на сайте приходится повозиться.
Все потому, что формы бывают различных типов и используют разные технологии для отправки данных на сервер. Одни формы после успешной отправки обновляются, другие показывают всплывающее окно, третьи перенаправляют пользователя на новую страницу с благодарностью за заказ и т.д. От того, какую технологию использовали для формы разработчики, зависит и способ ее отслеживания.
В этой статье мы расскажем, как разными способами собирать данные о заполнении форм и передавать их в Google Analytics.
Содержание
- Способ 1. Отдельная «Спасибо»-страница
- Способ 2. Триггер «Отправка формы» в Google Tag Manager
- Способ 3. Триггер «Доступность элемента» в Google Tag Manager
- Способ 4. Отслеживание форм, которые используют AJAX
- Способ 5. События dataLayer в качестве триггера
- Сколько времени тратят пользователи на заполнение ваших форм
Способ 1. Отдельная «Спасибо»-страница
Если после успешного заполнения формы пользователь попадает на отдельную страницу с другим URL-адресом, то отследить это будет проще всего. Вам достаточно создать в Google Analytics цель с типом «Целевая страница».
Допустим, вы хотите отслеживать регистрации на вебинар. Страница с благодарностью за успешную регистрацию выглядит так: https://www.site.ru/registration/thankyou.
На панели администратора в настройках представления откройте раздел «Цели», нажмите кнопку «+Цель» и выберите «Собственная». Укажите название цели, выберите тип «Целевая страница» и введите ее адрес:
Что важно учесть: URL вашей спасибо-страницы должен быть уникальным, то есть на сайте должна быть только одна страница с таким адресом, и у пользователей не должно быть возможностей попасть на эту страницу, минуя заполнение формы. Иначе ваш GA может фиксировать достижения целей, которых на самом деле не было.
Способ 2. Триггер «Отправка формы» в Google Tag Manager
Если ваши программисты корректно настроили передачу данных из формы с помощью кнопки submit, то для отслеживания таких событий вы можете использовать встроенный триггер GTM. Судя по комментариям в сети, такое встречается нечасто, но попробовать стоит — вдруг это как раз ваш случай.
Когда пользователь на сайте заполняет и отправляет форму, этот триггер передает в массив dataLayer событие gtm.formSubmit.
Примечание: прежде чем переходить к настройкам, убедитесь, что в вашем Google Tag Manager активирован тег «Просмотр страницы» для всех страниц сайта.
Шаг 1. Активируйте переменные форм
Для этого откройте меню «Переменные» в GTM, нажмите «Настроить» и включите все переменные в разделе «Формы»:
Шаг 2. Настройте триггер
Чтобы создать триггер, вам понадобится атрибут form id или form class. Посмотреть их можно в HTML-коде. Для этого кликните по вашей форме правой кнопкой мыши и нажмите «Исследовать элемент» в Mozilla Firefox или «Посмотреть код» в Chrome:
В нашем примере form id имеет значение send-request-form — его мы и будем использовать при настройке триггера.
Зайдите в меню «Триггеры», нажмите «Создать», откройте «Настройки триггера» и выберите тип «Отправка формы»:
В открывшемся окне вы увидите два чекбокса:
- «Ждать теги» — заполняется по желанию. Если включить эту опцию, то форма не будет отправляться, пока не активируются все связанные с ней теги или пока не закончится время, которое вы укажете.
- «Проверка ошибок» — эту опцию желательно включить, иначе триггер будет срабатывать даже в тех случаях, когда пользователь не заполнил обязательные поля.
После того, как вы активируете проверку ошибок, появятся дополнительные настройки. В условиях включения триггера укажите URL страницы, на которой размещена ваша форма, а в условиях активации триггера — идентификатор формы, о котором мы писали чуть выше:
Придумайте для триггера удобное и понятное название, например «Отправка заявки», и сохраните его.
Шаг 3. Проверьте работу триггера
Прежде, чем публиковать изменения в контейнере, включите режим предварительного просмотра в Google Tag Manager. Откройте страницу с формой, заполните ее и отправьте. В консоли отладки должно появиться событие gtm. formSubmit.
Если его там нет, значит, данный способ отслеживания форм вам не подходит — попробуйте другие способы, описанные в нашей статье.
Если событие появилось, нужно провести еще один тест. Откройте форму, оставьте какое-нибудь обязательное поле незаполненными и нажмите кнопку отправки. Если событие gtm.formSubmit снова появилось в консоли отладки, значит, встроенный триггер работает некорректно и вам не поможет. Если событие не передалось — то, что нужно! Переходите к следующим шагам.
Шаг 4. Создайте тег
Теперь нужно создать тег, который будет передавать в Google Analytics информацию о том, что форма отправлена. Для этого зайдите в меню «Теги», нажмите «Создать», откройте «Конфигурация тега» и выберите тип «Google Аналитика — Universal Analytics».
Чтобы не путаться, вы можете назвать тег так же, как и триггер. Далее заполните следующие поля:
- Тип отслеживания — выбираем «Событие».
- Категорию для удобства называем так же, как тег и триггер.
- Действие — «Отправка».
- Ярлык — допустим, {{Form ID}}.
- В поле «Не взаимодействие» оставляем «False».
- Выбираем {{Настройки Google Analytics}} в одноименном поле.
Условием для активации тега выберите триггер, который вы создали ранее в Шаге 3, и нажмите «Сохранить»:
Готово! Проверить, как работает созданный тег при отправке формы, вы можете с помощью все того же режима предварительного просмотра в GTM либо с помощью отчета «События» в реальном времени в GA.
Шаг 5. Настройте цель в Google Analytics
После того, как вы опубликуете контейнер с изменениями, останется настроить цель в Google Analytics, чтобы считать отправки форм в качестве конверсий. Для этого в настройках представления GA добавьте новую собственную цель. Выберите тип «Событие» и заполните поля «Категория», «Действие» и «Ярлык» точно так же, как вы это сделали при настройке тега в GTM:
Сохраните цель. Готово — вы настроили отслеживание форм без изменений кода на сайте!
Способ 3. Триггер «Доступность элемента» в Google Tag Manager
Если после заполнения формы у вас на сайте всплывает окно с благодарностью или сообщением об успешной отправке, вы можете попробовать еще один встроенный триггер GTM. Он срабатывает, когда на экране появляется определенный элемент (в нашем случае всплывающее окно) и отправляет в dataLayer событие gtm.elementVisibility.
Чтобы настроить этот триггер, необходимо узнать селектор CSS отслеживаемого элемента. Для этого кликните правой кнопкой мыши по окну и выберите «Посмотреть код». Нас интересует следующая строка:
Чтобы скопировать селектор CSS, кликните по строке правой кнопкой мыши и выберите «Copy» — «Copy selector»:
В нашем примере селектор выглядит так — #webinar_marketing_automation > div.
После этого создайте новый триггер, выбрав тип «Доступность элемента»:
Заполните следующие поля:
- Название триггера — например, «Получить запись вебинара».
- Метод выбора — «Селектор CSS».
- Селектор элементов — сюда вставьте значение, которое вы скопировали из HTML кода всплывающего окна.
- Правило запуска триггера — если у вас на странице одна форма, оставьте вариант «Один раз на страницу». Если форм несколько, а сообщение всплывает одно, можете выбрать «Один раз на элемент»:
- Затем поставьте галочку в чекбоксе «Регистрация изменений DOM».
- Условия активации триггера — здесь, выбрав вариант «Некоторые события...», вы можете указать страницу, на которой появляется всплывающее сообщение, или его текст.
- Сохраните триггер.
После создания триггера «Доступность элемента» необходимо выполнить те же настройки, что мы подробно описали в Способе 2:
- Добавить в GTM новый тег, который будет передавать в Google Analytics данные об отправке форм, и подключить к нему созданный триггер.
- С помощью предварительного просмотра проверить, как работает тег при отправке формы.
- В Google Analytics настроить цель «Событие», чтобы отслеживать конверсии.
Способ 4. Отслеживание форм, которые используют 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 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://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. Создайте тег, чтобы проверить, как работает ваша форма
Откройте раздел «Теги», нажмите «Создать», затем «Конфигурация тега» и выберите «Пользовательский HTML». Скопируйте код, приведенный выше, и вставьте его в текстовое поле. В качестве триггера укажите все страницы:
После этого включите предварительный просмотр в GTM, откройте страницу с формой, заполните ее и отправьте.
Если в консоли отладки появилось событие ajaxComplete (как на скриншоте выше), значит, ваша форма использует AJAX и этот способ отслеживания вам полностью подходит — читайте дальше.
Шаг 2. Создайте переменную dataLayer
Если вы кликните мышкой по событию ajaxComplete в консоли предварительного просмотра, а затем откроете вкладку dataLayer, то увидите, какая информация передается в массив уровня данных после отправки формы.
Нас в этом коде интересует строчка response — она содержит текст о том, что форма успешно отправлена:
Эту строчку можно использовать для создания переменной и триггера в Google Tag Manager. Откройте раздел «Переменные», нажмите «Создать» и в «Конфигурация переменной» выберите «Переменная уровня данных». В поле «Имя переменной уровня данных» пропишите attributes. response (назвать переменную можно так же) и сохраните настройки.
Почему нужно вводить attributes.response вместо response? Потому что attributes — это объект, который содержит ключ response и его значение. Тем самым мы указываем GTM точный путь к данным, которые нас интересуют.
После создания переменной нужно проверить, как она работает. Для этого в режиме предварительного просмотра отправьте форму. Кликните по событию ajaxComplete и откройте вкладку Variables. Если там появилась переменная attributes.response и текст об успешной отправке формы, значит, вы все настроили правильно.
Шаг 3. Создайте триггер
В разделе «Триггеры» нажмите «Создать», затем «Конфигурация триггера» и выберите тип «Пользовательское событие». В поле «Имя события» укажите ajaxComplete. Затем в качестве условий для активации триггера выберите «Некоторые специальные события» и пропишите условие: переменная attributes. response содержит текст (тут вписываете ваш текст об успешной отправке формы).
После этого вам останется:
- Добавить в GTM новый тег с типом отслеживания «Событие», который будет передавать в Google Analytics данные об отправке форм, и подключить к нему созданный триггер.
- Проверить, как работает тег при отправке формы, с помощью режима предварительного просмотра.
- В Google Analytics настроить цель «Событие», чтобы отслеживать конверсии.
Эти настройки мы подробно описали выше в разделе «Способ 2. Триггер «Отправка формы» в Google Tag Manager».
Способ 5. События dataLayer в качестве триггера
Отслеживание форм с помощью метода dataLayer.push на наш взгляд, самое надежное и универсальное решение. Единственный его недостаток — если вы не разбираетесь в коде, без помощи разработчиков не обойтись.
Подготовьте ТЗ для разработчиков. Определитесь с тем, какие параметры вы хотите передавать в dataLayer после успешной отправки формы и составьте список. Попросите разработчиков добавить на все страницы с формами, которые вы хотите отслеживать, такой код:
dataLayer.push({
'event':'Forms',
'variable': 'value'
})
Где:
- event — это название события. Вы можете заменить его на любое, удобное вам.
- variable — это набор всех переменных, которые вы хотите передавать вместе с событием.
После того, как ваши программисты настроят метод dataLayer. push для всех форм, вы можете проверить, как он работает. Для этого включите предварительный просмотр в Диспетчере тегов и заполните форму на вашем сайте. В консоли отладки должно появится новое событие (в нашем примере оно называется OWOX). Если кликнуть по событию и перейти на вкладку dataLayer, вы увидите все параметры, которые передаются в массив данных:
Давайте на примере нашего события на скриншоте выше (скачивание PDF-файла в блоге) рассмотрим, как настроить его отслеживание с помощью GTM.
Сначала создаем все необходимые нам пользовательские переменные: eventCategory, eventAction, eventLabel и т.д. Выбираем тип «Переменная уровня данных», вводим имя переменной в фигурных скобках: {{eventCategory}}:
Потом создаем триггер типа «Пользовательское событие». В настройках указываем имя события и выбираем условия активации «Все специальные события»:
Затем создаем тег, который будет передавать события в Google Analytics. Тип тега выбираем «Google Аналитика — Universal Analytics», тип отслеживания — «Событие».
Далее заполняем поля:
- Категория — {{eventCategory}}
- Действие — {{eventAction}}
- Ярлык — {{eventLabel}}
Выбираем переменную {{Настройки Google Analytics}} и триггер, который мы создали на предыдущем шаге:
Готово. Остается проверить работу тега в режиме предварительного просмотра GTM и в отчетах GA в реальном времени.
Сколько времени тратят пользователи на заполнение ваших форм
Теперь, когда вы можете узнать, сколько пользователей успешно заполнили форму, будет полезно выяснить, с какими проблемами столкнулись те, кто ее не заполнил.
Для этого нужно, чтобы ваши разработчики добавили в dataLayer названия и значения параметров, которые помогут вам отслеживать:
- Время от открытия страницы до активации поля.
- Время от активации поля до деактивации поля.
- Время от активации первого поля до первой отправки формы.
- Время от активации первого поля до успешной отправки формы.
- Время от активации первого поля до неуспешной отправки формы.
- Время получения ответа сервера об успешной отправке формы.
- Время получения ответа сервера о неуспешной отправке формы.
- Время от активации формы до момента, когда пользователь покинул форму (факта успешной отправки формы не было).
После того, как вы настроите сбор этих данных в Google Analytics, вы сможете импортировать их в Google BigQuery, например, с помощью OWOX BI. А затем строить любые отчеты по аналитике форм в Google Sheets, используя бесплатный аддон.
Эти отчеты помогут вам найти и устранить проблемные места в юзабилити ваших форм и тем самым повысить коэффициент конверсии.
Вот несколько примеров таких отчетов и вопросы, на которые они дают ответ:
- При взаимодействии с какими полями формы у пользователей чаще всего возникает ошибка?
- Сколько времени пользователь тратит на заполнение формы?
- Сколько времени пользователь тратит на заполнение формы и от чего это зависит?
P. S. Если вам нужна помощь с настройкой аналитики форм и созданием индивидуальной системы метрик для вашего бизнеса, напишите нам на email contact@owox. ru или заполните форму на сайте.
