Аналіз скролінгу сторінки користувачами — це доволі простий і популярний метод, який допоможе вам краще зрозуміти їхню поведінку. Особливо добре цей підхід працює на лендингах, але він актуальний і для інших типів сайтів.
У сьогоднішньому матеріалі я хочу поговорити не про звичний усім скролінг, коли ми відстежуємо відсоток сторінки, який користувач прокрутив, а про більш складну механіку — відстеження скролінгу по блоках.
Як працює скролінг по блоках?
Класичне відстеження скролінгу за відсотками має певний недолік: хоча його легко налаштувати, довжина сторінки може суттєво відрізнятися залежно від пристрою. Відповідно, якщо ми бачимо, що користувач проскролив сторінку на 50%, то не можемо точно визначити, яку саме частину вмісту він переглянув. Ми можемо лише орієнтовно оцінити це, оскільки довжина сторінки, як зазначалося раніше, залежить від ширини екрану.
Відстеження ж по блоках дає чіткіше розуміння активності користувача, оскільки налаштовуємо ми його зазвичай по заголовкам блоків. Сам розподіл по блоках залежить від структури сторінки, наприклад, сторінка курсу на PROANALYTICS.ACADEMY складається з частин: “Кому підходить курс”, “Програма курсу”, “Переваги курсу” тощо, а стаття на блозі із заголовків статті.
У будь-якому разі працює це так: коли певний заголовок, який ми попередньо позначили як новий блок, потрапляє в видиму область екрану, то зараховується подія. Таким чином, ми можемо побудувати воронку скролінгу на основі цих подій.
Налаштування буде нескладним, і зробимо ми його через Google Tag Manager, а для навігації по етапах можете скористатися наступним планом:
Налаштування в Google Tag Manager
Як і в будь-якому налаштуванні в GTM, ми розберемо два основні процеси: створення тригеру та налаштування тегу.
Якщо у вас ще немає акаунта та контейнера в GTM, ви можете скористатися наступною інструкцією, яка розміщена на цьому блозі, щоб його створити.
Якщо ви ще не знайомі з Google Tag Manager, рекомендую спочатку ознайомитися зі статтею Що таке Google Tag Manager, навіщо він потрібний і як його використовувати у бізнесі, у ній я пояснюю додаткові переваги використання GTM для встановлення аналітичних та маркетингових кодів на ваш сайт.
Налаштування тригера Element Visibility (Видимість елемента)
У робочій області клікаємо на блок Triggers (Тригери) -> New (Створити)
Далі - Trigger Configuration (Конфігурація тригера) -> Element Visibility (Видимість елементу).
Перед нами з’являється доволі багато різних налаштувань. Взагалі це тригер з однією з найбільших кількістю налаштувань, але нам з них потрібні будуть не всі, тому не лякайтесь.
Спочатку треба вказати потрапляння яких саме елементів в видиму область екрану буде вважатись переглядом блоку. Найкращий спосіб це зробити - за допомогою CSS-селекторів.
Чому ми обираємо саме CSS-селектори, а не ID елемента я вже писав у статті Топ-14 помилок у роботі з Google Tag Manager та як їх уникнути.
Знайти та скопіювати CSS-селектор можна з коду сторінки вебсайту, де знаходиться елемент. Для цього переходимо на потрібну нам сторінку та клікаємо правою кнопкою миші. Потім обираємо Inspect (Перевірити).
Відкриється вікно із кодом сторінки. Якщо навести курсором на код, нам підсвітить частину сторінки, яка до нього відноситься. Наприклад, якщо нам потрібен селектор блоку “Кому підійде”, то спочатку ми знаходимо частину коду, при наведенні на яку буде підсвічуватись потрібний текст.
Потім клікаємо правою кнопкою миші та обираємо Copy (Копіювати) -> Copy selector (Копіювати селектор)
Таким чином, можна скопіювати селектори всіх потрібних нам елементів та вставити через кому в наш тригер. Буде виглядати наступним чином.
Описаний вище спосіб, звісно, не є оптимальним. Якщо ви хоч трохи знайомі з CSS-селекторами, то знаєте, що один селектор може відповідати декільком елементам. Саме цю властивість ми й використаємо.
Зверніть увагу, що заголовки блоків зазвичай позначаються тегами h із відповідним номером. Наприклад, у нашому випадку заголовки “Кому підійде” та “Про навчання” та інші позначені тегом h2. Сам тег є селектором, тож у більшості випадків достатньо просто вказати його в налаштуваннях.
Щоб переконатися, що ваш селектор охоплює всі необхідні блоки, ви можете скористатися розширенням PROANALYTICS, яке підсвічує елементи сайту, що відповідають введеному CSS-селектору. (Якщо розширення вам сподобалося, залиште відгук у Chrome Store — мені буде дуже приємно).
Для використання розширення вставте скопійований селектор у відповідне поле та натисніть кнопку “Підсвітити елементи”. Усі елементи, які відповідають селектору, підсвітяться зеленим.
Якщо у вас, як і у моєму випадку, всі потрібні заголовки підсвітилися, сміливо вставляйте отриманий селектор у тригер. Якщо ж якийсь елемент не підсвітився, доведеться окремо скопіювати його селектор і додати його до попереднього, розділивши комою.
Тепер ми можемо вказати, як часто буде спрацьовувати тригер. Нас цікавить опція Once per element (Один раз для одного елемента), оскільки тригер має спрацьовувати один раз, коли людина доскролює до певного блоку.
Також є можливість налаштувати мінімальний відсоток елемента, який буде видно відвідувачу під час спрацювання тригеру.
Під час наведення на код підсвічується 100% елемента.
Тобто якщо ми поставимо, наприклад, умову 50%, то при скролу сторінки на ось такий рівень буде спрацьовувати тригер та передасться івент.
Зазвичай краще встановлювати більше значення, наприклад 90%, тобто нехай подія відправляється, коли елемент майже повністю потрапить до видимої області екрану відвідувача.
Останній крок - це дати назву тригеру EV - block_scroll. Після цього натискаємо Save (Зберегти).
Налаштування тега
Переходимо в розділ Tags (Теги) та натискаємо кнопку New (Створити)
Далі - Tag Configuration (Конфігурація тегу) -> Google Analytics 4.
Тепер обираємо тег Google Analytics: GA4 Event.
Для тега нам потрібно буде вказати три налаштування:
- Tag ID (Ідентифікатор тега) - ваш ідентифікатор потоку даних у Google Analytics 4
Щоб знайти його, увійдіть у свій акаунт Google Analytics 4, перейдіть до розділу Admin (Адміністратор) -> Data Streams (Потоки даних), оберіть потрібний потік і скопіюйте Measurement ID (Ідентифікатор показника).
- Далі вказуємо назву події у відповідне поле. Нехай це буде
block_scroll.
Останній крок - додати параметр до нашого івенту.
- У поле Event parameter (Параметри події) вписуємо назву параметра block_name. Value (Значення) оберемо зі змінних у групі Built-in (Вбудовані). Нам потрібна змінна Click Text для того, щоб передавати текст заголовків, з яких починається блок під час спрацювання події.
Зверніть увагу, що хоча в якості параметра івенту використання змінної Click Text допустиме, але я дуже не рекомендую використовувати її для налаштування тригерів. Детальніше про це можете почитати за цим посиланням.
Залишилось поєднати наш тригер із тегом та дати останньому назву. Додаємо тригер EV- block_scroll, який ми створили раніше.
І даємо назву нашому тегу GA4 - block_scroll. Не забудьте зберегти тег.
Ну ось і все, налаштування готово. Тепер залишилося дочекатися перших даних у GA4 і побудувати воронку у блоці Explore (Дослідити), щоб у зручному вигляді проаналізувати взаємодію користувачів зі сторінкою.
Створення воронки на основі даних скролінгу по блоках
Для того, щоб створити воронку заходимо у блок Explore (Дослідити) та обираємо Blank (Пустий).
Тепер обираємо потрібну нам техніку у випадаючому списку, Funnel еxploration (Дослідження послідовності конверсії).
Воронка складається з етапів або кроків, які користувач проходить на шляху до конверсії. У нашому випадку: чим більше користувач скролить сторінку, тим краще, адже це демонструє його зацікавленість у вмісті. Кожен етап воронки буде пов'язаний із подіями, які спрацьовують, коли користувач доскролює до чергового заголовка. Таким чином, кожен крок воронки — це перегляд нового блоку.
Отже, для налаштування кроків натискаємо Steps (Кроки).
Перший етап — додайте подію page_view (Перегляд сторінки). У параметрі Page location (Місцеположення сторінки) вкажіть URL-адресу сторінки, яку аналізуєте. Це дозволить враховувати лише тих користувачів, які переглядали конкретну сторінку.
У наступних кроках додаємо події block_scroll для всіх заголовків за такою схемою:
- Додаємо подію
block_scroll - Поряд додаємо параметр під назвою
block_name, який ми створювали раніше в Google Tag Manager. Потім вказуємо текст заголовка, до якого користувач доскролює на цьому етапі. - Обов’язково додаємо в умові параметр Page location (Місцеположення сторінки), як і для першої події
page_view, щоб уся воронка враховувала тільки потрібну нам сторінку.
Зверніть увагу, біля написів Step 2, Step 3… ми вписуємо назву, яка буде відображатися на самій воронці.
Таким чином додаємо події послідовно для кожного заголовка, поступово охоплюючи всі ключові блоки сторінки. Фінально отримаєте ось такий звіт:
Замість висновку (Переваги та недоліки скролінгу по блоках)
Звісно, як і більшість речей у світі, такий спосіб налаштування має свої переваги та недоліки.
Основна перевага скролінгу по блоках - це його точність та достовірність. Ми знаємо, що кожна подія, незалежно від пристрою чи розширення екрану, має однакове значення - це скрол до конкретного блоку. Таким чином, воронка, яку можна побудувати на основі зібраних даних, буде дуже точною.
З іншого боку, якщо на вашому сайті погано розмічені заголовки, вам, швидше за все, буде недостатньо прописати тільки h2 чи h2,h3 у тригері, і доведеться значно довше збирати селектори по сайту.
Також не слід забувати: якщо у користувача встановлено автопереклад сторінки, текст буде перекладений на іншу мову. Оскільки ми використовуємо змінну Click Text у параметрі події, текст, який передається в аналітику, також буде перекладений. Це означає, що ваш блок називатиметься вже якось інакше. Якщо ви працюєте на локальному ринку, жодних проблем не виникне. Однак, якщо ви — міжнародна компанія, що працює на різні країни, це може стати недоліком або викликати певні труднощі під час аналізу.
Резюмуючи, скролінг по блоках у Google Tag Manager — це доволі ефективний метод збору даних, що вирізняється точністю. Попри окремі недоліки, такі як залежність від мови тексту через змінну Click Text або необхідність адаптації під різні сторінки, це налаштування дозволяє отримувати більш структуровані дані, ніж традиційне відстеження за відсотками і дозволяє досить просто зібрати потрібні дані для аналізу взаємодії відвідувачів сайту зі сторінкою.
Якщо ви зацікавлені в роботі з GTM або хочете опанувати ще більше налаштувань та дізнатися їхні особливості, приходьте на курс PRO GTM. На ньому ви зможете на професійному рівні та з моїми порадами опанувати цей інструмент.
Завантаження коментарів…