Разберем как отслеживать клики и переходы с помощью Google Tag Manager и передавать эту информацию в Google Analytics. Есть как минимум два сценария, когда это актуально:
Отслеживать отправку форм по нажатию на кнопку «Отправить» не рекомендую. Хотя, такой способ и будет работать, статистика будет неточной: пользователь может нажать на кнопку до заполнения самой формы — событие в Google Analytics зафиксируется, а по факту форма отправленой не окажется.
Для настройки отслеживания кликов нам понадобятся Google Tag Manager (GTM) и Google Analytics (GA).
Заходим в Google Tag Manager, в левом меню переходим в раздел Variables (Переменные). Тут будет список всех переменных, которые доступны. Если в списке Click URL нет, нажимаем Configure (Настроить) и в выезжающем меню проставляем галочку возле Click URL. После этого она появится в списке и мы сможем её использовать в Триггерах и Тегах, об этом далее.
Мы разбираем отслеживание кликов по ссылкам, поэтому и используем Click URL. Эта переменная предназначена только для кликов по ссылкам. Для отслеживания нажатий на другие элементы можно использовать Click Classes/ID/Text. Это актуально, если надо отслеживать нажатия по кнопкам — они обычно сверстаны через тег button
и ссылками не являются.
Теперь, нам необходимо обозначить те клики, которые нас интересуют. Для этого необходимо перейти в раздел Triggers (Триггеры) и задать условия, по которым будут фильтроваться нужные клики. Мы будем отслеживать две категории кликов:
Переходим в раздел Triggers (Триггеры) и нажимаем New (Создать). Появится окно создания триггера, где нам необходимо выбрать тип триггера: Just Links (Только ссылки).
Clicks — Just Links (Клик — Только ссылки)
;Some Link Clicks (Некоторые клики по ссылкам)
;^mailto:|^tel:
.В конфигурации мы используем регулярное выражение, при котором будет проходить проверка на наличие «mailto:» или «tel:» в начале самой ссылки.
Символ ^ (карет) значит, что «mailto:» или «tel:» должны идти именно в начале ссылки. Символ | (пайп) — это логическое или.
Регулярные выражения обычно вызывают сложности у начинающих, поэтому рекомендую проверять их с помощью https://regex101.com.
Можно обойтись и без регулярных выражений, если использовать Click Classes/ID/Text для фильтрации нужных нам кликов. Это проще, но несет за собой риски: текст ссылки (эл. почта или номер телефона) могут поменяться, равно как класс или идентификатор ссылки. Моя конфигурация на регулярных выражениях не зависит от номера или адреса почты — она будет работать с любыми данными и на всех сайтах.
Сохраняем триггер и даем ему понятное название, чтобы не запутаться. Обычно, я называю триггеры по шаблону: «тип триггера — условие» — это удобно, когда их становится больше одного. Таким образом, однотипные триггеры имеют одинаковое начало в названии и наглядно группируются в общем списке.
По аналогичному сценарию создаем второй триггер.
Конфигурация второго триггера очень похожая:
Clicks — Just Links (Клик — Только ссылки)
;Some Link Clicks (Некоторые клики по ссылкам)
;https://нашсайт.com
;^mailto:|^tel:
.Триггер будет фиксировать клики по ссылкам, которые не начинаются с адреса нашего сайта, то есть являются внешними. А второе правило активации исключает клики по tel- и mailto-ссылкам (технически, они тоже внешние), триггер для которых мы настраивали выше.
Остается настроить теги, которые отвечают за передачу событий в Google Analytics. У нас два триггера, поэтому создадим два тега: для ссылок по контактам и для внешних ссылок. Переходим в раздел Tags (Теги) и создадим два новых тега типа Google Analytics: Universal Analytics
.
Event (Событие)
;click_contact
;{{Click URL}}
;{{Page Path}}
;{{Tracking ID}}
— идентификатор GA (у меня используется переменная);link clicks — mailto or tel
— триггер, который мы создавали для tel- и mailto-ссылок.Если нам не надо обнулять показатель отказов, задаем Non-Intercation Hit (Не взаимодействие) = True
. Если оставить эту настройку на False
, то нажатие по клику будет влиять на показатель отказов. В большинстве случаев, нам такое поведение не нужно, поэтому ставим True
.
Event (Событие)
;click_outbound
;{{Click URL}}
;{{Page Path}}
;{{Tracking ID}}
— идентификатор GA (у меня используется переменная);link clicks — outbound
— триггер, который мы создавали для внешних ссылок.Между собой теги отличаются только полем Category и триггерами, по которым они срабатывают. Отдельно распишу по полям в двойных фигурных скобках:
{{Click URL}}
— вместо неё будет подставляться ссылка, по которой нажал пользователь,{{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
.
Теперь, добавляем переменную getDeviceType
в наш тег. У меня переменная добавлена через нижнее подчеркивание к странице, на которой был клик по контактной ссылке, в поле Label. В Гугл Аналитике это выглядит так:
Остается дело техники. Если мы хотим отслеживать, например, клик по номеру телефона, который посетитель совершил с мобильного устройства, создаем в Google Analytics цель нажатие на кнопку и задаем следующие настройки:
Event (Событие)
;click_contact
;tel:+380674493606
;mobile$
.Тут вся магия заключается в регулярном выражении mobile$
. Символ доллара означает, что значение Label должно заканчиваться на mobile, то есть клики по номеру телефона, которые были совершены с компьютера учитываться не будут.
Отличная статья
Спасибо за статью. Очень полезно.