Скролінг одна з основних подій, які роблять користувачі на сайті. Відстеження цієї дії дозволяє вам глибше зрозуміти, як відвідувачі взаємодіють із контентом на сторінці. В рамках сьогоднішньої статті ми розберемо функціонал диспетчера тегів 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. Цей блок можна змінювати на свій розсуд.
Створену змінну необхідно використовувати в полі Відсотки в тригері Глибини прокручування.
Інші налаштування відправки події аналогічно пункту Базове відстеження скролінгу.
Замість висновку
Відстеження глибини прокручування є одним з основних способів зрозуміти, як користувачі взаємодіють із контентом на вашій сторінці. Серед усіх методів, описаних у цій статті, вибирайте той, який підходить вам найбільше. Якщо ж у вас залишилися питання щодо відстеження скролінгу – пишіть про них у коментарях.
P.S. Ще одним прикладом взаємодії користувачів із контентом є перегляд відео. Про те, як відстежити такі дії через GTM, читайте у наступній статті.
