Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google Analytics
Webdesign

Отслеживание Поведения Пользователей с Google Analytics Events

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Представьте такую ситуацию, вы только что закончили редизайн вашего веб-сайта, при этом вы использовали самые лучшие техники и методы, которые вам известны. Теперь сайт загружается гораздо быстрее и интерфейс выглядит просто замечательно.

Но задумывались-ли вы о том, как, так сказать, измерить насколько хорош ваш новый дизайн? Как же вам узнать увеличит-ли новое всплывающее окно конверсию сайта, или нет? Как часто это всплывающее окно показывается на сайте, и как часто пользователи обходят его стороной? Как часто пользователи используют для навигации off-canvas меню, которое вы недавно добавили? Сколько людей смотрят остальные картинки в вашем слайдере, помимо первого слайда. Вопросов много и они могут различаться.

В этом туториале я покажу вам, как применить Google Analytics Event Tracking API (какое длинное название!), чтобы найти ответы.

Начнём

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

В этом занятии вам также понадобиться поставить расширение Chrome'а, Google Analytics Debugger, для дальнейшей отладки скриптов Google Analytics на вашем сайте.

Включите Google Chrome Debugger

Как только всё будет готово, мы начнём с первого примера.

Отслеживание Нажатия Кнопки

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

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

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

  • eventAction: состояние взаимодействия юзера, или его интерфейса, то есть click, play, pause, итд.
  • eventCategory: определяет объект, который стоит отслеживать, то есть Videos, Buttons, Pop-ups, итд.
  • eventLabel: уникальный лейбл или айди события. Мы добавляем эту переменную, чтобы различать несколько экземпляров одного объекта.

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

С включённым расширением Google Analytics Debugger, мы можем нажать на одну из кнопок и проверить в консоли работает-ли отслеживание.

Google Analytics Log in DevTools Console
Трекер отправляет данные в Google Analytics

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

Event Record in Google Analytics
На этом скриншоте мы видим, что кнопка «Buy Now» внизу страницы нажимается чаще, чем аналогичная кнопка сверху.

Отслеживание Карусели

В следующем примере мы будем работать со слайдером изображений, или каруселью. Думаю вам приходилось слышать аргументы против использования карусели на веб-сайте; «люди в действительности не взаимодействуют с караселью» или «люди взаимодействуют только с первым слайдом». Актуальны-ли подобные аргументы для вашего веб-сайта? Без соответствующих данных, утверждать это сложно.

Давайте добавим события Google Analytics для нашей карусели, которую мы создали с использованием Slick.js. Этот jQuery плагин предоставляет удобные кастомные jQuery события, как раз то, что нам нужно, чтобы запускать Google Analytics события для отслеживания. Пожалуйста, ознакомьтесь с документацией Slick если хотите знать детали, как мы создали карусель.

Наша карусель была создана для демонстрации.

Карусель состоит из пяти слайдов. Подобно нашему первому примеру, мы добавили уникальные айди для каждого слайда (slide-1, slide-2, slide-3 итд.), которые мы передадим, как параметр eventLabel. Наша задача понять:

  1. Смотрит-ли юзер слайды помимо первого
  2. и узнать количество просмотров, каждого слайда.

Чтобы это сделать мы прибегнем к помощи событий Slick.js swipe и afterChange.

Swipe

Событие swipe, используется когда юзер использует тач прокрутку для навигации. В этом случае мы также установили eventAction параметр swipe.

afterChanges

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

Как только Google Analytics соберёт нужные данные, мы скоро увидим, сколько юзеров пользуются каруселью, сколько просмотров получает каждый слайд и сколько пользователей используют тач прокрутку при использовании карусели.

Как мы можем видеть выше, наша карусель всего получила 19 просмотров, 14 из которых были при использовании тач прокрутки.

Что Дальше?

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

Я советую вам посмотреть на документацию, для дальнейшего знакомства с Google Analytics Events Tracking API.

Ссылки для Дальнейшего Изучения

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.