Настройка отслеживания ajax форм при помощи GTM без программиста
Постановка задачи
Настройку отслеживания форм будем проводить на тестовом сайте test.toolmark.ru
Скрипты, которые использованы в этой статье написаны с применением библиотеки jquery. Эта библиотека используется на многих сайтах в мире, если у вас на сайте эта библиотека не подключена, то скрипты работать не будут. Поэтому сначала проверим, подключена ли библиотека. Открываем панель разработчика и инспектируем наш код ищем подключение библиотеки.
На скриншоте выше показано, как подключена библиотека на моём сайте. Для того чтобы точно удостовериться, что библиотека подключена и работает откройте консоль, нажмите ctrl+shift+j или правой кнопкой мыши вызовите контекстное меню и нажмите на пункт “исследовать элемент” перейдите на вкладку console и введите в консоль код ниже и нажмите энтер
|
1 2 3 |
$(document).ready(function(){ alert('Ваша версия jQuery ' + jQuery.fn.jquery); }); |
В случае если jquery подключена, появится окно с уведомлением об этом, если jquery не подключена, то ничего не произойдет, окно не появится.
Если вы выяснили, что на вашем сайте нет jquery, то необходимо подключить её, прописав код напрямую в шаблон сайта или установить используя GTM.
Создайте в GTM тег «пользовательский HTML» в теге пропишите следующую строку
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
в качестве триггера выберите «all pages» сохраните все изменения и опубликуйте обновленные данные контейнера. Теперь снова введите в консоль скрипт описанный выше, если вы все сделали правильно должно появиться окошко с уведомлением о версии jquery.
На сайте есть 2 типа форм
Форма с 2 полями: имя и телефон
и форма только с телефоном
Нам нужно отслеживать каждую форму по отдельности. Мы хотим считать количество отправок по каждой форме, для этого у нас будут 2 цели в google analytics.
У каждой формы есть атрибут name, значение атрибута у первой формы form-1
а у другой формы form-4
Для каждого типа форм подключен отдельный обработчик.
Значение атрибута name нам потребуются далее, для того чтобы понимать какая именно форма была отправлена.
Изучаем ответы сервера
Для того чтобы отслеживать формы, которые отправляют и получают данные от сервера при помощи ajax нужно научиться перехватывать запросы, которые получает браузер пользователя. Потом из этих запросов нужно извлечь данные и найти к чему привязаться при настройке кодов отслеживания в GTM.
В консоль браузера вводим код, который будет срабатывать при успешном ответе сервера и выводить в консоль содержимое объектов xhr и settings
|
1 2 3 4 |
$(document).ajaxSuccess(function( event, xhr, settings ){ console.log(settings); console.log(xhr); }); |
Чтобы вызвать консоль нажмите ctrl+shift+j или правой кнопкой мыши вызовите контекстное меню и нажмите на пункт “исследовать элемент” и введите код описанный выше. Код в консоли будет выглядеть примерно так
Примечание. Названия аргументов в функции function( event, xhr, settings ) могут быть произвольными. Теперь заполняем и отправляем форму
При успешном ответе сервера происходит вызов метода .ajaxSuccess() при помощи которого мы установили обработчик события — функцию, которая получает данные объектов event, xhr, settings и выводит их в консоль. Ниже показано полученное содержимое объектов xhr и settings. Набор их свойств и методов.
У объекта settings есть свойство data
в значении содержится указание типа формы form-1, то есть по этому свойству мы можем определить какая именно форма была отправлена
У объекта xhr есть свойство responseJSON
в котором содержатся дополнительные свойства и их значение. В качестве значения передается сообщение об успешной отправке формы. Можем использовать эту информацию для настройки триггера в GTM.
Настройка GTM для отслеживания ответа сервера
Переходим в GTM. Необходимо создать 2 переменные уровня данных. Первую назовем name-form в неё мы будем передавать значение свойства data из объекта settings
Вторую переменную назовем response в неё мы будем передавать значение свойства responseJSON.infos из объекта xhr
Теперь создадим триггер типа пользовательское событие и назовем произвольно, например success-form
Создаем тег, типа пользовательский html с его помощью загружаем на сайт код для отслеживания ответа сервера в случае успешной отправки формы. В качестве триггера выбираем all pages. Код ниже
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ajaxSuccess(function( event, xhr, settings ){ dataLayer.push({ 'event': 'success-form', 'response':xhr.responseJSON.infos, 'name-form':settings.data }); }); </script> |
Разберем подробнее, что означает каждая строчка кода
1 — стандартный тег обозначающий начало тела скрипта
2 — метод ajaxSuccess позволяет получить ответ сервера в случае успешной отправки формы, далее задана функция, которая в качестве аргументов принимает объекты, которые присылает сервер вместе с ответом, в фигурных скобках в строках 3-8 указано тело функции, этот код запускается в случае если сработает метод .ajaxSuccess()
3 — уровень данных, объект в который можно записать данные для отправки в GTM
4 — event специальная переменная, которая используется для обозначения триггеров типа “пользовательское событие”. Указываем название пользовательского события созданного ранее.
5 — указываем название переменной которую создали ранее, в качестве значения пишем код который будет получать значение нужных нам свойств из объекта xhr
6 — указываем название переменной которую создали ранее, в качестве значения пишем код который будет получать значение нужных нам свойств из объекта settings
7,8 — Закрывающие скобки
10 — тег закрывающий скрипт
Созданный тег будет получать данные ответа сервера и отправлять их в GTM.
Теперь нужно донастроить триггер success-form в GTM. В качестве условий активации указываем наши переменные уровня данных и нужные нам значения.
Вначале статьи мы говорили о том, что у нас на странице есть 2 типа форм, у первой атрибут name=form-1, у другой form-4. Для того чтобы отслеживать form-4 нам нужно создать еще один триггер типа пользовательское событие, в котором для параметра name-form указать значение form-4, потом для этого триггера создать отдельный тег для отправки данных в аналитикс.
Создание тега для отправки события в аналитикс
Теперь создаем стандартный тег GA для отправки событий в аналитикс
В пункте переменная настроек выбираем переменную с нашим счетчиком. В качестве триггера выбираем триггер success-form созданный ранее. Публикуем изменения. Теперь при успешной отправке формы с атрибутом name = form-1, будет срабатывать наш тег. Такой же тег нужно создать для другой формы, но указать другое событие и выбрать соответствующий триггер созданный ранее для form-4. Опубликуйте изменения в контейнере GTM.
Настройка цели в GA
Теперь создаем в GA цель типа “собственная” для фиксации событий отправки первой формы. В качестве категории и действия события указываем те же данные что указали при создании тега для отправки данных в GA
Также создаем цель для фиксации отправки другой формы. После этого если все сделано правильно, аналитикс должен начать собирать данные об успешно отправленных формах.
Конфиденциальность гарантирована
