Для отслеживания кликов через Google Tag Manager, очень часто привязываются через Auto Event Variable, такие как id, class, text и многое другое. Бывают случаи, когда с помощью данных макросов не получается привязаться к нужному элементу, тогда на помощь приходит макрос Data Layer Variable, но ней в следующей статье. При настройке любого тега через GTM необходимо знать всю информацию о том, как настроить цели в Google Analytics, а также основные понятия Google Tag Manager и многое другое. Все это вы сможете найти на данном сайте.
Существует 2 варианта отслеживания кликов по социальным кнопкам: 1-й отслеживание клика по каждой из кнопок отдельно, 2-й отслеживание всех кликов по кнопкам вместе. Сегодня я расскажу вам о том, как настроить отслеживание по 2-му варианту. Совсем недавно передо мной была поставлена задача настроить отслеживание кликов по любой из социальных кнопок в целом. Нужно трекать не отдельно каждую социальную кнопку, а все вместе, как в 2-м варианте. Соответственно данные должны передаваться в Google Analytics.
Перед тем, как приступать к настройке отслеживания любой кнопки на сайте необходимо найти то, к чему можно привязаться, используя только возможности GTM. Случаются также и крайние случаи, когда возможностей Google Tag Manager не достаточно для решения какой-то определенной задачи, тогда программист вам в помощь.
С помощью GTM можно привязаться практически к любому «куску кода». В нашем случаем — это [code]id=»social_nav»[/code]. Почему именно, к этому элементу мы будем привязываться? Ответ на этот вопрос кроется в самом задании, ведь нам нужно отслеживать все клики по любой из кнопок вместе, соответственно нужно выделить ту часть кода, которая отвечает за все 4-ре социальные кнопки.
Для того, чтобы получить данные о том, содержит элемент [code]id=»social_nav»[/code] или нет, нам необходимо создать макрос, который будет вытягивать значение id из элемента. Пример такого макроса:
Тип макроса мы выбираем Переменная уровня данных (Data Layer Variable), выставляем Версию 2, для того, чтобы точки служили иерархией, и прописываем — [code]gtm.element.parentNode.parentNode.id[/code]. По-простому, parentNode означает подняться к родительскому элементу, а 2 соответственно, подняться к родительскому элементу дважды.
Плавно переходим к созданию правила для активации тега, которое должно содержать: событие (event) при вызове которого, должно сработать правило, а вследствие, и сам тег и другое. В нашем случае правило будет следующее:
В данном правиле под названием social_header мы видим следующее: событие [code]gtm.linkClick[/code], событие [code]{{social_id}}[/code], которое было создано ранее должно равняться social_nav и [code]{{url path}}[/code] с помощью регулярных выражений должен содержать либо [code]/[/code], либо [code]/index.html[/code].
Теперь можно смело переходить к созданию самого тега, для отслеживания кликов по социальным кнопкам. Назовем его home.click.social. Нейминг должен всегда отражать иерархию и быть понятным даже для человека, который в GTM и вовсе не разбирается. Итак, в данном названии тега заключена информация о том, что мы отслеживаем Главную страницу, клик и social — означает клик по социальной кнопке. Именно при такой структуре и качественном нейминге, вы никогда не забудете о том, за что отвечает каждый из тегов. Когда вы будете называть правильно теги — никогда не допустите ошибок.
Итак, Category мы задаем social и Action (действие) — click. После выполненных действий мы переходим к создании целей (Goals) в Google Analytics. Создаем цель с названием social action и выбираем тип цели Событие (event), затем прописываем категорию, которую мы задавали в GTM при создании тега, то есть — social.
Настройка отслеживания кликов по социальным кнопкам завершена, но необходимо выполнить проверку. Детальнее о том, как правильно выполнять проверку настройки каждого тега через Google Tag Manager читайте на сайте. А пока вкратце, лучше всего для проверки правильности работы тега можно пользоваться дебагером Google Tag Manager, включить который можно в режиме Preview — Debug. Далее проверяем все поля в Data Layer, а также при срабатывании любого события.
Дебагер Google Tag Manager отличный инструмент для проверки правильности срабатывания, да и в целом любого тега. Далее рекомендую воспользоваться Tag Assistent — расширением для браузера, который показывает, какие теги, работают на определенной странице. Последним этапом проверки является сам Google Analytics, а точнее его раздел — В режиме реального времени — События. Именно там вы сможете увидеть практически все настроенные события из Google Tag Manager. Всем удачной настройки, если возникнут вопросы, с радостью отвечу в комментариях ниже.
