Почему страница на русском?
Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛
чт, 23 мая 2019 г.
Отслеживание кликов по элементам сайта с помощью Google Tag Manager: Расширенное руководство
Три основных способа взаимодействия с вашим сайтом - это просмотры страниц, скроллинг и клики по элементам. О двух первых способах я уже писал ранее. Сегодня мы поговорим о последнем.
В диспетчере тегов клики делятся на два типа:
- 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
Первым делом перейдите в раздел триггеры и создайте триггер типа 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-селектора:
- Написать селектор самостоятельно: в таком случае селектор может охватывать как один, так и несколько элементов, в зависимости от условия.
- Скопировать селектор с помощью инструментов разработчика в браузере. Такой селектор будет охватывать только один конкретный элемент.
Иногда несколько элементов могут соответствовать одному селектору. Чтобы убедиться, что вы скопировали именно тот селектор, который охватывает все нужные вам элементы, вы можете воспользоваться моим собственным расширением PROANALYTICS. Этот инструмент подсвечивает на странице элементы, которые соответствуют заданному CSS-селектору.
Остановимся на втором методе. Для этого кликните правой кнопкой мыши на нужном элементе и выберите пункт Просмотреть код:
Следующим шагом, кликните правой кнопкой мыши на фрагменте кода нужного элемента и выберите пункт Copy > Copy selector:
Обратите внимание на то, что нужный элемент на странице в этот момент будет подсвечен.
Теперь осталось добавить дополнительное условие в триггер и работа выполнена. При использовании CSS селекторов ваше условие всегда будет выглядеть следующим образом:
Click Element соответствует селектору CSS/не соответствует селектору CSS <селектор>
Сбор дополнительной информации с помощью переменной автособытия
Сбор информации с атрибутов id, class, target, href или action это конечно круто. Но иногда нужно получить значения другого атрибута. Например, alt. В этом нам поможет переменная типа Переменная автособытия:
Аналогичным образом вы сможете получить значения иных атрибутов.
Вместо заключения
В этой статье я попытался максимально детально описать процесс отслеживания кликов по элементам на сайте, но если у вас все таки остались вопросы - пишите их в комментариях. И, конечно же, не пропустите вторую часть статьи, которая будет посвящена отслеживанию кликов по ссылкам.
Вебаналитик, Маркетолог