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

Відстеження кліків за елементами сайту за допомогою 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.

  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 , targe t, href або action це звичайно круто. Але іноді потрібно отримати значення іншого атрибуту. Наприклад, alt . У цьому нам допоможе змінна типу Змінна автоподія:Налаштування змінної автоподії в GTM

Аналогічно ви зможете отримати значення інших атрибутів.Збір додаткової інформації за допомогою змінної автоподії

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

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