Отслеживание кликов по кнопкам сайта через Google Tag Manager 2.0

Отслеживание кликов по кнопкам сайта через Google Tag Manager 2.0


Отслеживаем кнопки с Google Tag Manager

Кнопки встречаются практически на любом сайте. Для качественной аналитики данные о кликах по разным кнопкам на сайтах необходимо передавать в Universal Analytics. А еще лучше, строить воронки переходов посетителей. Но об этом в следующей статье.

Отслеживание кнопок на сайте через Google Tag Manager 2.0

Пример кнопок, которые можно отслеживать с помощью Google Tag Manager 2.0:

  • Кнопки социальных сетей, например, Вконтакте, Фейсбук, Твиттер и другие;
  • Кнопка “Добавить в корзину”, «Купить», «Заказать», «Забронировать» и другие;
  • Кнопки замены языков на сайте (ru,en,es и другие). Такие кнопки часто встречаются на мультиязычных сайтах;
  • Кнопки “Отправить форму”, и все, которые связаны с формами;
  • Кнопки «Позвонить» или «Заказать звонок».

Отслеживать клики по кнопкам, которые перечислены выше можно было как в Google Tag Manager и Google Analytics, так и сейчас — через Google Tag Manager(v2) и Universal Analytics.

Отслеживание кликов по кнопкам через GTM 2.0

Давайте рассмотрим простой пример отслеживания клика по кнопке ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК.

Отслеживание кликов по кнопке Заказать Обратный Звонок GTM 2.0 Отслеживать клики по кнопкам в Universal Analytics лучше всего через события или другими словами Event Tracking. Существует 4 параметра любого события как в Google Tag Manager 2.0, так и в Universal Analytics:

  • Category — является категорией события;
  • Action — это действие определенного события;
  • Label — можно интерпритировать как название или ярлык;
  • Value — это значение.

Первые две, то есть категория (Category) и действие (Action), являются обязательными для передачи. Давайте вместе рассмотрим пример настройки отслеживания кликов по кнопке через Google Tag Manager (v2). Итак, в Universal Analytics будем передавать событие со следующими параметрами:

Category: Клик
Action: Клик по обратному звонку

При создании любого тега в Google Tag Manager необходимо начинать с создания макроса (переменной, если нужно), затем правило (триггеры, если нужно) и в завершение уже сам тег.

Первым этапом будет создание макроса или как их стали называть в новом Google Tag Manager — Variables, то есть Переменные. Сначала ищем атрибут или элемент, к которому можно привязаться к кнопке. В нашем случае — это атрибут data.

Привязка к кнопке через атрибут c помощью Google Tag Manager

Заходим в “Variables”, выбираем тип “Clicks” и нажимаем создать.

Макрос для отслеживания клика по кнопке типа переменная уровня данных в GTM 2.0

Вторым этапом настройки будет создание триггеров или правил

Переходим в раздел “Triggers”, кликаем на “New”. Выбираем тип события “Click”, далее выбираем — Some clicks. Теперь необходимо задать условия, при которых будет срабатывать триггер. На данном этапе уже нужно четко знать, при нажатии на какой элемент будет срабатывать тег.

В нашем случае тег должен срабатывать при совпадении переменной (макроса) data_attr равно form-node-4

Правило активации тега по отслеживании клика по кнопке GTM 2.0

Триггеру, впрочем как и любому тегу, переменной необходимо давать четкие и осмысленные названия.

Третий этап — это уже создание тега

Кликаем на “Tags” и переходи по кнопке “New”, тип тега выбираем Google Analytics — Universal Analytics, а затем нажимаем на “Continue”. Задаем осмысленное имя для тега: Home. Клик. Обратный звонок. Прописываем для данного тега следующие настройки:

Track Type: Event
Category: Клик
Action: Клик по обратному звонку

С помощью макроса типа Константа необходимо задать UA из Analytics. Его можно найти в Google Analytics в разделе Администратор — Ресурс — Настройки ресурса.

Тег для отслеживания кликов по кнопкам Google Tag Manager 2.0

Четвертый этап заключается в том, что необходимо запустить режим предварительного просмотра контейнера в Goolge Tag Manager 2.0 и проверить созданный тег. После проверки, если все правильно работает, то контейнер можно опубликовать.

Пятый этап. Переходим к проверке работы тега в режиме онлайн в системе Universal Analytics.

При правильной настройке тега, триггера и переменной в Universal Analytics должно отправляться Событие (event) с данными о Category и Label, которые были заданы выше. Итак, в Google Analytics переходим в отчет Режим реального времени. Правильно настроенный тег, при нажатии на Кнопку Обратного звонка — передаст в Analytics следующее событие:

Google Analytics Режим реального времени - проверка события настроенного через GTM 2.0P.S. И в заключение хотелось бы сказать о том, что через несколько дней, когда наберутся данные по кликам на кнопку Обратный звонок — можно будет сделать определенные выводы, которые могут помочь в оптимизации любого интернет-проекта.

 

Есть вопрос или комментарий?

4 comments on “Отслеживание кликов по кнопкам сайта через Google Tag Manager 2.0

Елена

Подскажите, пожалуйста, откуда берется это: gtm.element.attributes.data.value? Я никак не могу навесить GTM на свою кнопку. Он просто не видит ее. За что можно зацепиться: < a title = "В корзину" data id = "111;" class="button addToCart". Какие только комбинации я ни пробовала, событие не передается. Может быть вы сможете что-то посоветовать?

Reply
admin

Здравствуйте, если на странице нет больше никаких элементов класса — button addToCart, можно привязаться с через — element classes equals addToCart. И конечно же, вы всегда можете привязаться к тексту «В корзину», но это рекомендую использовать лишь в том случае, когда другие варианты использовать неполучается.

Reply
Михаил

Здравствуйте мне необходимо отследить появление или загрузку элемента на странице через GTM. То есть когда мы заходим на страницу должно срабатывать событие о том что этот элемент присутствует как такое можно сделать?

Reply

Сегодня опубликовал статью на смежную тему «Google Tag Manager: Отправить в Analytics кастомное событие». Я пока не очень понимаю семантику параметров category и action. По идее category — это объект взаимодействия, в него нужно передавать не «Клик», а что-то более предметное.

Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *