Отслеживание кликов в Гугл Тег Менеджере

Разберем как отслеживать клики и переходы с помощью Google Tag Manager и передавать эту информацию в Google Analytics. Есть как минимум два сценария, когда это актуально:

  1. для отслеживания кликов по ссылкам tel и mailto, то есть ссылкам, которые инициализируют звонок и письмо;
  2. для отслеживания переходов по внешним ссылкам, например: в соцсети компании или в карту проезда в Гугле.

Отслеживать отправку форм по нажатию на кнопку «Отправить» не рекомендую. Хотя, такой способ и будет работать, статистика будет неточной: пользователь может нажать на кнопку до заполнения самой формы — событие в Гугл Аналитике зафиксируется, а по факту форма отправленой не окажется.

Для настройки отслеживания кликов нам понадобится установленный Тег Менеджер и Гугл Аналитика на сайте.

Настраиваем переменную Click URL

Включаем переменную Click URL
Встроенная переменная Click URL

В рабочей области Тег Менеджера, в разделе Variables (Переменные) у нас должна быть включена встроенная переменная Click URL. Если в списке переменных её нет, нажимаем Configure (Настроить) и в выпадающем окне проставляем галку возле Click URL.

Замечу, что мы разбираем отслеживание кликов по ссылкам, поэтому и используем переменную Click URL. Для отслеживания кликов по другим элементам надо использовать другие переменные (Click ID или Click Class, например). Это актуально, если надо отслеживать нажатия по кнопкам — они могут быть сверстаны через тег button, что ссылкой не является.

Настраиваем триггеры

Теперь, нам необходимо обозначить те клики, которые нас интересуют. Для этого необходимо перейти в раздел Triggers (Триггеры) и задать условия, по которым будут фильтроваться нужные клики. Мы будем отслеживать две категории кликов:

  1. по ссылкам tel и mailto;
  2. по внешним ссылкам.

Триггер для кликов по ссылкам tel и mailto

Конфигурация триггера для tel- и mailto-ссылок
Конфигурация триггера для tel- и mailto-ссылок
  1. Тип триггера: Clicks - Just Links;
  2. Условия активации триггера: Some Link Clicks;
  3. Активировать триггер, если: Click URL matches RegEx (соответствует регулярному выражению) ^mailto:|^tel:.

В конфигурации мы используем регулярное выражение, при котором будет проходить проверка на наличие mailto или tel в начале самой ссылки (аттрибут href).

^ (карет) предписывает, что mailto или tel должны быть именно вначале ссылки, а | (пайп) — это логическое или.

Регулярные выражения обычно вызывают сложности у начинающих, поэтому рекомендую проверять их с помощью https://regex101.com.

Можно обойтись и без регулярных выражений — использовать Click Text, Click Classes или Click ID для фильтрации нужных нам кликов. Это проще, но несет за собой риски: текст ссылки (эл. почта или номер телефона) могут поменяться, равно как класс или идентификатор ссылки. Моя конфигурация надежная — она будет работать с любыми номерами и адресами почты и её можно смело использовать на любых сайтах.

Сохраняем триггер и даем ему понятное название, чтобы не запутаться. Обычно, я обозначаю триггеры и теги по шаблону: тип_триггера — условие — это удобно, когда триггеров становится больше одного. Таким образом, однотипные триггеры имеют одинаковое начало в названии и наглядно группируются в общем списке.

Триггер для кликов по внешним ссылкам

Конфигурация триггера для кликов по внешним ссылкам
Конфигурация триггера для кликов по внешним ссылкам

Конфигурация второго триггера очень похожая:

  1. Тип триггера: Clicks - Just Links;
  2. Условия активации триггера: Some Link Clicks;
  3. Активировать триггер, если:
    • Click URL does not start with https://нашсайт.com;
    • Click URL does not match RegEx ^mailto:|^tel:.

Триггер будет фиксировать клики по ссылкам, которые не начинаются с адреса нашего сайта, то есть являются внешними. А второе правило активации исключает клики по tel- и mailto-ссылкам (формально, они тоже внешние).

Настраиваем теги

Остается настроить теги, которые отвечают за передачу событий в Google Analytics. У нас два триггера, поэтому создадим два тега: для ссылок по контактам и для внешних ссылок. Переходим в раздел Tags (Теги) и создадим два новых тега типа Google Analytics: Universal Analytics.

Тег для tel- и mailto-ссылок

Настройки тега для передачи события по клику на ссылки телефона и почты
Настройки тега для передачи события по клику на ссылки телефона и почты
  1. Track Type (Тип отслеживания): Event (Событие);
  2. Category (Категория): click_contact;
  3. Action (Действие): {{Click URL}};
  4. Label (Ярлык): {{Page Path}};
  5. Google Analytics Settings (Настройки Google Analytics): {{Tracking ID}} — идентификатор GA (у меня используется переменная);
  6. Firing Triggers (Триггеры активации): link clicks — mailto or tel — триггер, который мы создавали для tel- и mailto-ссылок.

