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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
1499 54
Аналитика Читать 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

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

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

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

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

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

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

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

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов