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

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

Применение

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

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

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

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

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

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

Для начала определим уникальные атрибуты class или id выбранной кнопки. Google Tag Manager будет отслеживать взаимодействие именно по этим атрибутам.

Для того чтобы определить уникальный идентификатор для кнопки, переходим на страницу с формой подписки. Вызываем стандартную функцию просмотра кода в Google Chrome (Ctrl + Shift + I) и наводим курсор на кнопку.

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

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

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

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

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

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

Шаг 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 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охраните настройки.

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

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

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

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

Инструкция не помогла? Нашли ошибку в описании? Пишите письма на info@konstantinbulgakov.com или оставляйте комментарии в форме ниже под статьей.

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

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

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

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

    1. Ольга, доброй ночи!
      Спасибо за приятный комментарий, он очень мотивирует.
      Не забудьте сохранить ссылку на статью в закладки.
      Кстати, на сайте еще много полезных инструментов для ежедневной работы).

  2. Константин, подскажите а что выбирать в качестве триггера, если у меня вот такая форма

    здесь нет ни class ни id

  3. Спасибо за отличную статью! Очень помогла мне разобраться с целями. Это просто клад среди остального мусора который мне попадался на эту тему.

  4. Добрый вечер.
    А как настроить в виде цели клики по блокам/кнопкам и другим элементам на странице? Если таких элементов 20 и страниц 10000000

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

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