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

Как отслеживать поведение пользователя с помощью 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 на сайте.

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

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

Отслеживаем клик

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

<!-- Кнопка покупки, расположенная в верхней части экрана -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a>
 
<!-- Кнопка покупки, расположенная в нижней части экрана -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>

Работать с отслеживанием событий достаточно просто, так как не нужно строго задавать события. Сперва нужно назначить кнопкам событие 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.

Автор: Louie R.

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Современные тенденции веб-разработки

За ближайшие 5 дней мы составим ваш пошаговый алгоритм профессионального роста с нуля в сайтостроении...

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree