Скролінг одна з основних подій, які роблять користувачі на сайті. Відстеження цієї дії дозволяє вам глибше зрозуміти, як відвідувачі взаємодіють із контентом на сторінці. В рамках сьогоднішньої статті ми розберемо функціонал диспетчера тегів Google, який допоможе нам із цим.
- Базове відстеження скролінгу
- Визначаємо, чи впливає скролінг на показник відмов
- Різні пороги скролінгу для різних сторінок
- Змінюємо поріг скролінгу залежно від довжини сторінки
Базове відстеження скролінгу
Відстеження скролінгу за допомогою вбудованого в GTM тригера – одне з найпростіших завдань. Зараз ви зможете у цьому переконатися. Нам знадобиться:
- Налаштування тригера скролінгу ;
- Активація вбудованих змінних категорії Scrolling ;
- Тег для передачі даних у Google Analytics .
Налаштування тригера скролінгу
При створенні нового тригера вибираємо тип Scroll Depth (Глибина прокручування) із категорії User Engagement (Взаємодія користувача).
Google Tag Manager дозволяє відстежувати як вертикальне, так і горизонтальне прокручування. Але, оскільки на більшості сайтів є тільки вертикальна (тобто прокрутка зверху вниз), ми зупинимося саме на ній.
Умовно налаштування тригера можна поділити на три частини:
- Вибір напряму прокручування. У ньому окрім напрямку можна вибрати одиницю виміру порогових значень: відсотки або пікселі. А також вказати ці значення. Якщо ви хочете перерахувати кілька значень – розділяйте їх комами.
- Момент включення тригера. Дозволяє активувати тригер після настання однієї з подій завантаження сторінки: Page View, DOM Ready або Window Load . Завдяки цьому параметру ви можете вибрати момент, коли ваш контент на сторінці повністю завантажено. Найімовірніше це буде DOM Ready або Window Load. Якщо ви не знаєте, яку саме подію вибрати – використовуйте Window Load.
- Додаткові умови спрацьовування тригера. У цьому блоці можна задати будь-які додаткові умови за аналогією з іншими тригерами. Наприклад, якщо ви хочете відстежувати скролінг тільки на головній сторінці вашого сайту, умова буде такою:
Активація вбудованих змінних категорій Scrolling
Щоб активувати вбудовані змінні, перейдіть до розділу Змінні та натисніть кнопку Configure (Налаштувати):
Дані, які збираються в момент досягнення порогового значення, зберігаються у трьох вбудованих змінних:
- Scroll Depth Threshold – у цій змінній ви зможете знайти граничне значення, якого досяг користувач. Наприклад, у нашому випадку це буде одне з таких значень: 25, 50, 75, 100.
- Scroll Depth Units – зберігається значення одиниці виміру порогового значення: percent або pixels.
- Scroll Direction– напрямки прокручування: vertical или horizontal.
Тег для передачі даних у Google Analytics
І, на самкінець, вже знайомий нам тег передачі події в Google Analytics :
- Категорія – прописуємо значення Scrolling;
- Дія – вказуємо змінну Scroll Depth Threshold, у якій зберігається граничне значення, досягнуте відвідувачем. В кінці можна також додати знак “%” або інший текст, щоб не забути одиницю виміру;
- Ярлик – вказуємо значення сторінки, де сталося подія. Це можна зробити за допомогою двох вбудованих змінних: Page Hostname – у якій зберігається назва домену та Page Path – зі значенням шляху сторінки;
- Чи не взаємодія – вказуємо True, якщо ви не хочете, щоб скролл сторінки на 25% впливав на показник відмов.
Не забувайте також вказати змінну Google Analytics з відповідними налаштуваннями та тригер, який ми створили раніше.
Визначаємо, чи впливає скролінг на показник відмов
У варіанті налаштування вище ми за замовчуванням задали значення параметра Не взаємодія як True. Але що, якщо ми хочемо, щоб якесь із порогових значень впливало на показник відмов , наприклад – 75% та 100%, а решта ні?
Щоб налаштувати таку подію, нам знадобиться власна змінна типу Lookup Table (Таблиця пошуку). Називаємо її LT – Scrolling Non-Interaction та налаштовуємо наступним чином:
- У першому блоці ми вказуємо змінну з досягнутим граничним значенням – Scroll Depth Threshold, яку ми аналізуватимемо.
- У другому, з боку Input – порогові значення, у яких ви хочете відправляти подію, що впливає на показник відмов. Для них із боку Output ми вкажемо значення false.
- В останньому блоці задаємо значення за промовчанням – true, яке відображатиметься для інших порогових значень.
Не забудьте використовувати створену змінну в полі Не взаємодія:
Різні пороги скролінгу для різних сторінок
Залежно від типу сторінки, вам може знадобитися відстежувати різні граничні значення скролінгу. Наприклад, для головної сторінки свого блогу я хочу використовувати граничні значення 25, 50, 75, 100. Для сторінки Чим я можу бути вам корисним – значення 50, 100. А для решти сторінок – 10, 25, 50, 75, 100.
Є два підходи до вирішення цього завдання:
- створити кілька тригерів, де в додаткових умовах спрацьовування тригера вказуватимете перелік сторінок. Наприклад, для головної прикладу вище:
- використовувати зміну користувача типу Таблиця пошуку.
Саме другий спосіб ми й розберемо детальніше. Ми вже розібрали, як працювати з таким типом змінних. Тільки цього разу будемо аналізувати шлях сторінки замість порогу скролінгу:
Тепер створену змінну потрібно помістити в поле замість зазначених раніше порогових значень:
Змінюємо поріг скролінгу залежно від довжини сторінки
На самкінець, розберемо ситуацію, коли нам необхідно змінювати порогові значення динамічно, залежно від довжини сторінки. Це особливо актуально, якщо у вас на сайті є сторінки, розмір яких дорівнює одному екрану. Google Tag Manager у такому разі передає всі граничні значення одночасно при перегляді першого екрана.
Щоб виправити це, використовуємо змінну типу JavaScript для користувача з наступним кодом:
function() {
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
var ratio = heightOfViewport / heightOfPage;
var fallbackDepths = '101';
if (ratio < 0.2) {
verticalScrollDepths = '20,40,60,80,100';
} else if (ratio < 0.25) {
verticalScrollDepths = '25,50,75,100';
} else if (ratio < 0.5) {
verticalScrollDepths = '50,75,100';
} else if (ratio < 0.75) {
verticalScrollDepths = '75,100';
} else {
verticalScrollDepths = fallbackDepths;
}
return verticalScrollDepths;
}
Розберемо, що тут відбувається. У цьому блоці ми обчислюємо висоту нашої сторінки:
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
Далі обчислюємо висоту першого екрану:
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
У змінну ratio записуємо коефіцієнт, який показує співвідношення розміру першого екрана до висоти сторінки:
var ratio = heightOfViewport / heightOfPage;
Трохи далі саме на основі цього коефіцієнта ми і формуватимемо пороги скролінгу.
var fallbackDepths = '101';
У фрагменті коду вище вказуємо значення на випадок, коли ми не хочемо, щоб скролінг тригер спрацьовував. Наприклад, коли розмір сторінки дорівнює одному екрану.
У наступному фрагменті з if ми задаємо порогові значення скролінгу в залежності від значення змінної ratio . Цей блок можна змінювати на свій розсуд.
Створену змінну необхідно використовувати в полі Відсотки в тригері Глибини прокручування.
Інші налаштування відправки події аналогічно пункту Базове відстеження скролінгу.
Замість висновку
Відстеження глибини прокручування є одним з основних способів зрозуміти, як користувачі взаємодіють із контентом на вашій сторінці. Серед усіх методів, описаних у цій статті, вибирайте той, який підходить вам найбільше. Якщо ж у вас залишилися питання щодо відстеження скролінгу – пишіть про них у коментарях.
PS Ще одним прикладом взаємодії користувачів із контентом є перегляд відео. Про те, як відстежити такі дії через GTM, читайте у статті.
