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

Від автора: Якщо коротко: ви тільки що переробили дизайн вашого сайту, задіяли всі відомі вам кращі практики. Сайт завантажується швидко і, безумовно, виглядає набагато краще з новим інтерфейсом. Однак чи вирішили ви, як оцінити новий дизайн? Як ви дізнаєтеся, чи підвищує конверсію нове попап вікно? Як часто це вікно з’являється, і як багато людей закривають його? Скільки користувачів використовують висуваються меню, яке ви також нещодавно додали? Скільки людей переглядає слайдер зображень на домашній сторінці більше одного слайда? Питань багато, і всі вони різні. У цьому уроці я покажу вам, як працювати з 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 на сайті.

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

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

Уявіть, що у вас є пара кнопок (посилання, стилізовані під кнопки). Першу кнопку ми розташували у видимій частині екрану під час першого завантаження сторінки в так званій зоні «банерів». Другу кнопку помістили перед футером. У коді нижче видно, що обидві кнопки ведуть на одну сторінку. Класи у кнопок різні, а також унікальні 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, а також ряд обов’язкових параметрів:

Як я вже говорив, 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 отримає дані, вони будуть записані в Real-time > Events і Behaviour > Events.

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

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

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

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

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

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

Що далі?

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

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