Как отслеживать клики по кнопке с помощью Google Tag Manager

В этой статье мы разберем принципы настройки Google Tag Manager для передачи события в Яндекс.Метрику и Google Analytics при взаимодействии с кнопкой на сайте.

Применение

Кнопки на сайте являются ключевым конверсионным элементом любой веб-страницы. Не имеет никакого значения, какие действия пользователи выполняли, так как в 99,8% случаях посетители вынуждены взаимодействовать с кнопками.

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

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

Как настроить отслеживание кликов по ссылкам и отдельным элементам в Google Tag Manager читайте здесь.

Предлагаю все рассмотреть на реальном примере.

Некоторое время назад в один из разделов сайта я добавил форму подписки на материалы блога. Теперь мне необходимо передавать событие в Метрику и GA для каждой новой подписки.

Задача довольно типовая, поэтому послужит прекрасным наглядным примером для разбора ключевых настроек и принципов работы Google Tag Manager.

Обо всем по порядку.

Шаг 1: Определяем Class или Id элемента

В самом начале нужно определить уникальные атрибуты class или id выбранной кнопки, взаимодействие с которой нужно отслеживать.

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

Переходим на страницу с формой подписки и вызываем стандартную функцию просмотра кода в Google Chrome (Ctrl + Shift + I) и наводим курсор на кнопку.

Атрибут ID для кнопки формы подписки

В моем случае код кнопки отправки формы с контактными данными пользователя имеет следующий вид:

<input type="submit" value="Подписаться" name="subscribe" id="mc-embedded-subscribe" class="button">

Для дальнейшего отслеживания взаимодействия с кнопкой запоминаем id-элемент "mc-embedded-subscribe". Именно он нам и пригодится в последующей настройке.

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. А вот атрибут id является уникальным именем элемента, который в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Добавлю, что в вашем конкретном случае код для кнопки будет другим, кнопка может содержать в себе как id, так и class, который вам потребуется использовать в настройке.

Шаг 2: Активация переменной

Уникальный идентификатор кнопки мы определили, теперь самое время перейти в интерфейс Google Tag Manager.

  1. Переходим в аккаунт Google Tag Manager и выбираем нужный контейнер;
  2. Открываем раздел меню Переменные и нажимаем на кнопку Настроить;
  3. В блоке Клики рекомендую сразу активировать поля Click Classes и
    Click ID.

Подключение переменных Click Classes и Click ID

Важно! В нашем примере мы используем тип переменной Click ID, так как в коде кнопки используется атрибут id. Повторюсь, что в вашем случае может быть атрибут class, в таком случае для отслеживания потребуется использовать переменную Click Classes.

Шаг 3: Настройка триггера

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

  1. Переходим в раздел меню Триггеры;
  2. Создаем новый триггер с типом Клик – Все элементы;
  3. Выбираем условия активации триггера — Некоторые клики;
  4. Указываем условие Click ID (идентификатор клика) содержит mc-embedded-subscribe;

Настройка триггера Все элементы

Теперь триггер будет активироваться при клики на элемент с идентификатором mc-embedded-subscribe. А это нам как раз и нужно!

Сохраняем и переходим к следующему этапу настройки.

Шаг 4: Передача события в Google Analytics

Для каждой системы веб-аналитики потребуется создать свой уникальный тег в Google Tag Manager. Создаем и настраиваем теги, которые будут передавать события при активации триггера по заданным условиям в системы Google Analytics и Яндекс.Метрика.

Начнем с Google Analytics, пожалуй.

  1. Переходим в раздел меню Теги и нажимаем Создать;
  2. Выбираем тип триггера Google Аналитика — Universal Analytics;
  3. В поле Тип отслеживания выбираем Событие;
  4. Указываем в свободной форме поля Категория и Действие;
  5. В поле Настройки Google Analytics добавляем переменную с идентификатором отслеживания Google Analytics;
  6. В нижнем блоке триггеры добавляем ранее созданные нами триггер с типом Все элементы.
Как создать переменную c идентификатором отслеживания Google Analytics в Google Tag Manager можно почитать здесь.

На выходе получаем следующую настройку тега для Google Analytics.

Создание нового тега для Google Analytics

В нижнем блоке Триггеры добавляем ранее созданные нами триггер для активации тега:

Триггер Все элементы

Готово! Нажимаем Сохранить и проверяем корректность настроек, используя режим Предварительного просмотра.

Не забываем создать новую цель с типом Событие в Google Analytics вашего представления с указанием Категории и Действия, указанного ранее в созданном теги.

Настройки цели в Google Analytics

Накопленные данные по собранным событиям можно посмотреть в отчете Поведение >  События или проверить результат передачи данных с помощью Отчета в режиме реального времени.

С Google Analytics разобрались, теперь разберем настройку для системы Яндекс.Метрика.

Шаг 5: Передача события в Яндекс.Метрику

Для Метрики все по аналогии с предыдущим примером, но выбираем другой тип тега.

  1. Переходим в раздел меню Теги и создаем новый;
  2. Выбираем тип тега — Пользовательский HTML;
  3. В пустую область вставляем специальный код, который будет отправлять данные в Метрику;

<script>
yaCounterXXXXXXX.reachGoal('subscribe_done');
</script>

Здесь, XXXXXXX — номер вашего счетчика, а subscribe_done — название идентификатора цели, которое указывается в свободной форме.

Настройка тега для Яндекс.Метрики

В нижнем блоке Триггеры выбираем созданный ранее триггер для активации тега.

Также не забываем создать цель в Яндекс.Метрике:

  1. Войдите в Метрику и выберите из списка нужный счетчик;
  2. Выберите меню Настройки и перейдите во вкладку Цели;
  3. Нажмите на кнопку Добавить цель и выберите тип Java-Script событие;
  4. Укажите понятное название для создаваемой цели;
  5. В поле идентификатор цели укажите название (в нашем случае указываем subscribe_done);
  6. Cохраните настройки.

Настройка цели в Яндекс.Метрики

Накопленные данные по выполненным целям можно будет посмотреть в стандартном отчете Конверсии.

Отлично! Мы разобрали с вами принципы и последовательность действий по настройке GTM и научились передавать события в системы аналитики. Очень рад, если изложенный материал упростил вам настройку и сэкономил время.

Не разобрались?

Не получилось настроить по инструкции или заметили ошибку, то пишите на почту info@konstantinbulgakov.com. Также можно оставлять комментарии в специальной форме ниже.

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

Сохраните ссылку

2
Напишите комментарий

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Константин БулгаковОльга Recent comment authors
  Подписаться  
Новые Старые Лучшие
Уведомлять о
Ольга
Гость
Ольга

Из 10500 статей на эту тему Ваша — самая толковая и последовательная. Жаль, что не нашла ее первой. Спасибо, заработало.