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

Как правильно отслеживать клики по кнопкам с помощью диспетчера тегов Google? Как передавать эту информацию в инструменты аналитики? Прочитав этот материал до конца, у вас больше не останется вопросов о том, как это сделать.

Вступление

Одной из самых популярных и важных настроек на сайте (наряду с отслеживанием отправки форм) является отслеживание кликов по кнопкам. Отправка формы, подписка на рассылку, скачивание файла, добавление товара в корзину, заказ обратного звонка - везде посетители вашего сайта вынуждены взаимодействовать с кнопками.

Клик по кнопке может быть таким же конверсионным действием, как и звонок, заявка, заказ. И его тоже нужно отслеживать. Однако сам факт клика нельзя считать ключевой (основной) целью на сайте, вокруг которого вы будете строить свою маркетинговую стратегию, отчетность, перераспределять бюджет между рекламными источниками и оптимизировать рекламные кампании, поскольку его выполнение служит только для того, чтобы получать промежуточные (вспомогательные) значения на пути к основным.

Например, добавление товара в корзину и дальнейшее заполнение способа оплаты в интернет-магазине не является последним шагом и влияет на конечный результат косвенно, поскольку он не означает, что человек достигнет основной цели в виде оформленного заказа. Но информация о том, что человек отвалился на этапе заполнения полей доставки и не завершил покупку – очень ценна для нас. Она позволит нам улучшить эту страницу и повысить коэффициент конверсии. Поэтому цели в веб-аналитике принято делить на:

• основные (звонок, заявка, заказ);
• вспомогательные (добавление товара в корзину, форма с вопросом, общение в чате, просмотр видео и т.д.).

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

Примечание: подробнее о том, какие бывают цели в Universal Analytics и как их настроить, читайте в этом материале, а для Google Analytics 4 публикация доступна по этой ссылке.

С точки зрения веб-аналитики клик по кнопке - это событие. В отличие от целей, которые задаются прямо в интерфейсе Google Analytics, события настраиваются как в интерфейсе, так и с помощью специальной конструкции, которую необходимо добавить в код вашего сайта. И это далеко не самый простой процесс, поскольку требует от вас знаний программирования и понимания принципов построения такой конструкции для событий в Universal Analytics или для счетчика Global Site Tag.

Например, для библиотеки analytics.js специальная конструкция для отслеживания кнопки может иметь вид:

А для библиотеки gtag.js такой формат:

В Google Analytics 4 нет таких компонентов, как в Universal Analytics (Категория, Действие, Ярлык, Ценность), а сама конструкция отслеживания схожа с gtag.js, поэтому для все той же кнопки ее можно записать так:

Подробнее о событиях в GA4 читайте в моем блоге:

• Введение в события Google Analytics 4
• Автоматически регистрируемые события
• Улучшенная статистика
• Рекомендуемые события
• Специальные события
• Еще про события Google Analytics 4

В Яндекс.Метрике отследить клик по кнопке гораздо проще, поскольку разработчики с недавнего времени добавили отдельный тип цели, который так и называется Клик по кнопке.

Благодаря этому нововведению вам не нужно устанавливать GTM, разбираться в CSS-селекторах элементов и уметь правильно писать код для отслеживаемой кнопки. Выбранный элемент легко настраивается в вашем браузере на нужной веб-странице:

Все вышеперечисленное справедливо только в том случае, если вы не используйте в своей работе Google Tag Manager. В рамках данного материала мы с вами будем учиться отслеживать клики по кнопкам именно с помощью диспетчера тегов Google, поскольку он позволяет очень просто настроить (без привлечения разработчика!) практически любое отслеживание на вашем сайте, не только клики по кнопкам, и передавать эти данные в разные счетчики аналитики (Facebook, Яндекс, Google, Mail и т.д.)

Основные этапы настройки

Для отслеживания кликов по кнопкам с помощью Google Tag Manager нам необходимо (подходит для 90% проектов в интернете):

1. включить встроенные переменные;
2. создать триггер-помощник Клик - Все элементы;
3. определить уникальный идентификатор отслеживаемой кнопки;
4. настроить окончательный триггер;
5. создать теги для систем аналитики (если их несколько);
6. проверить корректность передачи данных;
7. опубликовать контейнер GTM;
8. посмотреть данные в отчетах.

