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

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

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

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

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

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

Заходим в 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 (Только ссылки).

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. В Гугл Аналитике это выглядит так:

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

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

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

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