вт, 21 травня 2019 р.
Оригінальна стаття була написана 21 травня 2019 року і йшлося в ній про передачу даних до Google Analytics Universal, але при переїзді блогу на нову CMS я вирішив оновити матеріал, до актуальної версії Google Analytics 4.
Скролінг одна з основних подій, які роблять користувачі на сайті. Відстеження цієї дії дозволяє вам глибше зрозуміти, як відвідувачі взаємодіють із контентом на сторінці. Хоча GA4 по замовчуванню вміє відслідковувати скрол на 90% за допомогою івентів розширеної статистики, дуже часто цього недостатньо, аби нормально проаналізувати взаємодію зі сторінкою. Тому у цій статті більш детально поговоримо про можливості відслідковування скролінгу за допомогою GTM.
Відстеження скролінгу за допомогою вбудованого в GTM тригера - одне з найпростіших завдань. Зараз ви зможете у цьому переконатися. Нам знадобиться:
При створенні нового тригера вибираємо тип Scroll Depth (Глибина прокручування) із категорії User Engagement (Взаємодія з користувачем).
Google Tag Manager дозволяє відстежувати як вертикальне, так і горизонтальне прокручування. Але, оскільки на більшості сайтів є тільки вертикальне (тобто прокрутка зверху вниз), ми зупинимося саме на ньому.
Умовно налаштування тригера можна поділити на три частини:
Щоб активувати вбудовані змінні, перейдіть до розділу Variables (Змінні) та натисніть кнопку Configure (Налаштувати):
Дані, які збираються в момент досягнення порогового значення скролу, вказаного в налаштуваннях тригеру, зберігаються у трьох вбудованих змінних:
І, насамкінець, вже знайомий нам тег передачі події в Google Analytics 4:
scroll_
та обираємо в області праворуч від поля змінну Scroll Depth Threshold, у якій зберігається граничне значення, досягнуте відвідувачем.Не забувайте також вказати тригер, який ми створили раніше.
Залежно від типу сторінки, вам може знадобитися відстежувати різні граничні значення скролінгу. Наприклад, для головної сторінки свого блогу я хочу використовувати граничні значення 25, 50, 75, 100. А для решти сторінок – 10, 25, 50, 75, 100.
Є два підходи до вирішення цього завдання:
Саме другий спосіб ми й розберемо детальніше.
Тепер створену змінну потрібно помістити в поле замість зазначених раніше порогових значень:
Якщо вам потрібні складніші умови для позначення сторінок ви можете скористатись змінною типу 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.
Вебаналітик, Маркетолог