Этапом №0 можно отметить выбор отслеживаемой кнопки. То есть вы должны заранее определить для себя элементы, которые вы планируете отслеживать с помощью Google Tag Manager. И я предполагаю, что перед тем, как изучать данный материал, вы уже сделали это.

Давайте рассмотрим каждый шаг подробнее.

1. Активация встроенных переменных

Перед тем, как отслеживать клики по какой-либо кнопке, я рекомендую активировать встроенные переменные типа Клики. Это даст нам возможность в дальнейшем создать правильное условие для триггера активации, который будет запускать тег и передавать данные в счетчики веб-аналитики (Яндекс.Метрику, Google Analytics и т.д.).

Для этого в Google Tag Manager перейдите в раздел Переменные и напротив Встроенные переменные нажмите на кнопку Настроить:

В открывшемся окне активируйте все переменные из блока Клики:

Переменные в этой категории используются для отслеживания кликов по элементам вашего сайта. Разделить их можно на две составляющие:

1. переменные, которые возвращают значения при клике только по ссылкам (linkClick);
2. переменные, которые возвращают значения при клике по любым элементам, в том числе и по ссылкам (click).

Эти переменные выполняют следующие функции:

• Click Element - возвращает строку со значением атрибута того HTML-элемента, по которому кликнул пользователь. Извлекается из ключа gtm.element;
• Click Classes - возвращает строку со значением атрибута класса элемента (class). Извлекается из ключа gtm.elementClasses;
• Click ID - возвращает строку со значением атрибута идентификатора элемента (id). Извлекается из ключа gtm.elementId;
• Click Target - возвращает строку со значением атрибута target, по которому был совершен клик. Извлекается из ключа gtm.elementTarget;
• Click URL - возвращает строку со значением атрибута href (или action), по которому был выполнен клик. Извлекается из ключа gtm.elementUrl;
• Click Text - возвращает строку со значением атрибута textContent / innerText, по которому кликнул пользователь. Извлекается из ключа gtm.elementText.

Чуть ниже мы подробнее остановимся на этих переменных.

2. Создание триггера-помощника "Клик - Все элементы"

Этот шаг является вспомогательным. Мы еще не знаем, какое условие следует задать для активации триггера конкретной кнопки, но уже можем активировать триггер типа "Клик - Все элементы", чтобы начать отслеживать различные состояния переменных.

Для этого в Google Tag Manager перейдите в раздел Триггеры и создайте триггер типа Клик - Все элементы (Click - All Elements):

В качестве условия активации триггера выберите Все клики. Поскольку этот триггер-помощник, нас интересует отслеживание всех кликов, которые мы будем совершать в процессе настройки. И только после того, как мы точно определим уникальный идентификатор для отслеживаемой кнопки (пункт 3), к этому триггеру добавим дополнительное условие.

Уже на этом этапе вы можете активировать режим предварительного просмотра Google Tag Manager, перейти на сайт, кликнуть по отслеживаемой кнопке и посмотреть, какие значения приняли активированные на предыдущем шаге встроенные переменные.

В качестве примера я буду использовать свой тестовый сайт graphanalytics.ru.

После того, как я кликнул по зеленой кнопке Консультация, в режиме отладки на шкале событий отобразилось событие Click (gtm.click), на уровень данных (dataLayer) записалась информация после совершения этого события, а встроенные переменные вернули следующие значения (API Call):

Они извлекаются из ключей с префиксом gtm. (Click Element - gtm.element, Click Classes - gtm.elementClasses, Click ID - gtm.elementId и т.д.). Для удобства анализа вы можете перейти на вкладку Variables (Переменные) и посмотреть состояния переменных там:

Как мы видим, у данной кнопки GTM определил класс (Click Classes - button hp-button-1 slide-button w-button green fancybox), но не нашел идентификатора элемента (пустой Click ID). Эта информация очень полезна, поскольку благодаря ей мы можем создать дополнительное условие активации триггера, взяв за основу класс элемента, который был автоматически определен диспетчером тегов Google. Вот как бы выглядело это условие окончательно:

И это мы еще не приступали к 3 пункту!

Важно: если вы копируете значение какой-либо переменной из режима отладки GTM, то делайте это без кавычек. Они обозначают лишь тип переменной (строка/string) и не являются частью идентификатора, класса, селектора и т.д.

Надеюсь, теперь вы понимаете зачем создавать триггер-помощник на клики по всем элементам еще до этапа определения уникального идентификатора кнопки. Мы можем просто:

• активировать встроенные переменные типа Клики;
• создать триггер типа Клик - Все элементы;
• совершить клик по нужной нам кнопке и в режиме предварительного просмотра зафиксировать состояние, которое принимают эти переменные в момент совершения события Click.

В результате нам сам Google Tag Manager подскажет, какие атрибуты есть у данной кнопки и что можно использовать в качестве условия активации триггера.

3. Определение уникального идентификатора отслеживаемой кнопки

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

Однако я все же рекомендую проверить себя и удостовериться, что GTM правильно определил атрибут кнопки, что он на странице уникален (если вы хотите отслеживать только одну кнопку, а одинаковый класс задан для 5-6 разных кнопок, то триггер и тег могут срабатывать не так, как вам хотелось бы), и что клик по любой области внутри отслеживаемой кнопки будет приводить к активации триггера и тега. Это важно, потому что бывают ситуации, когда необходимо отследить не только элемент верхнего уровня, но и все вложенные элементы, входящие в него. Подробнее о том, как это сделать, разберем чуть позже.

Определение уникального идентификатора отслеживаемой кнопки - самый важный и сложный этап всей настройки. Разобравшись с ним, выполнить все последующие шаги не составит труда.

Я для себя выделил следующий алгоритм отслеживания кликов по кнопкам, который использую при настройке любого проекта:

1. если у элемента есть id, то в качестве условия активации триггера использовать Click ID содержит/равно
2. если у элемента есть class, то в качестве условия активации триггера использовать Click Classes содержит/равно
3. если нет 1 и 2, то в качестве условия активации триггера использовать Click Element соответствует селектору CSS
4. если напротив Click Element ничего не показывает или показывает что-то в скобках […], то использовать решение из этой статьи.

Почему так? Все дело в том, что идентификатор элемента, как правило, уникален на странице, то есть других таких же элементов с тем же id на странице быть не должно. Поэтому если у кнопки есть id, то рекомендуется использовать его в качестве приоритетного условия. Далее идет класс элемента. Он может быть задан сразу к нескольким элементам на странице (например, 5 кнопок на странице для разных форм, но с одинаковым class), поэтому при использовании его в триггере GTM необходимо сначала проверить к каким элементам он принадлежит, а далее уже настраивать.

Чаще всего бывает, что у кнопки нет ни идентификатора, ни класса, поэтому приходится находить CSS-селектор кнопки и использовать его с переменной Click Element. Какой вывод можно сделать? В 90% случаев для условия активации триггера по конкретной кнопке используются Click ID, Click Classes или Click Element.

Но перед тем, как начать поиск уникального идентификатора отслеживаемой кнопки, рекомендую ознакомиться с материалами, посвященными CSS-селекторам:

• CSS-селекторы в GTM. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах
• Отслеживание вложенных элементов с помощью универсального селектора *

Без начальных знаний HTML/CSS/JavaScript и понимая основ работы с CSS-селекторами, вам будет сложно определить конечную конструкцию для отслеживаемой кнопки. Надеюсь, что мои другие статьи в блоге хотя бы немного прольют свет на эту тему.

Итак, для того, чтобы определить уникальный идентификатор кнопки, вам необходимо в браузере открыть консоль разработчика. Для Google Chrome это можно сделать с помощью сочетания клавиш Ctrl + Shift + I или F12. Перейдите на вкладку Elements, нажмите на значок инспектирования (1), затем левой кнопкой мыши выделите ту кнопку, которую планируете отслеживать (2), и далее посмотрите на исходный код страницы, который стал подсвечен:

Это и есть HTML-код отслеживаемой кнопки:

У нее есть два атрибута:

• href -  путь к файлу, ссылка #popup-audit, которая открывает модальное окно;
• class - класс элемента button hp-button-1 slide-button w-button green fancybox.

Именно этот класс (button hp-button-1 slide-button w-button green fancybox) определил Google Tag Manager, когда мы просто активировали встроенные переменные и создали триггер на отслеживание кликов по всем элементам (см. выше). Теперь важно удостовериться, что кнопка с таким классом на странице одна. Для этого вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где button hp-button-1 slide-button w-button green fancybox - класс (class) вашей кнопки.

Метод getElementsByClassName() выдаст вам список дочерних элементов, которые имеют данный класс:

Если вы видите только один элемент с индексом 0, то это значит, что кнопка с таким классом на странице одна, и в данном примере мы можем использовать этот класс для создания уникального условия активации триггера. То есть все будет точно также, как и раньше: Условие активации триггера - Некоторые клики - Click Classes равно button hp-button-1 slide-button w-button green fancybox

В вашем случае код для кнопки, идентификатор и класс будут другими. В моем примере у кнопки был только класс, но не было идентификатора. У вас может быть по-другому. Например, если у кнопки задан id, то в консоли разработчика при инспектировании элемента вы увидите данный атрибут:

Тогда в условии активации триггера будет использоваться встроенная переменная Click ID:

Примечание: в триггере Google Tag Manager идентификатор или класс нужно вводить в том регистре, в котором он прописан на странице вашего сайта. Если есть заглавные буквы, значит пишите точно так же.

Чтобы проверить, является ли данный идентификатор уникальным на странице, вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где Subscribe - идентификатор (id) вашей кнопки.

Метод getElementById() выдаст вам ссылку на элемент, который имеет данный идентификатор:

Хорошо, когда у кнопки есть класс или идентификтор. Или то и другое одновременно. Но что делать, когда ни Google Tag Manager в режиме отладки не смог вернуть значения в Click Classes и Click ID, ни вы при инспектировании элемента не обнаружили признаков id и class?

Тогда мы спускаемся по алгоритму на третий пункт и начинаем искать CSS-селектор отслеживаемой кнопки. Сделать это можно несколькими способами:

1. использовать специальное расширение для браузера;
2. проинспектировать элемент и скопировать в консоли разработчика селектор.

Если вы планируете использовать первый вариант, тогда установите по ссылке расширение Copy CSS Selector (для Google Chrome). Оно позволяет быстро найти уникальный селектор для любого элемента на странице. Просто активируйте его, а затем перейдите на свой сайт. Кликнув правой кнопкой мыши по отслеживаемой кнопке, вы увидите в контекстном меню новый раздел Copy CSS Selector:

CSS-селектор данной кнопки будет скопирован в буфер обмена, чтобы его можно было вставить в любой текстовый редактор и перепроверить. Для моего примера он имеет вид section#home a.button.hp-button-1.slide-button.w-button.green.fancybox

Если вы не желаете устанавливать дополнительные расширения для своего браузера, вы можете получить селектор кнопки через инспектирование элемента и консоль разработчика. По аналогии с определением идентификатора и класса элемента, откройте консоль разработчика, перейдите на вкладку Elements, нажмите на значок инспектирования (1), затем левой кнопкой мыши выделите ту кнопку, которую планируете отслеживать, и в исходном коде сайта нажмите на HTML-элемент кнопки (2) правой кнопкой мыши и выберите Copy (3) - Copy selector (4):

Селектор кнопки также будет скопирован в буфер обмена. Для моей зеленой кнопки Консультация он имеет вид #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

Как видите, они получились разными при использования расширения и консоли разработчика. Более того, если вы будете использовать другой браузер (например, Opera, а не Google Chrome), то можете получить еще один вариант написания селектора для одной и той же кнопки. Это нормально и не стоит за это переживать. Просто каждый из них находит оптимальный вариант конструкции. Вот так выглядит селектор для той же кнопки в браузере Mozilla Firefox: a.button:nth-child(1)

Чтобы проверить, является ли данный селектор уникальным на странице, вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где:

• #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox
• a.button:nth-child(1)
• section#home a.button.hp-button-1.slide-button.w-button.green.fancybox

-> CSS-селектор отслеживаемой кнопки.

