Як відстежувати поведінку користувача з допомогою Google Analytics Events

29

Від автора: Якщо коротко: ви тільки що переробили дизайн вашого сайту, задіяли всі відомі вам кращі практики. Сайт завантажується швидко і, безумовно, виглядає набагато краще з новим інтерфейсом. Однак чи вирішили ви, як оцінити новий дизайн? Як ви дізнаєтеся, чи підвищує конверсію нове попап вікно? Як часто це вікно з’являється, і як багато людей закривають його? Скільки користувачів використовують висуваються меню, яке ви також нещодавно додали? Скільки людей переглядає слайдер зображень на домашній сторінці більше одного слайда? Питань багато, і всі вони різні. У цьому уроці я покажу вам, як працювати з Google Analytics Event Tracking API (яке довге назву!) та знайти відповіді на всі питання.

Починаємо

Якщо ви ще не зареєструвалися на Google Analytics, створіть акаунт і пройдіть ввідні інструкції, щоб згенерувати відслідковує скрипт для свого сайту. Зазвичай ви отримаєте шматок коду на зразок того, що показаний нижче, де UA-XXXXXX-X являє собою унікальний відслідковує ідентифікатор вашого сайту.

(function(i, s, o, g, r, a, m) {
i[‘GoogleAnalyticsObject’] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = true;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, ‘script’, ‘http://www.google-analytics.com/analytics.js’, ‘ga’);
ga( ‘create’, ‘UA-XXXXXX-X’, ‘auto’ );
ga( ‘send’, ‘pageview’ );

Для подальшої роботи вам знадобиться встановити розширення для Chrome Google Analytics Debugger, щоб налагоджувати скрипти Google Analytics на сайті.

Как отслеживать поведение пользователя с помощью Google Analytics Events

Після встановлення розширення можна перейти до першого прикладу.

Відстежуємо клік

Уявіть, що у вас є пара кнопок (посилання, стилізовані під кнопки). Першу кнопку ми розташували у видимій частині екрану під час першого завантаження сторінки в так званій зоні «банерів». Другу кнопку помістили перед футером. У коді нижче видно, що обидві кнопки ведуть на одну сторінку. Класи у кнопок різні, а також унікальні ID. Ми можемо використовувати Event Tracking API, щоб дізнатися, на яку кнопку клацають частіше.

Buy Now
Buy Now

Працювати з відстеженням подій досить просто, так як не потрібно строго задавати події. Спершу потрібно призначити кнопок подія click.

var buttons = document.querySelectorAll(‘.btn’);
buttons.forEach( function( btn ) {
btn.addEventListener. (‘click’, function(event) {
});
} );

Потім необхідно додати функцію ga() з скриптів Google Analytics. З допомогою цієї функції ми записували кількість переглядів на сторінці. Точно так само з допомогою команди send ми відстежуємо подія. Event заданий як аргумент hitType, а також ряд обов’язкових параметрів:

eventAction: визначає взаємодію з користувачем або користувальницький інтерфейс, наприклад, click, play, pause і т. д.

eventCategory: визначає об’єкт відстеження, наприклад, Videos, Buttons, Pop-ups і т. д.

eventLabel: унікальний лейбл або ID події. Додамо змінну, щоб класифікувати кілька примірників одного і того ж класу.

Як я вже говорив, Google не задає строгих правил. Правила можна застосовувати як завгодно. У нашому випадку ми поставили наступні змінні:

var buttons = document.querySelectorAll(‘.btn’);
buttons.forEach( function( btn ) {
btn.addEventListener. (‘click’, function(event) {
ga(‘send’, ‘event’, {
eventAction: ‘click’,
eventCategory: ‘Buy Now Buttons’,
eventLabel: event.target.id // купити-зверху || купити-знизу
});
});
} );

У розширенні Google Analytics Debugger можна клікнути на одну з наших кнопок і проінспектувати її в консолі панелі розробника, щоб подивитися, чи працює трекер:

Как отслеживать поведение пользователя с помощью Google Analytics Events

Як тільки Google Analytics отримає дані, вони будуть записані в Real-time > Events і Behaviour > Events.

Как отслеживать поведение пользователя с помощью Google Analytics Events

На скріншоті видно, що наша кнопка «Купити» у нижній частині екрана отримує набагато більше кліків, ніж її побратим зверху.

Відстежуємо карусель

У нашому прикладі ми розберемо слайдер зображень чи карусель. Швидше за все, ви вже чули аргументи як за, так і проти використання каруселей на сайті. «Люди не взаємодіють з каруселями» або «люди натискають тільки на перший слайд». Чи застосовні ці аргументи до вашого сайту? Сказати це без точних даних складно.

Давайте вмонтуємо Google Analytics Events в нашу карусель, яку ми написали на Slick.js. У цьому JQuery плагіні є кілька подій jQuery, які нам знадобляться для запуску відстеження подій Google Analytics. Прочитайте документацію по Slick, щоб навчитися створювати карусель.

Как отслеживать поведение пользователя с помощью Google Analytics Events

У нашій каруселі п’ять слайдів. Як і в першому прикладі, ми додали унікальні ID всіх слайдів (slide-1, slide-2, slide-3 і т. д.), які будемо передавати в параметр eventLabel. Наше завдання – дізнатися:

переглядають користувачі карусель далі першого слайда;

кількість переглядів слайдів.

Зробити це можна за допомогою подій Slick.js swipe і afterChange.

Подія swipe

Подія swipe, як можна зрозуміти з назви, відбувається, коли користувач гортає карусель за допомогою жесту свайп. У нашому випадку ми визначаємо параметр eventAction в swipe.

$(‘.carousel’).on(‘swipe’, function(event, slick, direction) {
ga(‘send’, ‘event’, {
eventCategory: ‘Carousel’,
eventAction: ‘swipe’,
eventLabel: $( this ).find( ‘.slick-active’ ).attr(‘id’) // slide-1, slide-2, slide-3, etc.
});
});

Подія afterChanges

Подія afterChanges запускається, коли змінюється слайд. Іншими словами, коли користувач перегортає на наступний або попередній слайд каруселі. У нашому випадку ми задаємо eventAction значення view для перегляду нового слайда.

$(‘.carousel’).on(‘afterChange’, function(event, slick, direction) {
ga(‘send’, ‘event’, {
eventCategory: ‘Carousel’,
eventAction: ‘view’,
eventLabel: $( this ).find( ‘.slick-active’ ).attr(‘id’) // slide-1, slide-2, slide-3, etc.
});
});

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

Как отслеживать поведение пользователя с помощью Google Analytics Events

Як видно, все карусель отримала 19 переглядів, 14 з яких отримані шляхом перегляду слайдів за допомогою свайпов.

Що далі?

Ми розібрали два приклади інтеграції Google Analytics Events Tracking і веб-сторінок для збору даних про взаємодію. Маючи ці дані, ми вже можемо судити, краще новий дизайн, ніж старий. Все це в кінцевому підсумку допомагає поліпшити UX на сайті.

Раджу почитати керівництво, щоб дізнатися про інші способи застосування Google Analytics Events Tracking API.