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

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

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

Начинаем

Если вы еще не зарегистрировались на Google Analytics, создайте аккаунт и пройдите вводные инструкции, чтобы сгенерировать отслеживающий скрипт для своего сайта. Обычно вы получите кусок кода наподобие того, что показан ниже, где UA-XXXXXX-X представляет собой уникальный отслеживающий идентификатор вашего сайта.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

Работать с отслеживанием событий достаточно просто, так как не нужно строго задавать события. Сперва нужно назначить кнопкам событие click.

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

eventAction: определяет взаимодействие с пользователем или пользовательский интерфейс, например, click, play, pause и т.д.

eventCategory: определяет объект отслеживания, например, Videos, Buttons, Pop-ups и т.д.

eventLabel: уникальный лейбл или ID события. Добавим эту переменную, чтобы классифицировать несколько экземпляров одного и того же класса.

Как я уже говорил, Google не задает строгих правил. Правила можно применять как угодно. В нашем случае мы задали следующие переменные:

В расширении Google Analytics Debugger можно кликнуть на одну из наших кнопок и проинспектировать ее в консоли панели разработчика, чтобы посмотреть, работает ли трекер:

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

Как только Google Analytics получит данные, они будут записаны в Real-time > Events и Behaviour > Events.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Событие afterChanges

Событие afterChanges запускается, когда меняется слайд. Другими словами, когда пользователь перелистывает на следующий или предыдущий слайд в карусели. В нашем случае мы задаем eventAction в значение view для просмотра нового слайда.

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

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

Как видно, всего карусель получила 19 просмотров, 14 из которых получены путем перелистывания слайдов с помощью свайпов.

Что дальше?

Мы разобрали два примера интеграции Google Analytics Events Tracking и веб-страницы для сбора данных о взаимодействии. Имея эти данные, мы уже можем судить, лучше ли новый дизайн, чем старый. Все это в конечном итоге помогает улучшить UX на сайте.

Советую почитать руководство, чтобы узнать про другие способы применения Google Analytics Events Tracking API.

Автор: Louie R.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree