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

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

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

Начинаем

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

Получить

Метки:

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

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

Комментарии 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