Как произвести отслеживание JavaScript и Ajax событий с помощью Google Analytics

Как произвести отслеживание JavaScript и Ajax событий с помощью Google Analytics

От автора: поднимите руку те, кто следит за пользователями через Google Analytics. Если говорить честно, то быстрее сосчитать тех, кто не использует Google Analytics. Вне зависимости от вашего мнения о google и их планов на мировое доминирование, отслеживание Google Analytics – замечательный инструмент с революционной статистикой.

Чтобы просматривать отчеты о посетителях, вам необходимо вставить отслеживающий код на все страницы сайта.

Как это сделать:

Зарегистрируйтесь в Google Analytics (или привяжите существующий Google/Gmail ID).

Зайдите в раздел Admin (иконка шестеренки) слева и создайте новый аккаунт в колонке ACCOUNT

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

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Откройте колонку PROPERTY и кликните Создать новое свойство с URL вашего сайта. Вашему сайту будет присвоен ID в формате UA-XXXXX-Y.

Откройте Tracking Code в подменю Tracking Info.

Есть и другие более старые варианты трек-кода, но Google рекомендует следующий JS вариант для современных браузеров:

<!-- Google Analytics tracking code -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- end Google Analytics tracking code -->

Вставьте этот шаблона на сайт и замените UA-XXXXX-Y на свой трек-код. Google предлагает вставлять трек-код в тег head, но по факту его можно вставить в любом месте. Мне нравится вставлять его в конец страницы (перед закрывающим тегом body) или вызывать его после загрузки страницы, чтобы у этого скрипта приоритет был меньше, чем у других задач (улучшает производительность сайта).

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

События на странице

Стандартный трек-код выше хорошо работает только с простыми сайтами, на которых есть только контент, а также со стандартными WordPress темами. Однако он не записывает события на странице, такие как:

Вызовы ajax

Проигрывание видео

Загрузка документов

Взаимодействия с медиа контентом из социальных сетей

Клиентское взаимодействие

Исходящие ссылки и…

Любая другая деятельность, не требующая нормальной загрузки страницы.

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

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

События на странице можно записывать через следующий JS код, который вызывает глобальный объект Google Analytics:

ga(
  'send',
  'event',
  [eventCategory],
  [eventAction],
  [eventLabel],
  [eventValue]
);

Или можно использовать JS объект:

ga('send', {
  hitType: 'event',
  eventCategory: [eventCategory],
  eventAction: [eventAction],
  eventLabel: [eventLabel],
  eventValue: [eventValue],
  [transport: beacon ]
});

Разберем каждую строчку кода отдельно…

[eventCategory] (обязательна). Одиночное имя событий заданного типа (например, video для взаимодействия с видео или download для ссылки на PDF).

[eventAction] (обязательна). Пользовательское взаимодействие, приводящее к запуску события (например, play для видео или filename для загрузки).

[eventLabel] (необязательна). Необязательный лейбл для разделения событий по категориям. Например, можно использовать название типа Winter Campaign. Под этим лейблом можно сосредоточить все события, будь-то загрузка, проигрывание видео, внешние ссылки и т.д.

[eventValue] (необязательна). Необязательное числовое значение, связанное с событием. Для видео можно задать размер файла или длину видео, чтобы можно было создать общую и среднюю статистику пропускной способности. Можно также записывать денежную сумму, но имейте в виду, что у Google Analytics есть специальные возможности для записи E-Commerce транзакций.

[transport: beacon] (необязательна). Отслеживание событий можно использовать для записи чего-то наподобие загрузки PDF через инлайн событие onclick:

<a href="document.pdf" onclick="ga('send', 'event', 'download', this.href); return true;">download</a>

В этом примере eventCategory задается в download, а eventAction присваивается URL файла. Можно написать общий JS обработчик события для записи всех загрузок PDF, неважно сколько их:

// record all PDF download events
document.body.addEventListener('click', e => {
  let t = e.target;
  if (t.href && t.href.endsWith('.pdf')) {
 ga('send', {
 hitType: 'event',
 eventCategory: 'download',
 eventAction: t.href,
 transport: beacon
 });
  }
}, false);

Взаимодействие с социальными сетями

Отслеживание событий можно использовать для слежки за взаимодействиями с социальными сетями на сайте. Google предлагает для этого Social Interaction API – ответвление от кода отслеживания событий:

ga(
  'send',
  'social',
  [socialNetwork],
  [socialAction],
  [socialTarget]
);

Или можно использовать:

ga('send', {
  hitType: 'social',
  socialNetwork: [socialNetwork],
  socialAction: [socialAction],
  socialTarget: [socialTarget]
});

Давайте разберем каждую строку в объекте отдельно…

[socialNetwork] (обязательна). Социальная сеть (Facebook, Twitter и т.д.).

[socialAction] (обязательна). Тип действия (лайк, отправка, твит…).

[socialTarget] (обязательна). Цель взаимодействия. Обычно это URL.

Отслеживание событий в отчетах в реальном времени

Действия событий должны быть доступны сразу же в отчетах в режиме реального времени (Real-Time → Events). Более детальная информация доступна через 24 часа в разделе Behavior → Events.

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

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

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

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

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

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

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