вт, 21 травня 2019 р.
Відстеження скролінгу на сторінках за допомогою Google Tag Manager: Розширений посібник
Оригінальна стаття була написана 21 травня 2019 року і йшлося в ній про передачу даних до Google Analytics Universal, але при переїзді блогу на нову CMS я вирішив оновити матеріал, до актуальної версії Google Analytics 4.
Скролінг одна з основних подій, які роблять користувачі на сайті. Відстеження цієї дії дозволяє вам глибше зрозуміти, як відвідувачі взаємодіють із контентом на сторінці. Хоча GA4 по замовчуванню вміє відслідковувати скрол на 90% за допомогою івентів розширеної статистики, дуже часто цього недостатньо, аби нормально проаналізувати взаємодію зі сторінкою. Тому у цій статті більш детально поговоримо про можливості відслідковування скролінгу за допомогою GTM.
Базове відстеження скролінгу
Відстеження скролінгу за допомогою вбудованого в GTM тригера - одне з найпростіших завдань. Зараз ви зможете у цьому переконатися. Нам знадобиться:
Налаштування тригера скролінгу
При створенні нового тригера вибираємо тип Scroll Depth (Глибина прокручування) із категорії User Engagement (Взаємодія з користувачем).
Google Tag Manager дозволяє відстежувати як вертикальне, так і горизонтальне прокручування. Але, оскільки на більшості сайтів є тільки вертикальне (тобто прокрутка зверху вниз), ми зупинимося саме на ньому.
Умовно налаштування тригера можна поділити на три частини:
- Вибір напряму прокручування. У ньому окрім напрямку можна вибрати одиницю виміру порогових значень: відсотки або пікселі. А також вказати ці значення. Якщо ви хочете перерахувати кілька значень - розділяйте їх комами.
- Enable this trigger on (Умова для ввімкнення активатора). Дозволяє активувати тригер після настання однієї з подій завантаження сторінки: Page View, DOM Ready або Window Load. Завдяки цьому параметру ви можете вибрати момент, коли ваш контент на сторінці буде повністю завантажено, щоб система могла правильно розрахувати довжину сторінки. Найімовірніше це буде DOM Ready або Window Load. Якщо ви не знаєте, яку саме подію вибрати – використовуйте Window Load.
- This trigger fires on (Запуск тригера). У цьому блоці можна задати будь-які додаткові умови за аналогією з іншими тригерами. Наприклад, якщо ви хочете відстежувати скролінг тільки на головній сторінці вашого сайту, умова буде такою:
Активація вбудованих змінних категорії Scrolling
Щоб активувати вбудовані змінні, перейдіть до розділу Variables (Змінні) та натисніть кнопку Configure (Налаштувати):
Дані, які збираються в момент досягнення порогового значення скролу, вказаного в налаштуваннях тригеру, зберігаються у трьох вбудованих змінних:
- Scroll Depth Threshold - у цій змінній ви зможете знайти граничне значення, якого досяг користувач. Наприклад, у нашому випадку це буде одне з таких значень: 25, 50, 75, 100.
- Scroll Depth Units – зберігається значення одиниці виміру порогового значення: percent або pixels.
- Scroll Direction- напрямки прокручування: vertical (вертикальне) або horizontal (горизонтальне).
Тег для передачі даних у Google Analytics 4
І, насамкінець, вже знайомий нам тег передачі події в Google Analytics 4:
- Measurement ID (Ідентифікатор показника) – вказуємо ідентифікатор вашого вебсайту в GA4; Щоб його знайти треба перейти в Admin (Адміністратор) > Data collection and modification (Збирання й змінення даних) > Data Streams (Потоки даних) > Web (Веб) > Потрібний вам потік даних > Measurement ID (Ідентифікатор показника)
- Event Name (Назва події) - вказуємо назву
scroll_та обираємо в області праворуч від поля змінну Scroll Depth Threshold, у якій зберігається граничне значення, досягнуте відвідувачем.
Не забувайте також вказати тригер, який ми створили раніше.
Різні пороги скролінгу для різних сторінок
Залежно від типу сторінки, вам може знадобитися відстежувати різні граничні значення скролінгу. Наприклад, для головної сторінки свого блогу я хочу використовувати граничні значення 25, 50, 75, 100. А для решти сторінок – 10, 25, 50, 75, 100.
Є два підходи до вирішення цього завдання:
- створити кілька тригерів, де в додаткових умовах спрацьовування тригера, вказуватимете перелік сторінок. Наприклад, для головної з прикладу вище:
- використовувати кастомну змінну типу Lookup Table (Таблиця пошуку).
Саме другий спосіб ми й розберемо детальніше.
- У першому пункті ми вказуємо змінну зі значенням шляху сторінки, яку ми будемо аналізувати — {{Page Path}};
- У другому, з боку Input (Ввід), зазначаємо сторінку для якої хочете задати спеціальні граничні значення скролу, при яких потрібно надсилати подію. З боку Output (Вивід) для них вказуємо порогові значення скролу, які нас цікавлять.
- У останньому задаємо значення за замовчуванням — тобто те, яке буде відпрацьовувати для сторінок без прописаної в пункті 2 умови.
Тепер створену змінну потрібно помістити в поле замість зазначених раніше порогових значень:
Якщо вам потрібні складніші умови для позначення сторінок ви можете скористатись змінною типу RegEx Table (Таблиця RegEx). Її налаштування аналогічні до Lookup Table (Таблиця пошуку), але в полі Pattern (Шаблон) (аналог поля Input (Ввід) для Lookup Table) можна задати більш розширену умову завдяки використанню регулярних виразів.
Змінюємо поріг скролінгу залежно від довжини сторінки
Наостанок, розберемо ситуацію, коли нам необхідно змінювати порогові значення динамічно, залежно від довжини сторінки. Це особливо актуально, якщо у вас на сайті є сторінки, розмір яких дорівнює одному екрану. Google Tag Manager у такому разі передає всі граничні значення одночасно при перегляді першого екрана.
Щоб виправити це, використаємо змінну типу Custom JavaScript (Спеціальна змінна 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';
var verticalScrollDepths;
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';У фрагменті коду вище вказуємо значення на випадок, коли ми не хочемо, щоб тригер скролінгу спрацьовував. Наприклад, коли розмір сторінки дорівнює одному екрану. Значення 101 використовується як "неможливий" поріг скролу, воно ніколи не буде виконано, тому наш тригер не запуститься.
У останньому фрагменті з if ми задаємо порогові значення скролінгу в залежності від значення змінної ratio. Цей блок можна змінювати на свій розсуд.
Створену змінну необхідно використовувати в полі Percentages (Відсотки) в тригері Scroll Depth (Глибини прокручування).
Інші налаштування відправки події аналогічно пункту Базове відстеження скролінгу.
Замість висновку
Відстеження глибини прокручування є одним з основних способів зрозуміти, як користувачі взаємодіють із контентом на вашій сторінці. Серед усіх методів, описаних у цій статті, вибирайте той, який підходить вам найбільше. Якщо ж у вас залишилися питання щодо відстеження скролінгу - пишіть про них у коментарях.
P.S. Ще одним прикладом взаємодії користувачів із контентом є перегляд відео. Про те, як відстежити такі дії через GTM, читайте в наступній статті.
Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.
Вебаналітик, Маркетолог