Материал обновлен 28 ноября 2023 и адаптирован к последней версии Google Analytics 4.
Разберем как отслеживать клики и переходы с помощью Google Tag Manager и передавать эту информацию в Google Analytics 4. Есть как минимум два сценария, когда это актуально:
- для отслеживания кликов по ссылкам tel и mailto, то есть ссылкам, которые предшествуют звонку и письму;
- для отслеживания переходов по внешним ссылкам, например: в соцсети компании или в карту проезда в Гугле.
Вообще, GA4 по-умолчанию отслеживает клики и в кастомных отчетах там можно легко достать все, что связано с кликами: их количество, какой тип клика (внешняя ссылка или внутренняя), какая ссылка. Но бывают случаи, когда клик является конверсией. Тогда лучше отслеживать эту конверсию в Google Ads с помощью нативного трекинга, а не импортом из GA4.
Не нужно отслеживать формы по клику. Такой учет будет не точным и с большой погрешностью. Особенно с учетом того, что GA4 по-умолчанию считает каждую конверсию, а не одну на сеанс.
И так, начнем.
Настраиваем переменную Click URL в GTM
Заходим в Google Tag Manager, в левом меню переходим в раздел Variables (Переменные). Тут будет список всех переменных, которые доступны. Если в списке Click URL нет, нажимаем Configure (Настроить) и в выезжающем меню проставляем галочку возле Click URL. После этого она появится в списке и мы сможем её использовать в Триггерах и Тегах, об этом далее.
В этом материале я разбираю отслеживание кликов по ссылкам, поэтому и использую Click URL. Эта переменная предназначена только для кликов по ссылкам (те, которые <a href="...">
в HTML коде). Для отслеживания нажатий на другие элементы можно использовать Click Classes/ Click ID/ Click Text. Это актуально, если надо отслеживать нажатия по кнопкам — они обычно сверстаны через тег button
и ссылками не являются. Но это так, отступление от темы.
Настраиваем триггеры в GTM
Теперь, нам необходимо обозначить те клики, которые нас интересуют. Для этого необходимо перейти в раздел Triggers (Триггеры) и задать условия, по которым будут фильтроваться нужные клики. Разберем две категории кликов:
- по ссылкам tel (звонки) и mailto (письма);
- по внешним ссылкам.
Триггер для кликов по ссылкам 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, но и в другие системы.
Leave a Reply