Если нам не надо обнулять показатель отказов, задаем Non-Intercation Hit (Не взаимодействие) = True. Если оставить эту настройку на False, то нажатие по клику будет влиять на показатель отказов. В большинстве случаев, нам такое поведение не нужно, поэтому ставим True.

Тег для внешних ссылок

Настройки тега для передачи события по клику на внешние ссылки
Настройки тега для передачи события по клику на внешние ссылки
  1. Track Type (Тип отслеживания): Event (Событие);
  2. Category (Категория): click_outbound;
  3. Action (Действие): {{Click URL}};
  4. Label (Ярлык): {{Page Path}};
  5. Google Analytics Settings (Настройки Google Analytics): {{Tracking ID}} — идентификатор GA (у меня используется переменная);
  6. Firing Triggers (Триггеры активации): link clicks — outbound — триггер, который мы создавали для внешних ссылок.

Между собой теги отличаются только полем Category и триггерами, по которым они срабатывают. Отдельно распишу по полям в двойных фигурных скобках:

  • в поле Action используется переменная {{Click URL}} — вместо неё будет подставляться ссылка, по которой нажал пользователь,
  • в поле Label — так же стоит переменная {{Page Path}} — вместо неё будет подставляться страница, с которой пользователь перешел по ссылке.

Передавать {{Page Path}} не обязательно, но лишним не будет. Это позволит анализировать с каких страниц пользователи чаще переходят по внешним ссылкам или нажимают на контактные ссылки.

Проверка результатов в Гугл Аналитике

После сохранения и публикации изменений в Тег Менеджере, переходим в Гугл Аналитику, в раздел отчетов в режиме реального времени и проверяем результаты работы новых тегов:

Отчет по событиям в режиме реального времени
Отчет по событиям в режиме реального времени

Отмечу, что мой способ не является аксиомой, а лишь одним из вариантов отслеживания кликов. Его основное преимущество — универсальность — мы не привязываемся к каким-то конкретным параметрам, которые могут поменяться (текст, классы или идентификаторы). Эти настройки можно смело использовать на любом сайте (не забудьте изменить адрес сайта в настройках триггера для кликов по внешним ссылкам).

Добавляем определение устройства

Иногда, может понадобится отделить или отфильтровать клики в зависимости от устройства. Например, нажатие на кнопку телефона имеет смысл именно на мобильных устройствах. С обычных компьютеров и ноутбуков тоже можно совершать звонки, но это бывает сильно реже и такие нажатия не будут приводить к конверсии.

Устанавливаем скрипт

Скрипт для определения устройства
Скрипт для определения устройства

В первую очередь, установим скрипт, который будет определять устройство пользователя. Для этого заходим в раздел Variables (Переменные), создаем новую переменную типа Custom JavaScript и вводим сам скрипт:

function() {
  var ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
}

Скрипт будет записывать устройство в новую переменную getDeviceType.

Обновляем тег для tel- и mailto-ссылок

Теперь, добавляем переменную getDeviceType в наш тег. У меня переменная добавлена через нижнее подчеркивание к странице, на которой был клик по контактной ссылке, в поле Label. В Гугл Аналитике это выглядит так:

Тип устройства указан в поле Event Label
Тип устройства указан в поле Event Label, вместе с адресом страницы, на которой был клик по номеру телефона

Создаем цель в Гугл Аналитике

Остается дело техники. Если мы хотим отслеживать, например, клик по номеру телефона, который посетитель совершил с мобильного устройства, создаем новую цель в Гугл Аналитике и задаем следующие настройки:

Настройка цели в Гугл Аналитике
Настройка цели в Гугл Аналитике
  1. Тип цели: Event (Событие);
  2. Category (Категория) равно click_contact;
  3. Action (Действие) равно tel:+380674493606;
  4. Label (Ярлык) соответствует регулярному выражению mobile$.

Тут вся магия заключается в регулярном выражении mobile$. Символ доллара означает, что значение Label должно заканчиваться на mobile, то есть клики по номеру телефона, которые были совершены с компьютера учитываться не будут.


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

Агентство контекстной рекламы.

Специализируемся на контекстной рекламе в Гугле, таргетированной рекламе в Фейсбуке и Инстаграме, поисковой оптимизации.

Находимся в Киеве, удаленно работаем с клиентами из других городов и стран.

  • Агентство PPCBAR в Фейсбуке
  • Агентство PPCBAR в Телеграме
  • Агентство PPCBAR в Твиттере
  • Агентство PPCBAR в Ютубе
Сертифицирированное рекламное агентство Google