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

Материал обновлен 28 ноября 2023

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

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

GA4 по-умолчанию отслеживает клики и в кастомных отчетах там можно легко достать все, что связано с кликами: их количество, какой тип клика (внешняя ссылка или внутренняя), какая ссылка. Но бывают случаи, когда клик является конверсией. Тогда лучше отслеживать эту конверсию в Google Ads с помощью нативного трекинга, а не импортом из GA4.

Не стоит отслеживать формы по клику. Такой учет будет не точным и с большой погрешностью. Особенно с учетом того, что GA4 по-умолчанию считает каждую конверсию, а не одну на сеанс. То есть человек может нажать на кнопку 10 раз вхолостую и это даст 10 конверсий.

И так, начнем.

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

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

В этом материале я разбираю отслеживание кликов по ссылкам, поэтому и использую Click URL. Эта переменная предназначена только для кликов по ссылкам (те, которые <a href="..."> в HTML коде). Для отслеживания нажатий на другие элементы можно использовать Click Classes / Click ID / Click Text. Это актуально, если надо отслеживать нажатия по кнопкам — они обычно сверстаны через тег button и ссылками не являются (т.е. у них нет параметра href). Но это так, отступление от темы.

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

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

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

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

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

Тип триггера	Clicks — Just Links
Условия активации	Some Link Clicks
Условие триггера	Click URL matches RegEx ^mailto:|^tel:

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

Регулярные выражения обычно вызывают сложности у начинающих, поэтому рекомендую проверять их с помощью https://regex101.com. Если это слишком тяжело (на самом деле, нет), можете создать 2 триггера с условием “Click URL starts with” и далее уже mailto: и tel:.

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

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

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

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

Примечание из 2023: когда я писал этот материал изначально, GA4 еще не было, а в UA (Universal Analytics) клики по-умолчание не отслеживались, поэтому имело смысл настраивать это вручную. Теперь в GA4 это все есть, а в качестве конверсии в Google Ads или любой другой платформе сами по себе переходы по любым внешним ссылками никогда не бывают конверсий, поэтому в качестве примера разберу обычную внешнюю ссылку на Телеграм-бот из реального проекта.

Тип триггера	Clicks — Just Links
Условия активации	Some Link Clicks
Условие триггера	Click URL contains t.me/...

Как видите, все просто. И да, я использую “contains”, а не “equals” или “starts with”. Ссылка может быть со слешом в конце, а может и нет, поэтому условие равенства не всегда будет срабатывать. «Начинается с» тоже опасно, потому что протокол (https) может быть не указан, а ссылка будет работать.

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

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

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

У меня на скрине тег только для tel-ссылок. Если надо отслеживать еще и mailto-ссылки, то можно сделать два тега, при условии двух отдельных триггеров. Или, если вы используете один комбинированный триггер с регулярными выражениями, можно в качестве Event Name задать click_contact, а в Event Parameters использовать параметр link_url со значением {{Click URL}}.

По-умолчанию, GA4 и так отследит эти клики, но иногда удобнее иметь отдельное событие под специальные клики.

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

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

Проверка результатов

Тут без скриншотов, но стоит проверить через Tag Assistant и GA4 DebugView, что данные поступают корректно.

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

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

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

В первую очередь, установим скрипт, который будет определять устройство пользователя. Для этого заходим в раздел 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";
}

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

Обновляем теги

Добавляем параметр device_type со значением {{cjs – getDeviceType}} в Event Parameters.

Этот параметр — кастомный, можно использовать любой название для параметра, кроме тех, которые зарезервированы в GA4. Обязательно надо сделать еще одну вещь: добавить название параметра в GA4 (ищите раздел Custom definitions). По итогу должно быть так:

Результат

В GA4 получаем вот такую картину:

Но, как я уже говорил, это можно сделать и возможностями самого GA4, если поиграть с функционалом. Плюс моего GTM-подхода в том, что у нас есть готовые триггеры и можно использовать их для передачи данных не только в GA4, но и в другие системы.