Тэг АвтоСобытия или упрощаем себе жизнь в GTM

rsz_logo_post


При активной настройке отслеживания нажатий кнопок и форм возникает одна не приятная проблема — количество тэгов в контейнере растет и нормально работать со всем этим добром уже не получается, только на поиск нужного тега уходит много времени. Но есть решение!

 

В некоторых прошлых статьях я писал о создании этого тэга, но в контексте каких либо настроек Google Tag Manager. Сейчас остановимся более подробно на этом решении.

 

Зачем?

 

Как я описал выше, во-первых это порядок в контейнере, после 15 настроенного тэга найти что-то нужное занимает много времени.

Во-вторых, не всегда у целевого элемента, который мы хотим отследить есть ID, Class ну или Click Text, а отследить элемент надо.

В третьих, это сложные условия и вызов каких-либо других js кодов по факту нажатия на кнопку (например код достижения цели в Яндекс Метрике).

Всё это можно сделать с помощью тэга autoEvent.

 

Как сделать?

 

Очень просто. Создаем тэг типа Google Analytics:

2

 

Как видите, вместо значений в идентификаторе отслеживания и характеристиках события стоят переменные. Чтобы получилось так как у меня, нужно, чтобы поле было пустое и нажать на этот значок:

3

 

Для идентификатора отслеживания выбираем «Новая переменная» и указываем тип переменной — константа и пишем туда над идентификатор отслеживания (типа такого: UA-111111-1).

Для нашей задачи, выбираем тип переменной — Переменная уровня данных:

4

 

Куда пишем что надо, например — eventCategory, причем как в название, так и в имя переменной:

5

 

Тоже самое делаем и с остальными.

И правилом активации этого тэга будет:

img15

 

После чего, создаем тэг типа Пользовательский HTML и пишем туда что-нибудь такое:

В этом примере у нас отслеживается нажатие на кнопку (там где .click) и успешный вызов формы (там где .submit).

Одно такое отслеживание (код) состоит из двух частей, первая:

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

Как можно видеть, мы вызываем событие event = autoEvent, которое активирует выполнение autoEvent тэга, после чего, заполняем значение переменных Категория, Действие, Ярлык.

Чтобы отследить нажатие на элементы, где даже нет id или класса, для этого мы используем селекторы:

Вот раздел документации, где вы можете найти различные селекторы, чтобы найти свой элемент.

 

Правило активации этого тэга будет:

img16

И публикуем!

 

Что получим на выходе?

 

Вся настройка будет выглядеть так:

1

 

Какие ошибки бывают?

 

  1. Все переменные должны называться именно так, как написано в статье, иначе ничего работать не будет. Т.е. если переменная уровня данных называется eventValue — слитно, с маленькой «e» вначале и с большой «V», то так и надо.
  2. Не всегда нажатие происходит по тому элементу, по которому кажется ;). Часто бывают вложенные элементы, например <a href=»><span></span></a>, где событие gtm.linkClick происходит на <a>, а gtm.Click на <span>.
  3. Кавычки. С ними часто беда, правильные кавычки или одинарные ‘ или двойные «. Все другие не годятся.
  4. Изучите селекторы JQuery, с помощью них можно брать любой элемент.
  5. На сайте нет JQuery и весь наш прекрасный тэг работать не будет. Если это так, то смело ставьте в наш Пользовательский HTML тэг это (вначале):
  6. Console наш друг, если что-то не работает, то там могут быть ответы.

 



  • Людмила Вежновец

    Добрый день! При публикации возникает ошибка (на скрине), не можем никак разобраться, как ее устранить. Помогите, пожалуйста, разобраться

    • snegireff

      Добрый день. Так как мой текущий контейнер мигрировал с прошлой версии GTM, у меня сохранились старые переменные, типа {{url}}, если у вас новый контейнер, то вместо нее, вам нужно использовать {{Page URL}}

      • Людмила Вежновец

        Спасибо большое

  • Maxim Mazurkevich

    Спасибо за статью. Очень полезно. Только вот у меня проблема. В переменных у которых есть пробел (например {{Page URL}}). При отправке в аналитику имеет вид undefined. Подставляю переменную {{gaID}} — все нормально. Не подскажите как решить эту проблему?

    Хотя ошибок при объявлении контейнера нет (если бы неправильно была указана переменная то не опубликовалось бы)

    • snegireff

      Я думаю дело не в пробеле, а можете скрин отладчика показать?

      • Anton Kharlamov

        такая же проблема, почему то undefined возвращает в аналитиксе (

        • Дима

          и у меня

          • snegireff

            Коллеги, вот тут у вас галочка включена?

          • Сталкивался с такой проблемой. {{Page URL}} передавался как undefined, но на некоторых сайтах и страницах всё же передавался корректно.
            Докопаться не получилось, использую JS для определения URL страницы в кастомном скрипте

Подпишись на рассылку

Я делаю эту рассылку с любовью и каждую неделю.
В ней мои публикации
и всё интересное, что я нашёл за неделю.
Эл. почта
Имя
Secure and Spam free...