Відстеження скролінгу на сторінках засобами Google Tag Manager: Розширений посібник

Відстеження скролінгу на сторінках засобами Google Tag Manager: Розширений посібник

Скролінг одна з основних подій, які роблять користувачі на сайті. Відстеження цієї дії дозволяє вам глибше зрозуміти, як відвідувачі взаємодіють із контентом на сторінці. В рамках сьогоднішньої статті ми розберемо функціонал диспетчера тегів Google, який допоможе нам із цим.

  1. Базове відстеження скролінгу
  2. Визначаємо, чи впливає скролінг на показник відмов
  3. Різні пороги скролінгу для різних сторінок
  4. Змінюємо поріг скролінгу залежно від довжини сторінки

 

Базове відстеження скролінгу

Відстеження скролінгу за допомогою вбудованого в GTM тригера – одне з найпростіших завдань. Зараз ви зможете у цьому переконатися. Нам знадобиться:

Налаштування тригера скролінгу

При створенні нового тригера вибираємо тип Scroll Depth (Глибина прокручування) із категорії User Engagement (Взаємодія користувача).Тригер глибини прокручування Scroll Depth у Google Tag Manager

Google Tag Manager дозволяє відстежувати як вертикальне, так і горизонтальне прокручування. Але, оскільки на більшості сайтів є тільки вертикальна (тобто прокрутка зверху вниз), ми зупинимося саме на ній.Налаштування тригера скролінгу Scroll Depth в GTM

Умовно налаштування тригера можна поділити на три частини:

  • Вибір напряму прокручування. У ньому окрім напрямку можна вибрати одиницю виміру порогових значень: відсотки або пікселі. А також вказати ці значення. Якщо ви хочете перерахувати кілька значень – розділяйте їх комами.
  • Момент включення тригера. Дозволяє активувати тригер після настання однієї з подій завантаження сторінки: Page View, DOM Ready або Window Load . Завдяки цьому параметру ви можете вибрати момент, коли ваш контент на сторінці повністю завантажено. Найімовірніше це буде DOM Ready або Window Load. Якщо ви не знаєте, яку саме подію вибрати – використовуйте Window Load.
  • Додаткові умови спрацьовування тригера. У цьому блоці можна задати будь-які додаткові умови за аналогією з іншими тригерами. Наприклад, якщо ви хочете відстежувати скролінг тільки на головній сторінці вашого сайту, умова буде такою:Налаштування умови спрацювання тригера скролінгу на головній сторінці GTM

Активація вбудованих змінних категорій Scrolling

Щоб активувати вбудовані змінні, перейдіть до розділу Змінні та натисніть кнопку Configure (Налаштувати):Активація вбудованих змінних у Google Tag Manager

Дані, які збираються в момент досягнення порогового значення, зберігаються у трьох вбудованих змінних:

  • Scroll Depth Threshold – у цій змінній ви зможете знайти граничне значення, якого досяг користувач. Наприклад, у нашому випадку це буде одне з таких значень: 25, 50, 75, 100.
  • Scroll Depth Units – зберігається значення одиниці виміру порогового значення: percent або pixels.
  • Scroll Direction– напрямки прокручування: vertical или horizontal.Активація вбудованих змінних Scroll Depth Threshold, Scroll Depth Units, Scroll Direction

Тег для передачі даних у Google Analytics

І, на самкінець, вже знайомий нам тег передачі події в 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 та налаштовуємо наступним чином:Налаштування змінної типу Lookup Table для порогових значень скролінгу

  • У першому блоці ми вказуємо змінну з досягнутим граничним значенням – Scroll Depth Threshold, яку ми аналізуватимемо.
  • У другому, з боку Input – порогові значення, у яких ви хочете відправляти подію, що впливає на показник відмов. Для них із боку Output ми вкажемо значення false.
  • В останньому блоці задаємо значення за промовчанням – true, яке відображатиметься для інших порогових значень.

Не забудьте використовувати створену змінну в полі Не взаємодія:Використання змінної Lookup Table у тезі для впливу скролінгу на показник відмов

Різні пороги скролінгу для різних сторінок

Залежно від типу сторінки, вам може знадобитися відстежувати різні граничні значення скролінгу. Наприклад, для головної сторінки свого блогу я хочу використовувати граничні значення 25, 50, 75, 100. Для сторінки Чим я можу бути вам корисним – значення 50, 100. А для решти сторінок – 10, 25, 50, 75, 100.

Є два підходи до вирішення цього завдання:

  • створити кілька тригерів, де в додаткових умовах спрацьовування тригера вказуватимете перелік сторінок. Наприклад, для головної прикладу вище:Налаштування умови спрацювання тригера скролінгу на головній сторінці GTM
  • використовувати зміну користувача типу Таблиця пошуку.

Саме другий спосіб ми й розберемо детальніше. Ми вже розібрали, як працювати з таким типом змінних. Тільки цього разу будемо аналізувати шлях сторінки замість порогу скролінгу:Налаштування змінної типу Lookup Table для вказівки різних порогів скролінгу на різних сторінках

Тепер створену змінну потрібно помістити в поле замість зазначених раніше порогових значень:Використання змінної з різними порогами скролінгу для різних сторінок у тригері глибини прокручування Scroll Depth

Змінюємо поріг скролінгу залежно від довжини сторінки

На самкінець, розберемо ситуацію, коли нам необхідно змінювати порогові значення динамічно, залежно від довжини сторінки. Це особливо актуально, якщо у вас на сайті є сторінки, розмір яких дорівнює одному екрану. 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, читайте у статті.