Тэг АвтоСобытия или упрощаем себе жизнь в GTM
При активной настройке отслеживания нажатий кнопок и форм возникает одна не приятная проблема — количество тэгов в контейнере растет и нормально работать со всем этим добром уже не получается, только на поиск нужного тега уходит много времени. Но есть решение!
В некоторых прошлых статьях я писал о создании этого тэга, но в контексте каких либо настроек Google Tag Manager. Сейчас остановимся более подробно на этом решении.
В некоторых прошлых статьях я писал о создании этого тэга, но в контексте каких либо настроек Google Tag Manager. Сейчас остановимся более подробно на этом решении.
Зачем?
Как я описал выше, во-первых это порядок в контейнере, после 15 настроенного тэга найти что-то нужное занимает много времени.
Во-вторых, не всегда у целевого элемента, который мы хотим отследить есть ID, Class ну или Click Text, а отследить элемент надо.
В третьих, это сложные условия и вызов каких-либо других js кодов по факту нажатия на кнопку (например код достижения цели в Яндекс Метрике).
Всё это можно сделать с помощью тэга autoEvent.
Во-вторых, не всегда у целевого элемента, который мы хотим отследить есть ID, Class ну или Click Text, а отследить элемент надо.
В третьих, это сложные условия и вызов каких-либо других js кодов по факту нажатия на кнопку (например код достижения цели в Яндекс Метрике).
Всё это можно сделать с помощью тэга autoEvent.
Как сделать?
Очень просто. Создаем тэг типа Google Analytics:
Как видите, вместо значений в идентификаторе отслеживания и характеристиках события стоят переменные. Чтобы получилось так как у меня, нужно, чтобы поле было пустое и нажать на этот значок:
Для идентификатора отслеживания выбираем «Новая переменная» и указываем тип переменной — константа и пишем туда над идентификатор отслеживания (типа такого: UA-111111-1).
Для нашей задачи, выбираем тип переменной — Переменная уровня данных:
Для нашей задачи, выбираем тип переменной — Переменная уровня данных:
Куда пишем что надо, например — eventCategory, причем как в название, так и в имя переменной:
Тоже самое делаем и с остальными.
И правилом активации этого тэга будет:
И правилом активации этого тэга будет:
После чего, создаем тэг типа Пользовательский HTML и пишем туда что-нибудь такое:
<script>
$('[href ^= "/item/add"]').click (function() {
dataLayer.push({ 'event':'autoEvent','eventCategory':'buttonOpen', 'eventAction': 'product-add', 'eventLabel': {{url}}});
});
$('form.product-add').submit(function() {
dataLayer.push({ 'event':'autoEvent','eventCategory':'buttonSend', 'eventAction': 'product-add'});
});
</script>В этом примере у нас отслеживается нажатие на кнопку (там где .click) и успешный вызов формы (там где .submit).
Одно такое отслеживание (код) состоит из двух частей, первая:
$('[href ^= "/item/add"]').click (function()позволяет отслеживать нажатие на какой-либо элемент и вызывает функцию, где мы можем что-то сделать, если это событие произошло, например передавать в dataLayer данные, которые будут обработаны autoEvent тэгом:
dataLayer.push({ 'event':'autoEvent','eventCategory':'buttonOpen', 'eventAction': 'product-add', 'eventLabel': {{url}}});Как можно видеть, мы вызываем событие event = autoEvent, которое активирует выполнение autoEvent тэга, после чего, заполняем значение переменных Категория, Действие, Ярлык.
Чтобы отследить нажатие на элементы, где даже нет id или класса, для этого мы используем селекторы:
$('[href ^= "/item/add"]')Вот раздел документации, где вы можете найти различные селекторы, чтобы найти свой элемент.
Или же, есть способ сильно проще:
Или же, есть способ сильно проще:
Правило активации этого тэга будет:
И публикуем!
Что получим на выходе?
Вся настройка будет выглядеть так:
Какие ошибки бывают?
- Все переменные должны называться именно так, как написано в статье, иначе ничего работать не будет. Т.е. если переменная уровня данных называется eventValue — слитно, с маленькой «e» вначале и с большой «V», то так и надо.
- Не всегда нажатие происходит по тому элементу, по которому кажется ;). Часто бывают вложенные элементы, например <a href=»><span></span></a>, где событие gtm.linkClick происходит на <a>, а gtm.Click на <span>.
- Кавычки. С ними часто беда, правильные кавычки или одинарные ' или двойные «. Все другие не годятся.
- Изучите селекторы JQuery, с помощью них можно брать любой элемент.
- На сайте нет JQuery и весь наш прекрасный тэг работать не будет. Если это так, то смело ставьте в наш Пользовательский HTML тэг это (вначале):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>6. Console наш друг, если что-то не работает, то там могут быть ответы.
