Отслеживание кликов по одинаковым элементам на странице с помощью Google Tag Manager

У вас на сайте в рамках одной страницы размещено несколько одинаковых элементов, и вы бы хотели отслеживать клики по ним? Не просто отслеживать, но и отличать один элемент от другого, чтобы вести более детальный анализ в Google Analytics и Яндекс.Метрике? Тогда давайте рассмотрим практический пример такой реализации с использованием диспетчера тегов Google.

Классическая задача - на странице в трех местах размещен кликабельный номер телефона компании. В шапке:

В блоке на середине страницы:

В подвале:

Как в этом случае можно отследить клик по каждому из них?

Такое отслеживание можно настроить по-разному. Например, если телефон кликабельный и имеет тег а с атрибутом href, то вы можете использовать триггер типа Клик - Только ссылки для активации тега и передачи этой информации в инструменты аналитики, а в качестве дополнительного условия задать переменную Click URL содержит tel.

Или использовать триггер Клик - Все элементы и другую переменную, допустим, Click Text содержит или равно 8 (812) 900-02-25:

Примечание: если вы хотите научиться отслеживать клики по кнопкам с помощью Google Tag Manager и передавать эту информацию в инструменты аналитики (Google Analytics, Яндекс.Метрику и т.д.), то вам обязательно нужно прочитать это руководство.

Можно пойти и по более сложному пути, настроив отслеживание через селекторы HTML-элементов, указав для каждого номера телефона (для шапки, страницы и подвала) собственный селектор и объединив их все в одно общее условие с помощью Click Element соответствует селектору CSS и комбинаторов (перечисление селекторов через запятую):

В таком исполнении вы так же сможете отследить клик по любому из трех номеров телефонов на странице. Как видите, вариантов отслеживания одного и того же элемента множество, и все они рабочие.

Но если вам необходимо не просто отслеживать факт клика, а различать эти элементы? Чтобы в аналитике вы смогли провести детальный анализ по месту клика на странице:

• в шапке сайта;
• в середине страницы;
• в подвале сайта;

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

Но при выполнении клика по телефону в режиме предварительного просмотра Google Tag Manager такая переменная не будет принимать нужного нам значения:

Вы будете видеть тип данных undefined (переменная объявлена, но ей не присвоено никакого значения). Следовательно, передать данные в Google Analytics или Яндекс.Метрику по месту клика на странице вы не сможете.

Присвоить входящим значением номер телефона то же не получится, поскольку он одинаков для всех трех местоположений. Нужно найти какой-то уникальный элемент или атрибут на странице, за который можно было зацепиться и который можно указать в качестве входных данных для каждого из них, чтобы точно идентифицировать шапку, форму и подвал. Если бы у этих элементов были бы разные классы, то можно было бы попробовать зацепиться за переменную Click Classes. Но опять же, как правило, для одинаковых элементов на странице класс задается один и тот же. Может быть и такое, что у данных элементов класс отсутствует вовсе, или у одного HTML-элемента он присутствует, а у другого элемента его нет.

Вариант с таблицей регулярных выражений - верное направление, но только в качестве входных данных должна быть другая переменная. Все дело в том, что значение в переменной Click Element - object (объект), а не строка (string), как может казаться на первый взгляд. И он основан на переменной уровня данных (dataLayer) gtm.element:

Увидеть полностью это в режиме отладки GTM не получится. Поэтому в браузере вам нужно открыть консоль разработчика (клавиша F12 для Google Chrome) и перейти на вкладку Console. Параллельно открыв режим предварительного просмотра Google Tag Manager, совершим клик по одному из номеру телефонов.

Теперь на вкладке Console мы можем написать конструкцию dataLayer и нажать Enter:

Нажав на черный треугольник, вы откроете список всех dataLayer.push событий, которые произошли на странице:

Событие клика по телефону - это gtm.click, поскольку в качестве триггера активации в данном примере используется Клик - Все элементы. Раскроем его:

Я точно знаю, что gtm.click - это нужное мне событие, потому что я один раз кликнул по номеру телефона. Если на вашей шкале событий будут и другие event'ы, то вы можете ориентироваться на порядковый номер события в режиме отладки, а затем сопоставить его с номером в консоли разработчика:

В режиме отладки GTM отсчет идет с 1, а в консоли разработчика с 0. Consent Initialization и Initialization не учитываются, поэтому различия в порядковых номерах можно составлять до 3 единиц.

Когда произошел клик, на уровень данных передались значения некоторых переменных - gtm.elementClasses, gtm.elementId, gtm.elementTarget, gtm.elementUrl.

Все они имеют строковый тип данных (string). И только переменная уровня данных gtm.element является объектом (object) и имеет еще вложенность. Нажав еще раз на черный треугольник напротив переменной, вы увидите множество других ключей и их знаний, к которым у вас есть доступ:

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

Посмотрите на свойства parentElement (возвращает родительский элемент текущего узла) или parentNode (возвращает родителя определенного элемента DOM-дерева). Выбрав его, вы можете проверить, подсвечивается ли он на странице. И если да, то какой именно:

Для моего примера parentNode со значением div.header__end-phone подсветил верный узел в структуре DOM-дерева. Как видите, рядом с parentNode тоже есть черный треугольник, значит можно "провалиться" внутрь этого объекта:

В результате нам нужно найти конечное свойство, которое не имеет вложенности, но имеет какое-то значение, за которое можно зацепиться. Таким свойством в этом примере может быть className:

Поскольку мы хотим отслеживать клики по номеру телефона в трех разных местах на странице, то нам нужно проверить аналогичным способом и другие элементы, а также убедиться, что в других вариантах в parentNode свойство className будет принимать уникальное значение объекта gtm.element, которое мы сможем использовать в таблице регулярных выражений.

Для клика по телефону в блоке на середине страницы в свойство className значение отсутствует:

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

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

Это значение вы можете вставить из буфера обмена в консоль разработчика, чтобы убедиться, что оно было верно скопировано. Вы должно увидеть что-то похожее:

От parentNode мне пришлось спуститься еще два раза через offsetParent (возвращает ближайшего предка элемента, который имеет позиционирование отличное от статичного) до className. А используя точечную нотацию, итоговое значение, которое мы скопировали, будет трансформировано в gtm.element.parentNode.offsetParent.className.

Именно такую конструкцию (у вас конечный путь к ключу объекта gtm.element будет другим) нужно вставить в новую переменную типа Переменная уровня данных:

Она будет принимать нужное значение в зависимости от клика по телефону.

Для:

• шапки сайта - land__header;
• середины страницы - phone;
• подвала сайта - container flex;

Теперь эту переменную уровня данных можно использовать в таблице регулярных выражений - входные данные land__header, phone и container flex заменив на header, contact и footer соответственно:

Чтобы проверить текущую настройку, перейдем в режим отладки диспетчера тегов Google и на странице кликнем на номер телефона. На шкале событий выберем нужный event и на вкладке Variables посмотрим какое значение принимает переменная в данный момент:

Поочередно проделаем это для всех оставшихся элементов на странице. Для шапки сайта переменная вернула значение header, для середины страницы - contact, а для подвала - footer. Точно так, как мы указали в таблице регулярных выражений. Все работает правильно!

Именно эту итоговую таблицу вы в дальнейшем можете использовать в теге для передачи данных в Яндекс.Метрику в качестве параметра визита или в Google Analytics 4 в качестве параметра события.