Три основных способа взаимодействия с вашим сайтом — это просмотры страниц, скроллинг и клики по элементам. О двух первых способах я уже писал ранее. Сегодня мы поговорим о последнем.
В диспетчере тегов клики делятся на два типа:
- All Elements (Все элементы) — позволяет отслеживать клики по любым элементам, в том числе и ссылкам.
- Just Links (Только ссылки) — позволяет отследить только клики по ссылкам.
Сейчас у вас наверное возник логический вопрос: зачем использовать триггер типа Just Links, если есть тип All Elements?
Связано это с тем, как работает каждый из этих типов. Давайте разберем на примере.
<div class="button"> <a href="https://www.example.com/example"> <span>Добавить в корзину</span> </a> </div>
Как видите, в коде выше у нас есть три уровня:
- кнопка с классом button
<div class="button">
- ссылка, которая ведет на страницу https://www.example.com/example
<a href="https://www.example.com/example">
- и текст Добавить в корзину
<span>Добавить в корзину</span>
Если я сделаю клик по тексту Добавить в корзину, то каждый из триггеров будет работать по-разному:
- Just Links будет подниматься вверх по дереву DOM до тех пор, пока не достигнет элемента ссылки. И в нашем случае поднимется из элемента span на элемент a.
- All Elements же не будет делать лишних движений и остановится на том элементе, по которому реально произошел клик — на span.
Поскольку, как вы могли заметить, работа этих триггеров значительно отличается, материал выйдет в формате двух статей: по одной для каждого типа триггера. Начнем мы с триггера All Elements.
- Настройка триггера All Elements
- Встроенные переменные категории Click
- Настройка триггера для клика по определенному элементу
- Настройка тега события для отправки данных в Google Analytics
- Использование CSS селекторов для отслеживания кликов
- Сбор дополнительной информации с помощью переменной автособытия
Настройка триггера All Elements
Первым делом перейдите в раздел триггеры и создайте триггер типа All Elements:
Как видите, настроек в этом триггере нет. Единственное, что вы можете задать — это дополнительное условие срабатывания триггера. Но и там вариантов совсем немного: разве что указать, на какой странице вы хотите отслеживать клики. Это никуда не годится. Пользователь может сделать множество различных кликов, а нам, в большинстве своем, нужны какие-то конкретные. Необходимую информацию триггер уже передает на уровень данных. Нам осталось только ее получить.
Самый простой способ сделать это — использовать встроенные переменные категории Click. Давайте с ними познакомимся.
Встроенные переменные категории Click
Вся дополнительная информация о совершенном клике содержится в следующих переменных:
- Click Element — возвращает HTML элемент по которому был совершен клик. (Другими словами возвращает значение ключа gtm.element с dataLayer)
- Click Classes — возвращает строковое значение класса элемента (значение ключа gtm.elementClasses).
- Click ID — возвращает строковое значение идентификатора элемента (значение ключа gtm.elementId).
- Click Target — возвращает строку со значением атрибута target элемента автособытия (значение ключа gtm.elementTarget)
- Click URL — возвращает строку со значением атрибута href или action элемента автособытия (значение ключа gtm.elementUrl).
- Click Text — возвращает строку со значением атрибута textContent / innerText элемента автособытия (значение ключа gtm.elementText)
Включить описанные переменные можно в разделе встроенных переменных:
Настройка триггера для клика по определенному элементу
Теперь, когда в переменных хранится нужная информация, мы можем создавать триггеры для кликов по конкретным элементам на странице. Например, такой триггер для клика по элементу с идентификатором searchsubmit:
Или следующий триггер для клика по элементу с классом entry-button:
Нужную информацию об идентификаторе или классе вы можете получить кликнув на нужный элемент и посмотрев данные в отладчике на вкладке Data Layer:
Или же напрямую в коде страницы:
Чтобы увидеть информацию, кликните на нужном элементе правой кнопкой мыши и выберите пункт Просмотреть код (информация для браузера Chrome или схожий пункт меню для других браузеров)
Настройка тега события для отправки данных в Google Analytics
Для отправки данных о совершенном клике в Google Analytics создайте стандартный тег события. Например, такой:
Использование CSS селекторов для отслеживания кликов
Иногда очень сложно определить отличительную черту элемента, чтобы написать нужное условие. Например, на странице есть несколько элементов с одинаковыми свойствами, а нас интересует какой-то конкретный. В таком случае на помощь приходят CSS-селекторы.
У каждого элемента на странице существует свой уникальный CSS-селектор. Это и позволяет обращаться к каждому элементу индивидуально. Есть два способы получения CSS-селектора:
- Написать селектор самостоятельно: в таком случае селектор может охватывать как один, так и несколько элементов, в зависимости от условия.
- Скопировать селектор с помощью инструментов разработчика в браузере. Такой селектор будет охватывать только один конкретный элемент.
Остановимся на втором методе. Для этого кликните правой кнопкой мыши на нужном элементе и выберите пункт Просмотреть код:
Следующим шагом, кликните правой кнопкой мыши на фрагменте кода нужного элемента и выберите пункт Copy > Copy selector:
Обратите внимание на то, что нужный элемент на странице в этот момент будет подсвечен.
Теперь осталось добавить дополнительное условие в триггер и работа выполнена. При использовании CSS селекторов ваше условие всегда будет выглядеть следующим образом:
Click Element соответствует селектору CSS/не соответствует селектору CSS <селектор>
Сбор дополнительной информации с помощью переменной автособытия
Сбор информации с атрибутов id, class, target, href или action это конечно круто. Но иногда нужно получить значения другого атрибута. Например, alt. В этом нам поможет переменная типа Переменная автособытия:
Аналогичным образом вы сможете получить значения иных атрибутов.
Вместо заключения
В этой статье я попытался максимально детально описать процесс отслеживания кликов по элементам на сайте, но если у вас все таки остались вопросы — пишите их в комментариях. И, конечно же, не пропустите вторую часть статьи, которая будет посвящена отслеживанию кликов по ссылкам.