Метод querySelectorAll() выдаст вам список (NodeList) всех найденных элементов документа, которые соответствуют указанному селектору:

Если вы видите только один элемент с индексом 0, то это значит, что кнопка с таким селектором уникальна и одна на странице, и в данном примере мы можем использовать этот селектор для создания уникального условия активации триггера: Некоторые клики - Click Element соответствует селектору CSS

Именно такое условие является наиболее распространенным при отслеживании кликов по кнопкам, так как часто бывает, что у кнопок нет ни идентификатора, ни класса. Зато селектор у элемента страницы есть всегда. Но если у кнопки есть и идентификатор, и класс, тогда условие активации триггера в GTM вы можете настроить одним из любых 3 способов:

1. Click ID равно/содержит;
2. Click Classes равно/содержит;
3. Click Element соответствует селектору CSS.

При настройке Google Tag Manager иногда попадаются элементы, клики по которым нельзя просто так отследить, поскольку у них может не быть ни класса (.class), ни идентификатора (#id). А если перейти в режим предварительного просмотра, то увидим там одно из таких значений:

Чтобы понять о чем Google Tag Manager пытается нам сообщить, необходимо вернуться к определению DOM. Document Object Model (DOM) - это объектная модель документа, древовидная структура, содержащая элементы, из которых состоит страница сайта. У всех на сайте есть элемент body [HTMLBodyElement], неотъемлемая часть HTML-разметки, или, например, один или несколько элементов div [HTMLDivElement]. Обработчик кликов GTM всегда возвращает элемент, по которому кликнул текущий пользователь. Типов объектов (их еще называют интерфейсы веб API) большое количество. Подробнее с ними вы можете ознакомиться в официальной документации Mozilla.

Элементы DOM являются объектами. Их трудно представить в текстовом виде, поскольку они имеют свойства и методы, а также являются производными от родительских объектов и могут иметь дочерние узлы. Поэтому браузер пытается сообщить вам, какой тип объекта возвращается.

В этом случае мы можем использовать отслеживание кликов с помощью уровня данных (dataLayer) и такой конструкции:

, где:

• document.querySelectorAll('CSS-селектор'); - метод возвращает список всех найденных элементов документа, которые соответствуют указанному селектору (см. выше). А elem - это переменная, которая объявляется и которой мы присваиваем ей это значение;
• for (var i = 0; i < elem.length; i++) - создается цикл, который будет искать все элементы в документе, которые соответствуют заданному селектору. Запускается столько раз, сколько есть элементов, не больше их количества (length);
• elem[i].addEventListener('click', function(){ dataLayer.push({'event': 'customClick'}); - для каждого элемента создается метод addEventListener с событием click и функцией обработчика, в которой прописывается специальное событие customClick в уровне данных;
• customClick - произвольное название события (можно задать другое).

Другими словами: при клике на любой элемент, содержащий заданный селектор, будет срабатывать пользовательское событие customClick, которое мы сможем использовать в качестве триггера активации. Подробнее о том, как отслеживать клики по кнопкам с помощью уровня данных, читайте в отдельной публикации.

Но и это еще не все. Вспомните эпизоды из своей практики, когда вам необходимо было настроить отслеживание клика по кнопке, а у вас не получалось. Вроде бы все делали правильно: нашли нужный элемент, скопировали его CSS-селектор, создали триггер, добавили условие активации, настроили тег. Но в режиме отладки вы все равно не видите срабатываемых событий и данные в инструменты аналитики не отправляются. Почему так происходит? Возможно, дело во вложенности элементов.

Мне не хотелось бы еще дублировать текст из другой статьи, поскольку в материале, посвященному отслеживанию вложенных элементов с помощью подстановочного знака (*), достаточно подробно обозначена проблема и предложено решение. Я лишь хотел бы добавить то, что интернет-маркетологи не всегда корректно определяют уникальный идентификатор элемента. Точнее, только для одного уровня (самого верхнего), но совершенно забывают про вложенные элементы.

Давайте разберем конкретный пример. На сайте есть 2 кнопки, которые находятся внутри одного блока. Его код выглядит так:

Предположим, веб-аналитик хочет отслеживать клик по левой кнопке. С помощью инспектирования элемента он находит класс кнопки .button-left и планирует использовать его в качестве условия активации триггера.

В Google Tag Manager он задает условие Click Classes содержит button-left:

Но текущий триггер не активируется, и тег не срабатывает... В чем проблема? Можно ли было брать класс button-left, когда у самой кнопки чуть ниже есть значение другого класса fancybox-n? Можно, но этот класс не уникален и присутствует еще в нескольких кнопках на странице, а нам нужно отследить только клик по одной кнопке.

Да, можно использовать класс более верхнего уровня, коим является button-left. Но тогда еще нужно не забыть задать условие для отслеживания всех вложенных элементов с помощью универсального селектора со звездочкой (*). В результате условие Click Classes содержит button-left преобразится в более сложное условие Click Element соответствует селектору CSS .button-left, .button-left *

Именно такой способ отслеживания подробно описан в статье про универсальный селектор.

Переменная автоматического события

Атрибуты id, class, target, href (или action) собираются благодаря встроенным переменным типа Клики, которые мы активировали на самом первом шаге настройки. Но иногда требуется получить значения другого атрибута кнопки. В этом может помочь пользовательская переменная типа Переменная автоматического события.

Например, на всем том же сайте graphanalytics.ru есть несколько других кнопок, у которых добавлены дополнительные атрибуты. Например, data-tariff. В этом атрибуте отображается название услуги компании - Веб-аналитика, Контекстная-реклама, Консультация.

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

Чтобы это сделать, создайте переменную типа Переменная автособытия. В качестве типа переменной задайте Атрибут элемента (Element Attribute), а в названии атрибута (Attribute name) укажите тот атрибут, который планируете отслеживать. В моем примере - это data-tariff.

Введите название переменной и сохраните ее. В режиме отладки после клика по кнопке с данным атрибутом вы увидите его значение:

После этого вы можете создать триггер с условием активации переменной автособытия, где в качестве значения будет указано что-то конкретное. Например, отслеживать только клики по Контекстная-реклама и не отслеживать для Веб-аналитика и Консультация. В этом случае мы уже используем не Click ID, Click Classes или Click Element, а нашу переменную автоматического события:

Аналогичным образом вы сможете получить значения других атрибутов.

4. Настройка триггера

Мы с вами разобрали практически все способы отслеживания кликов по кнопке (исключения составляют только клики в теге <iframe>). Теперь необходимо создать окончательный триггер для отслеживания кликов по кнопке, который будет запускать теги для систем аналитики.

Если вы последовательно следовали моего алгоритму и этапом настройки, то создавать новый триггер необязательно. Достаточно просто изменить условие в триггере-помощнике. В зависимости от того, какой уникальный идентификатор элемента вы нашли на предыдущем шаге, такое условие активации триггера вы и задаете.

В моем примере для зеленой кнопки - это класс элемента, а условие Click Classes равно button hp-button-1 slide-button w-button green fancybox:

Сохраните триггер активации и переходим к следующему этапу настройки.

В Google Tag Manager есть еще один триггер, который используется для отслеживания кликов. Он называется Клик - Только ссылки (Just Links) и позволяет отслеживать события только клики по ссылкам. Почему он важен для нас?

Иногда кнопки могут содержать ссылки и вести на другую страницу или сайт. Например, на главной странице моего блога есть кнопка Подписаться, которая ведет в Telegram канал:

Клики по кнопкам с ссылками рекомендуется отслеживать с помощью триггера Клик - Только ссылки. Активировав его, и кликнув по такой кнопке, в режиме предварительного просмотра вы увидите какие значения приняли встроенные переменные для события Link Click (gtm.linkClick):

Самым простым вариантом задания условия активации для триггера является использование встроенной переменной Click URL. Она как раз принимает значение ссылки, по которой пользователь переходит после клика. В данном примере https://t.me/clicksider. Например, Click URL содержит t.me/clicksider:

Принципиальное отличие между двумя триггерами (Клик - Все элементы (Click) и Клик - Только ссылки (Link Click)) заключается в том, что после клика по элементу они сработают по-разному:

• Клик - Все элементы дойдет до самого последнего элемента в структуре DOM (объектной модели документа), по которому фактически был совершен клик;
• Клик - Только ссылки будет искать элемент ссылки, коим в HTML является тег <a>.

Вернемся к кнопке Подписаться. Блок с ней имеет такой код:

При использовании двух триггеров для отслеживания кликов мы получим разные результаты:

• элемент <span> для Клик - Все элементы;
• элемент <a> для Клик - Только ссылки.

5. Создание тегов для систем аналитики

Если вы планируете передавать информацию о совершенном клике в разные системы аналитики (Яндекс.Метрику, Universal Analytics, Google Analytics 4, Facebook Pixel и т.д.), то количество тегов должно быть равно количеству этих систем, а сам триггер активации будет единым для всех.

Тег для Яндекс.Метрики

Зайдите в ваш счетчик Яндекс.Метрики и в разделе Цели создайте цель с условием JavaScript-событие. Укажите произвольный идентификатор цели (в моем примере greenButton) и название цели:

В самом низу отобразится итоговой код цели для сайта, который необходимо скопировать. Сохраните цель и вернитесь в Google Tag Manager.

В разделе Теги создайте тег типа Пользовательский HTML и вставьте в него скопированный из цели Яндекс.Метрики код, предварительно завернув его в тег <script></script>.

В качестве триггера активации выберите триггер, созданный на предыдущем шаге. Сохраните тег.

Тег для Universal Analytics

Создайте тег типа Google Аналитика: Universal Analytics с типом отслеживания Событие. Добавьте произвольные значения в Категория и Действие:

В качестве триггера активации выберите тот же триггер, что и для Яндекс.Метрики. Сохраните тег.

Чтобы в Universal Analytics отслеживать не только события, но еще и конверсии по этому действию, вы можете создать цель с типом Событие, где в качестве категории и действия укажите те же самые значения, что и в теге Universal Analytics:

Тег для Google Analytics 4

Создайте тег типа Google Аналитика: событие GA 4. Выберите тег конфигурации и укажите название события для вашего действия:

В качестве триггера активации выберите тот же триггер, что и для Яндекс.Метрики, и для Universal Analytics. Сохраните тег.

Аналогичным образом настраиваются теги для Facebook Pixel, Mail.ru и ВКонтакте. Вам только нужно выяснить какую конструкцию имеет та или иная система для передачи события. Подробнее об этом написано в официальной документации каждого поставщика услуг.

6. Проверка корректности работы

Для каждой системы аналитики существуют свои способы и приемы отладки. Я рекомендую использовать следующие инструменты:

• режим предварительного просмотра в Google Tag Manager;
• отчет В режиме реального времени для Universal Analytics;
• DebugView для Google Analytics 4;
• расширение для браузера GTM/GA Debug;
• расширение для браузера Yandex Metrica Debugger;
• расширение для браузера Google Analytics Debugger.

Самое первое, что нужно сделать - это убедиться, что триггер в режиме отладки Google Tag Manager срабатывает и все теги активируются:

Если диспетчер тегов Google показывает активацию тегов, то значит, что вы все настройки выполнены правильно. Теперь необходимо идти в каждый отдельный инструмент аналитики и смотреть как данные передаются в него.

Например, для Universal Analytics в режиме реального времени событие отображается так (согласно заданным настройкам по категории и действию события):

А в Google Analytics 4 так:

Проверить передачу события в Яндекс.Метрику можно с помощью расширения Yandex Metrica Debugger, которое работает на отдельной вкладке в консоли разработчика.

Если после клика на шкале событий вы увидите метод reachGoal с вашим идентификатором цели, значит через некоторое время эта информация отобразится в отчетах Яндекс.Метрики.

7. Публикация контейнера Google Tag Manager

В завершение не забудьте опубликовать контейнер GTM, чтобы настройки применились ко всем пользователям вашего сайта.

8. Данные в отчетах

После публикации контейнера отслеживания кликов по кнопкам пользователей будут передаваться в инструменты аналитики. Посмотреть их можно будет в стандартных отчетов:

• для Яндекс.Метрики в отчете Конверсии;
• для Universal Analytics в отчете Поведение - События - Лучшие события;
• для Google Analtytics 4 в отчете Конфигурация - События.