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

Материал обновлен 28 ноября 2023 и адаптирован к последней версии Google Analytics 4.

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

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

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

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

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

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

Gtm Clicks 1
Встроенная переменная Click URL

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

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

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

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

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

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

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

Gtm Clicks 2
Это пример триггера только для tel-ссылок, но в таблице ниже конфиг для tel- и mailto
Тип триггера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 или любой другой платформе сами по себе переходы по любым внешним ссылками никогда не бывают конверсий, поэтому в качестве примера разберу обычную внешнюю ссылку на Телеграм-бот из реального проекта.

Gtm Clicks 3
Конфигурация триггера для кликов по внешней ссылке
Тип триггера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-ссылок

Gtm Clicks 4

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

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

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

Gtm Clicks 5
Настройки тега для передачи события по клику на внешние ссылки

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

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

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

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

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

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

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

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

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

Gtm Clicks 7

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

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

Gtm Clicks 8

Результат

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

Gtm Clicks 9

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



4 responses

  1. Владимир Avatar
    Владимир

    Отличная статья

  2. Сергей Avatar
    Сергей

    Спасибо за статью. Очень полезно.

  3. Dim Avatar
    Dim

    Спасибо за статью. Как вы отслеживаете клик на чат Whatsapp? При наведении на иконку Whatsapp показывает ссылку (URL) wa.me/… , но при клике фактический URL api.whatsapp.com
    Подставлял обе ссылки, но ни одна не срабатывает корректно. Делал по вашему примеру, но вместо t.me ставил урлы Whatsapp

    1. roman Avatar

      Dim, клики на Whatsapp отслеживаются аналогично. Конечный URL, куда попадает пользователь не важен — всегда ориентируемся непосредственно на ссылку в HTML коде страницы. Моя конфигурация 100% рабочая, в конце 2023 все обновлял и повторно тестировал, когда делал скриншоты.

      Проверьте ваши настройки:

      1. Убедитесь, что используете триггер Click – Just Links (Только ссылки), а не Clicks – All Elements (Все элементы).

      2. Убедитесь, что используете переменную Click URL, правильно указаны URL и условие (содержит / начинается с). Проверьте протокол http / https, закрывающий слеш. Легче всего работать с условием «содержит» и задать просто домен “wa.me”.

      3. В режиме отладки (Tag Assistant) у вас должно появляться событие “Link Click”, выберите его и в разделе Output найдите тег, который должен срабатывать, нажмите на него и там будет табличка с условиями. Если какое-то условие не соответствует, тег не будет активироваться и напротив условия будет красный крестик — это даст понимание, что нужно править.

      Вот пример того как оно должно быть, когда все условия срабатывают.

Leave a Reply

Your email address will not be published. Required fields are marked *