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

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

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

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

Для настройки отслеживания кликов нам понадобятся Google Tag Manager (GTM) и Google Analytics (GA).

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

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

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

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

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

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

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

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

Переходим в раздел Triggers (Триггеры) и нажимаем New (Создать). Появится окно создания триггера, где нам необходимо выбрать тип триггера: Just Links (Только ссылки).

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

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

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

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

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

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

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

По аналогичному сценарию создаем второй триггер.

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

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

  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, вместе с адресом страницы, на которой был клик по номеру телефона

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

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

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

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

Поделиться

Комментарий

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

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

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

Специализируемся на контекстной рекламе
Google Ads (AdWords).

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

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