От автора: Если коротко: вы только что переделали дизайн вашего сайта, задействовали все известные вам лучшие практики. Сайт загружается быстро и, определенно, выглядит намного лучше с новым интерфейсом. Однако решили ли вы, как оценить новый дизайн? Как вы узнаете, повышает ли конверсию новое попап окно? Как часто это окно появляется, и как много людей закрывают его? Сколько пользователей используют выдвигающееся меню, которое вы также недавно добавили? Сколько людей просматривает слайдер изображений на домашней странице более одного слайда? Вопросов много, и все они разные. В этом уроке я покажу вам, как работать с Google Analytics Event Tracking API (какое длинное название!) и найти ответы на все вопросы.
Начинаем
Если вы еще не зарегистрировались на Google Analytics, создайте аккаунт и пройдите вводные инструкции, чтобы сгенерировать отслеживающий скрипт для своего сайта. Обычно вы получите кусок кода наподобие того, что показан ниже, где UA-XXXXXX-X представляет собой уникальный отслеживающий идентификатор вашего сайта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(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', '//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, чтобы узнать, на какую кнопку кликают чаще.
|
1 2 3 4 5 |
<!-- Кнопка покупки, расположенная в верхней части экрана --> <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.
|
1 2 3 4 5 6 |
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 не задает строгих правил. Правила можно применять как угодно. В нашем случае мы задали следующие переменные:
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 |
$('.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 для просмотра нового слайда.
|
1 2 3 4 5 6 7 |
$('.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.
Автор: Louie R.
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
