Три основні способи взаємодії з вашим сайтом – це перегляди сторінок, скролінг та кліки на елементи. Про два перші способи я вже писав раніше. Сьогодні ми поговоримо про останнє.
У диспетчері тегів кліки поділяються на два типи:
- 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. У цьому нам допоможе змінна типу Auto-Event Variable:
Аналогічно ви зможете отримати значення інших атрибутів.
Замість висновку
У цій статті я спробував максимально детально описати процес відстеження кліків на елементи на сайті, але якщо у вас таки залишилися питання – пишіть їх у коментарях. І, звичайно, не пропустіть другу частину статті, яка буде присвячена відстеженню кліків на посилання.
