Советы
Как настроить аналитику форм с помощью Google Tag Manager и Google Analytics
Конверсия — одна из самых простых и при этом самых важных метрик эффективности маркетинга. Она показывает, сколько пользователей выполнили целевое действие: совершили покупку, подписались на рассылку, заказали обратный звонок и т.д. И если для учета и анализа продаж в Google Analytics есть электронная торговля, которую относительно просто настроить, то с отслеживанием заполненных форм на сайте приходится повозиться.
Все потому, что формы бывают различных типов и используют разные технологии для отправки данных на сервер. Одни формы после успешной отправки обновляются, другие показывают всплывающее окно, третьи перенаправляют пользователя на новую страницу с благодарностью за заказ и т.д. От того, какую технологию использовали для формы разработчики, зависит и способ ее отслеживания.
В этой статье мы расскажем, как разными способами собирать данные о заполнении форм и передавать их в Google Analytics.
Если вам нужна помощь с настройкой аналитики форм и созданием индивидуальной системы метрик для вашего бизнеса, команда OWOX BI готова помочь. Запишитесь на демо, где мы обсудим детали.
Наши клиенты
растут на
22%
быстрее
Растите быстрее, анализируя, что лучше сработает в вашем маркетинге
Измеряйте KPI, находите зоны роста и увеличивайте свой ROI
Записаться на демоСодержание
- Способ 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 настроить цель «Событие», чтобы отслеживать конверсии.
Наши клиенты
растут на
22%
быстрее
Растите быстрее, анализируя, что лучше сработает в вашем маркетинге
Измеряйте KPI, находите зоны роста и увеличивайте свой ROI
Записаться на демоСпособ 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, используя бесплатный аддон.
OWOX BI поможет объединить данные из разных систем: действия пользователей на сайте, звонки и заказы из CRM, email-рассылки и расходы на рекламу. Вы сможете настроить сквозную аналитику и автоматизировать отчеты любой сложности.
Эти отчеты помогут вам найти и устранить проблемные места в юзабилити ваших форм и тем самым повысить коэффициент конверсии.
Вот несколько примеров таких отчетов и вопросы, на которые они дают ответ:
- При взаимодействии с какими полями формы у пользователей чаще всего возникает ошибка?
- Сколько времени пользователь тратит на заполнение формы?
- Сколько времени пользователь тратит на заполнение формы и от чего это зависит?
P. S. Если вам нужна помощь с настройкой аналитики форм и созданием индивидуальной системы метрик для вашего бизнеса, записывайтесь на демо.
Наши клиенты
растут на
22%
быстрее
Растите быстрее, анализируя, что лучше сработает в вашем маркетинге
Измеряйте KPI, находите зоны роста и увеличивайте свой ROI
Записаться на демо
Часто задаваемые вопросы
-
Зачем отслеживать заполнение форм на сайте?
Аналитика форм помогает повысить конверсию. Конверсия — одна из самых простых и при этом самых важных метрик эффективности маркетинга. Она показывает, сколько пользователей выполнили целевое действие: совершили покупку, подписались на рассылку, заказали обратный звонок и т.д. И если для учета и анализа продаж в Google Analytics есть электронная торговля, которую относительно просто настроить, то с отслеживанием заполненных форм на сайте приходится повозиться. -
В чем проблема с аналитикой форм?
Формы бывают различных типов и используют разные технологии для отправки данных на сервер. Одни формы после успешной отправки обновляются, другие показывают всплывающее окно, третьи перенаправляют пользователя на новую страницу с благодарностью за заказ и т.д. От того, какую технологию использовали для формы разработчики, зависит и способ ее отслеживания. -
Как настроить аналитику форм?
В этой статье вы узнаете, как собирать данные о заполнении форм и передавать их в Google Analytics 5 разными способами:- Отдельная «Спасибо»-страница.
- Триггер «Отправка формы» в Google Tag Manager.
- Триггер «Доступность элемента» в Google Tag Manager.
- Отслеживание форм, которые используют AJAX.
- События dataLayer в качестве триггера.