Настройка отслеживания автособытий в Google Tag Manager. Пошаговая инструкция

Автособытие – это очень удобная функция ГТМ, которая позволяет значительно сократить количество тегов. Используется в тех случаях, когда необходимо отследить большое количество элементов на сайте. Работает с помощью триггера Пользовательское событие. Помимо этого, как и любые другие клики, может использоваться в формах, ссылках, кнопках и других объектах, по которым осуществляются клики.

В данной статье рассмотрим настройку ГТМ для отслеживания автособытий и отправку в Google Аналитику и Яндекс Метрику. Настройку будем разбирать на примерах на понятном человеческом языке с упором на то, что в результате всё должно получиться.

Шаг 1. Подготовка к настройке

Во-первых, необходимо убедиться, что Google Tag Manager уже установлен на сайте. Если ещё не установлен, читайте, как установить, иначе дальнейшие действия будут бесполезны.

Во-вторых, необходимо проверить, что события прописаны во всех элементах, которые необходимо отследить.

Если это ссылка, то её код должен выглядеть примерно так:

<a href="http://yourdomainname.ru/link/to/page" onclick="dataLayer.push({'event': 'autoEvent', 'eventCategory': 'linkName', 'eventAction': 'clickName', 'eventLabel': 'linkLabel'});">

Если это кнопка, то её код должен быть такого вида:

<input onclick="dataLayer.push({'event': 'autoEvent', 'eventCategory': 'formName', 'eventAction': 'sendForm', 'eventLabel': 'buttonLabel'});">

Если события не прописаны – пропишите.

В-третьих, элементы, которые планируется отслеживать, должны иметь одно имя события, а никак не разные, так как триггер будем настраивать один. Различаться должны только категория события eventCategory и/или действие eventAction, но лучше, чтобы различались и то, и другое.

Шаг 2. Разбираем, что будем отслеживать

На этом скриншоте видно, что отслеживать мы будем клик по кнопке Тест формы ! в форме Пример формы 1 в модальном окне.

Форма имеет категорию событий eventCategory – Form1, действие eventAction – SendForm1 и ярлык eventLabel – Button1.

На этом скриншоте видно, что отслеживать мы будем клик по кнопке Тест формы ! в форме Пример формы 2.

Форма имеет категорию событий eventCategory – Form2, действие eventAction – SendForm2 и ярлык eventLabel – Button2.

На этом скриншоте видно, что отслеживать мы будем клик по кнопке Тест формы ! в форме Пример формы 3.

Форма имеет категорию событий eventCategory – Form3, действие eventAction – SendForm3 и ярлык eventLabel – Button3.

Шаг 3. Создадим пользовательские переменные в ГТМ

В ГТМ переходим в Переменные в раздел Пользовательские переменные

Создаём три переменных уровня данных:

  • eventCategory
  • eventAction
  • eventLabel

как на скриншоте – eventCategory

eventAction и eventLabel создадим аналогично.

Шаг 4. Создадим триггер

Переходим в Триггеры – Создать

Назовём его, например, AutoEvent и выбираем тип Пользовательское событие

Имя события – autoEvent

Если необходимо задать условия активации триггера, выбираем Некоторые специальные события, если же условия не нужны, выбираем Все специальные события

Шаг 5. Создадим теги

Тег для Google Analytics

Переходим в Теги – Создать

Назовём его: Auto Event – GA tag

Тип тега: Google Аналитика – Universal Analytics

  • Тип отслеживания: Событие
  • Категория: {{eventCategory}}
  • Дейстие: {{eventAction}}
  • Ярлык: {{eventLabel}}
  • Настройки Google Analytics: {{Google Analytics}}

и привязываем к нему триггер AutoEvent

Тег для Яндекс Метрики

Теги – Создать

Назовём его: Auto Event – YM tag

Тип тега: Пользовательский HTML

В Конфигурации тега в поле HTML вставляем код:

<script>
  yaCounterXXXXXXXX.reachGoal('{{eventCategory}}-{{eventAction}}');
</script>

и привязываем к нему триггер AutoEvent

XXXXXXXX – это id счётчика Яндекс Метрики

{{eventCategory}} и {{eventAction}}категория события и действие – переменные, которые прописаны в отслеживаемом объекте, будут подставляться в соответствии с заданными значениями

Шаг 6. Создадим цели для Яндекс Метрики

В Яндекс Метрике переходим в Настройки – раздел Цели

Добавляем цель:

  • Название: Отправка формы – пример 1
  • Тип условия: JavaScript-событие
  • Идентификатор цели: Form1-SendForm1

Аналогичным образом создадим ещё 2 цели.

Называем их Отправка формы – пример 2 и Отправка формы – пример 3, а их идентификаторы – Form2-SendForm2 и Form3-SendForm3 соответственно.

После этого созданные цели появятся в списке

Form1, Form2 и Form3 – это и есть значения {{eventCategory}}, а SendForm1, SendForm2 и SendForm3 – это значения {{eventAction}}, а так как в GTM в теге идентификатора цели Яндекс Метрики задавали {{eventCategory}}-{{eventAction}}, то и сами идентификаторы стали Form1-SendForm1, Form2-SendForm2 и Form3-SendForm3 соответственно.

Шаг 7. Создадим цели для Google Analytics

Также в Google Analytics можно добавить цель. Для этого необходимо:

  • Установка цели – указать Собственная
  • Описание цели — обозвать её как-нибудь, например Отправка формы – пример 1 и выбрать тип Событие
  • Условия события — указать категорию Form1 и действие SendForm1

Сохранить

Аналогичным образом создадим 2 оставшиеся цели.

Проверка

События Google Analytics:

Цели Яндекс Метрики:

Теперь автособытие настроено. Приятного использования! 🙂

Поделиться ссылкой: