Отслеживание кликов по элементам сайта с помощью Google Tag Manager: Расширенное руководство

Отслеживание кликов по элементам сайта с помощью Google Tag Manager: Расширенное руководство

      Три основных способа взаимодействия с вашим сайтом — это просмотры страниц, скроллинг и клики по элементам. О двух первых способах я уже писал ранее. Сегодня мы поговорим о последнем.

      В диспетчере тегов клики делятся на два типа:

  • All Elements (Все элементы) — позволяет отслеживать клики по любым элементам, в том числе и ссылкам.
  • Just Links (Только ссылки) — позволяет отследить только клики по ссылкам.

      Сейчас у вас наверное возник логический вопрос: зачем использовать триггер типа Just Links, если есть тип All Elements?

     Связано это  с тем, как работает каждый из этих типов. Давайте разберем на примере.

      Как видите, в коде выше у нас есть три уровня:

  • кнопка с классом button

  • ссылка, которая ведет на страницу https://www.example.com/example

  • и текст Добавить в корзину

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

  • Just Links будет подниматься вверх по дереву DOM до тех пор, пока не достигнет элемента ссылки. И в нашем случае поднимется из элемента span на элемент a.
  • All Elements же не будет делать лишних движений и остановится на том элементе, по которому реально произошел клик — на span.

      Поскольку, как вы могли заметить, работа этих триггеров значительно отличается, материал выйдет в формате двух статей: по одной для каждого типа триггера. Начнем мы с триггера All Elements.

  1. Настройка триггера All Elements
  2. Встроенные переменные категории Click
  3. Настройка триггера для клика по определенному элементу
  4. Настройка тега события для отправки данных в Google Analytics
  5. Использование CSS селекторов для отслеживания кликов
  6. Сбор дополнительной информации с помощью переменной автособытия

Настройка триггера All Elements

      Первым делом перейдите в раздел триггеры и создайте триггер типа All Elements:Настройка триггера All Elements в Google Tag Manager

      Как видите, настроек в этом триггере нет. Единственное, что вы можете задать — это дополнительное условие срабатывания триггера. Но и там вариантов совсем немного: разве что указать, на какой странице вы хотите отслеживать клики. Это никуда не годится. Пользователь может сделать множество различных кликов, а нам, в большинстве своем, нужны какие-то  конкретные. Необходимую информацию триггер уже передает на уровень данных. Нам осталось только ее получить.Получение информации о клике с dataLayer

      Самый простой способ сделать это — использовать встроенные переменные категории 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)

      Включить описанные переменные можно в разделе встроенных переменных:Включение встроенных переменных с категории Click в GTM

Настройка триггера для клика по определенному элементу

      Теперь, когда в переменных хранится нужная информация, мы можем создавать триггеры для кликов по конкретным элементам на странице. Например, такой триггер для клика по элементу с идентификатором searchsubmit:Настройка триггера для клика по элементу с использованием переменной Click ID

      Или следующий триггер для клика по элементу с классом entry-button:Настройка триггера для клика по элементу с использованием переменной Click Classes

      Нужную информацию об идентификаторе или классе вы можете получить кликнув на нужный элемент и посмотрев данные в отладчике на вкладке Data Layer:Информация об элементе с dataLayer в отладчике GTM

      Или же напрямую в коде страницы:Получение информации об элементе с исходного кода страницы

      Чтобы увидеть информацию, кликните на нужном элементе правой кнопкой мыши и выберите пункт Просмотреть код (информация для браузера Chrome или схожий пункт меню для других браузеров)Просмотр кода страницы в браузере Chrome

Настройка тега события для отправки данных в Google Analytics

      Для отправки данных о совершенном клике в Google Analytics создайте стандартный тег события. Например, такой:Настройка тега события для отправки данных о клике в Google Analytics

Использование CSS селекторов для отслеживания кликов

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

      У каждого элемента на странице существует свой уникальный CSS-селектор. Это и позволяет обращаться к каждому элементу индивидуально. Есть два способы получения CSS-селектора:

  • Написать селектор самостоятельно: в таком случае селектор может охватывать как один, так и несколько элементов, в зависимости от условия.
  • Скопировать селектор с помощью инструментов разработчика в браузере. Такой селектор будет охватывать только один конкретный элемент.

      Остановимся на втором методе. Для этого кликните правой кнопкой мыши на нужном элементе и выберите пункт Просмотреть код:Просмотреть код в браузере Chrome

      Следующим шагом, кликните правой кнопкой мыши на фрагменте кода нужного элемента и выберите пункт Copy > Copy selector:Получение css селектора элемента в браузере

      Обратите внимание на то, что нужный элемент на странице в этот момент будет подсвечен.

      Теперь осталось добавить дополнительное условие в триггер и работа выполнена. При использовании CSS селекторов ваше условие всегда будет выглядеть следующим образом:

Click Element соответствует селектору CSS/не соответствует селектору CSS <селектор>

Настройка триггера для клика по элементу с помощью css селектора

Сбор дополнительной информации с помощью переменной автособытия

      Сбор информации с атрибутов id, class, target, href или action это конечно круто. Но иногда нужно получить значения другого атрибута. Например, alt. В этом нам поможет переменная типа Переменная автособытия:Настройка переменной автособытия в GTM

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

Вместо заключения

      В этой статье я попытался максимально детально описать процесс отслеживания кликов по элементам на сайте, но если у вас все таки остались вопросы — пишите их в комментариях. И, конечно же, не пропустите вторую часть статьи, которая будет посвящена отслеживанию кликов по ссылкам.