9768 86
Аналитика Читать 7 минут 23 октября 2019

Нестандартные методы отслеживания форм на сайте с помощью Google Tag Manager

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

Однако, если вы «счастливчик» у которого они не срабатывают, либо не подходят, у нас есть для вас два нестандартных и эффективных метода отслеживания форм на сайте с помощью GTM.

Как настроить трекинг форм с помощью Custom Ajax Listener от LunaMetrix?

Если вы читаете это, скорее всего форма на вашем сайте не отслеживается стандартным триггером «Отправка формы» в Google Tag Manager, или отслеживается некорректно. После сабмита формы не происходит редирект на succes page, форма обновляется и отражает сообщения типа «Спасибо мы с Вами свяжемся».

Высокая вероятность что форма отправляется с помощью Ajax. Для трекинга таких форм специалисты Lunametrix разработали специальный listener.

Поехали!
1
Создайте новый тег с типом «Собственный HTML».
Custom Ajax Listener от LunaMetrix
2
Вставьте в него этот код:
<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>
3
Настройте активацию тега на всех страницах сайта.
LunaMetrix
4
Сохраните и опубликуйте тег. Перейдите в режим предварительного просмотра, откройте и обновите страницу с формой.

Если форма реализована на Ajax, при ее отправке в режиме просмотра на странице вы увидите событие ajaxComplete.
LunaMetrix
5
Теперь нам нужно идентифицировать только успешные отправки форм. Для этого нужно создать переменную и триггер на основе данных, которые ивент ajaxcomplete передает в Data Layer:
Создаем переменную которая будет получать данные из сообщения, что выводится пользователю при отправке формы:
LunaMetrix
Название переменной должно соответствовать иерархии данных в Data Layer, которое отправляет событие AjaxComplete. Нам нужен текст в параметре «message», поэтому у меня название переменной будет выглядеть так: attributes.response.message
LunaMetrix
6
Создаем тег Google Analytics и триггер активации.
Тип триггера «Custom event». Название события ajaxComplete.
Выбираем переменную, которую мы создали в предыдущем шаге.
Вводим текст, что выводится при успешной отправке формы.
LunaMetrix
7
Сохраняем, публикуем, тестируем в режиме просмотра.
LunaMetrix

Как настроить трекинг форм с помощью триггера Element Visibility?

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

Собственно на его загрузку мы создадим триггер и тег, чтобы передавать конверсию в Google Analytics.
1
Для начала нам нужно идентифицировать css-селектор элемента. Для этого:
нажмите на элемент правой кнопкой;
выберите «проверить элемент»;
в инструментах для разработчиков нажмите правой кнопкой на элемент и выберите «copy selector».
Element Visibility
При копировании селектора следует убрать лишнюю информацию, например, в нашем случае он скопировался так: «wpcf7-f1051-o8> form> div.wpcf7-response-output.wpcf7-mail-sent-ok».

Сам селектор — это часть «div.wpcf7-response-output.wpcf7-mail-sent-ok», только она нам и нужна для создания триггера.
2
Далее создаем триггер с типом «Видимость элемента», указываем методом выбора «CSS селектор», указываем селектор, который скопировали в предыдущем шаге. Устанавливаем галочку напротив опции «Наблюдать за изменениями DOM».
Element Visibility
3
Создаем тег для передачи события в Google Analytics.
Element Visibility
4
Привязываем к нему триггер, который создали ранее.
Element Visibility
5
Сохраняем, публикуем и тестируем. Готово
В итоге, как мы видим, триггер срабатывает на успешную отправку формы:
Element Visibility
И не срабатывает при заполнении формы с ошибками:
Element Visibility

Заключение

Трекинг действий на вашем сайте — это важная задача на пути к успешному маркетингу. Для этого мы и отслеживаем формы, чтобы понять, какие каналы привели к ним. И в итоге понимаем, как приумножить наш результат. Алгоритм довольно простой, но многие о нем забывают. Единого правильного способа реализации трекинга форм на сайте нет, поэтому ваша задача — подобрать оптимальный вариант для вашего сайта.

Приведенные выше способы сработают в 99% случаев и просты в использовании. Надеюсь, что эта небольшая инструкция поможет вам. И помните, нет такой формы, которую нельзя отследить ;)

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

4.7 из 5 на основе 10 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Парсинг выдачи

Парсинг выдачи Google: получите быстро все интересующие вас данные

Проверка обратных ссылок

Быстрая проверка обратных ссылок вашего сайта и конкурентов

Пакетный анализ ключевых слов

Ускорьте процесс работы с запросами используя пакетный анализ ключевых запросов

Проверка частотности

Быстро в удобном виде получите статистику частоты ключевых слов

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm