Автособытие – это очень удобная функция ГТМ, которая позволяет значительно сократить количество тегов. Используется в тех случаях, когда необходимо отследить большое количество элементов на сайте. Работает с помощью триггера Пользовательское событие. Помимо этого, как и любые другие клики, может использоваться в формах, ссылках, кнопках и других объектах, по которым осуществляются клики.
В данной статье рассмотрим настройку ГТМ для отслеживания автособытий и отправку в 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:
Цели Яндекс Метрики:
Теперь автособытие настроено. Приятного использования! 🙂
Поделиться ссылкой: