Відстеження кліків на елементи сайту за допомогою Google Tag Manager: Розширений посібник

Три основні способи взаємодії з вашим сайтом - це перегляди сторінок, скролінг та кліки на елементи. Про два перші способи я вже писав раніше. Сьогодні ми поговоримо про останнє.

У диспетчері тегів кліки поділяються на два типи:

• All Elements (Всі елементи) – дозволяє відстежувати кліки на будь-які елементи сайту, у тому числі й посилання.
• Just Links (Лише посилання) – дозволяє відстежити лише кліки на посилання.

Зараз у вас напевно постало логічне питання: навіщо використовувати тригер типу Just Links, якщо є тип All Elements (Всі елементи)?

Пов'язано це з тим, як працює кожен із цих типів. Давайте розберемо з прикладу.

Як бачите, у коді вище у нас є три рівні:

• кнопка з класом 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 4
• Використання селекторів 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:

Або прямо в коді сторінки:

Щоб побачити інформацію, клацніть правою кнопкою миші на потрібному елементі і виберіть пункт Inspect (інформація для браузера Chrome або схожий пункт меню для інших браузерів)

Налаштування тега події для надсилання даних у Google Analytics 4

Для надсилання даних про виконаний клік в Google Analytics 4 створіть стандартний тег події. Наприклад, такий:

Використання селекторів CSS для відстеження кліків

Іноді дуже складно визначити атрибут елемента, щоб написати потрібну умову. Наприклад, на сторінці є кілька елементів з однаковими властивостями, а нас цікавить якийсь конкретний. У такому випадку на допомогу приходять CSS-селектори.

Кожен елемент на сторінці має свій унікальний CSS-селектор. Це дозволяє звертатися до кожного елемента індивідуально. Є два способи отримання CSS-селектора:

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

Зупинимося на другому методі. Для цього клацніть правою кнопкою миші на потрібному елементі та виберіть пункт Inspect:

Наступним кроком, клацніть правою кнопкою миші на фрагменті коду потрібного елемента та виберіть Copy > Copy selector:

Зверніть увагу, що потрібний елемент на сторінці в цей момент буде підсвічений.

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

Click Element відповідає селектору CSS/не відповідає селектору CSS <селектор>

Збір додаткової інформації за допомогою змінної автоподії

Збір інформації з атрибутів id, class, target, href або action це звичайно круто. Але іноді потрібно отримати значення іншого атрибуту. Наприклад, alt. У цьому нам допоможе змінна типу Auto-Event Variable:

Аналогічно ви зможете отримати значення інших атрибутів.

Замість висновку

У цій статті я спробував максимально детально описати процес відстеження кліків на елементи на сайті, але якщо у вас таки залишилися питання - пишіть їх у коментарях. І, звичайно, не пропустіть другу частину статті, яка присвячена відстеженню кліків на посилання.

Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.