Відстеження скролінгу в Google Analytics
У цій статті я хочу поділитися з вами своїм скриптом, за допомогою якого можна відстежувати максимальну глибину скролінгу та точний час перебування на сторінці Google Analytics, використовуючи GTM.
Історія створення скрипта відстеження скролінгу
Коли у мене з’явилася необхідність відслідковувати глибину скролінгу, я шукала готові рішення, але в них всіх відправка події здійснювалася в міру прокручування, тобто відправлялися не тільки остаточні дані по скролінгу для сторінки, а й проміжні, причому принцип відправлення даних полягав у фіксації події кожен раз після досягнення певного значення, а чи не у відправленні максимального значення, як цього хотілося б. Це ускладнювало подальший аналіз. Хотілося мати перед очима більш точну картину того, що відбувається, тому я написала власне рішення – скрипт, в якому я відправляю максимальну глибину скролінгу та точний час перебування на поточній сторінці перед її закриттям, оновленням або переходом на іншу сторінку.
Опис скрипта
Мій скрипт дозволяє відправляти максимальні значення скролінгу та точного часу на сторінці, тому що я використовую подію beforeunload, яка призначається об’єкту window, і дія якого буде виконана в момент перед завершенням роботи користувача зі сторінкою (її закриття, оновлення або перехід на іншу сторінку).У кожний момент прокручування сторінки я порівнюю поточне значення глибини скролінгу з вже зафіксованим і вибираю найбільше з них, таким чином, у момент закриття вікна у мене є максимальне значення глибини скролінгу. За допомогою функції getTime() класу Date я фіксую час при заході користувача на сторінку і час настання події beforeunload (завершення роботи зі сторінкою), потім визначаю різницю цих величин і отримую загальний час на сторінці. Отримані значення часу та скролінгу записую в змінні, які передаю в GTM за допомогою datalayer.push(). Крім точних значень часу та скролінгу для зручності подальшого аналізу у скрипті я також групую дані по діапазонах.
Скрипт доступний за посиланням.
Інструкція з впровадження
- Додаємо новий тег типу “Тег користувача HTML”
Вставляємо в текстове поле скрипт, про який йшлося вище.
Як умову активації тега вказуємо подію gtm.dom.
2. Створюємо такі змінні рівня даних:
time_on_page та percent_of_scrolling, percent_of_scrolling_interval, time_on_page_interval
3. Створюємо новий тригер типу “Подія користувача” Scroll to.
4. Додаємо новий тег типу Universal Analytics, який надсилатиме дані про нашу подію в аналітику.
У налаштуваннях тега як тип відстеження вибираємо “Подія”. Вказуємо Категорії та Дія. Як правило активації додаємо користувальницьку подію “Scroll to”.
Хочу звернути увагу на опцію “Не взаємодія” (ВАЖЛИВО!).
Якщо ви хочете, щоб надсилання події впливало на ваш показник відмов, необхідно встановити значення “false” для цього параметра. А якщо ні, то встановлюйте значення “true”.
Як категорію події я передаю URL поточної сторінки: {{Page Path}}.
Як дія події я передаю рядок виду:
Scrolling to {{%% of_scrolling}} and time on page {{time_on_page}}.
Таким чином, у звітах з поведінки, обравши в якості основного параметра “Дія події”, я зможу бачити дані в наступному вигляді для кожної категорії події – сторінки мого сайту.
Для груповання цих даних можна скористатися регулярними виразами (Докладніше я розглядала приклади використання регулярних виразів тут). Наприклад, якщо я вважаю, що показником залучення користувача до контенту певної сторінки є скролінг глибиною не менше 80% і час на сторінці не менше 2 хвилин, то я можу налаштувати відповідний регулярний вираз:
Але все ж таки працювати з даними в такому вигляді не надто зручно, тому для зручності подальшого аналізу я додала в скрипт групування по діапазонах. Тут нам знадобляться змінні percent_of_scrolling_interval, time_on_page_interval.
Наприклад, передаючи як дії події рядок Scrolling {{percent_of_scrolling_interval}}, а як ярлик події – Time on page {{time_on_page_interval}}, ми зможемо побачити дані про скролінг і час для кожної сторінки, згруповані за діапазонами.
Групування значень прокручування та часу здійснюється у функціях getTimeInterval() та getScrollingInterval() відповідно. Ці функції приймають на вході змінні deep і time, в яких зберігаю значення глибини скролінгу і часу на сторінці, і повертають діапазони, до яких відносяться значення змінних. Якщо вам захочеться змінити діапазони, наприклад, ще більше деталізувати їх, то в тіло цих функцій потрібно буде додати додаткові умови.
Аналізуємо своїх читачів
Часто відстеження глибини скролінгу та часу на сторінці застосовується в аналізі блогів і дозволяє зробити висновки про цінність контенту, що публікується, для користувачів.
У зв’язку з цим мені спало на думку ідея якимось чином сегментувати читачів статей, виходячи з глибини прокручування і часу, проведеного на сторінці, і передавати цю характеристику в аналітику.
Наприклад, я вирішила класифікувати читачів, як описано в таблиці нижче. Надання характеристики читачеві здійснюється при одночасному виконанні умов в обох стовпцях.
| Характеристика читателя статьи | Скроллинг, % | Время |
|---|---|---|
| Читал вдумчиво | 70-100 | Более 70% от эталонного времени |
| Читал по диагонали | 70-100 | Менее 70%, но более 10% от эталонного времени |
| Не читал вовсе | 0-10 | Любое время |
| Бросил читать на середине | 40-70 | Более 35% от эталонного времени |
| Бросил читать в начале | 10-40 | Более 17.5% от эталонного времени |
| Просмотрел материал до середины | 40-70 | Менее 35% от эталонного времени |
| Начал просматривать, но бросил в начале | 10-40 | Менее 17.5% от эталонного времени |
| Проскроллил до конца, не читая | 70-100 | Менее 10% от эталонного времени |
де еталонний час – це час, який на Вашу думку або виходячи з якихось експериментів, є оптимальним для прочитання статті.
Я його вибирала виходячи з відповідності довжини сторінки в пікселях та часу, що витрачається на її прочитання. Стисло опишу свій підхід. Розглядаємо кілька статей аналізованого блогу, знаходимо довжину цих сторінок у пікселях, засікаємо скільки часу потрібно групі людей, щоб прочитати статтю. Знаходимо середній час, який витрачається читачами на прочитання кожної статті. Знаючи довжини сторінок у пікселях та отримані середні значення часу, можемо отримати деякий коефіцієнт, який показує, скільки пікселів сторінки прочитується за одиницю часу у середньому. Я знаходжу два такі коефіцієнти: для пк та мобільних пристроїв. Ці показники я використовую для підрахунку еталонного часу прочитання кожної статті. Вибрані коефіцієнти підходять у моєму випадку, і, цілком імовірно, підійдуть ще для ресурсів, які розміщують статті. Однак слід пам’ятати, що вони залежать від особливостей відображення статей на сайті та їх вмісту, а отже, можуть потребувати коригування. Бажано проводити таке коригування в рамках кожного контентного ресурсу окремо, оскільки ідеально підлаштуватися під стилі відображення тексту на сторінці, шрифти тощо кількох блогів одночасно неможливо.
Отже, якщо ви якимось чином визначили це магічне число, то в скрипті змінної “etalon” вам потрібно замінити мої значення на свої. Ще раз акцентую увагу, у змінній “etalon” зберігається коефіцієнт, який показує, скільки пікселів сторінки оптимально має бути прочитане за одиницю часу.
Для присвоєння категорії читачеві у вихідний скрипт я додала функцію getCharacters(). Функція getCharacters() приймає на вході змінні deep та time. У тілі функції я реалізую визначення власності читача статті категорії. Ви можете модифікувати критерії, за якими надається категорія читачеві статті, якщо забажаєте.
Таким чином, щоб окрім даних про скролінг та час на сторінці, передавати також характеристику читача, потрібно використовувати версію скрипту з функцією getCharacters(), а також додати ще одну змінну рівня даних і внести невеликі зміни в тег відправки події скролінгу GUA.
Додаємо надання категорії читачу
1.Створюємо змінну рівня даних character
2. Як тег HTML користувача використовуємо нову версію скрипта, що містить функцію getCharacters()
Скрипт доступний за посиланням
3. Вносимо зміни до тегу відправки події скролінгу GUA
Таким чином в аналітиці ми зможемо побачити ось такий звіт за кожною статтею (звіт Поведінка>>Події>>Найкращі події>>обираємо категорію події – статтю, що нас цікавить):
Сподіваюся, що моя робота буде корисною для вас і хто-небудь спробує впровадити мій скрипт на своєму сайті! Якщо виникають питання/пропозиції – пишіть, буду рада отримати фідбек!
2 ЧАСТИНА Детального посібника з відстеження скролла в Google Analytics через GTM