От автора: поднимите руку те, кто следит за пользователями через 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 вариант для современных браузеров:
|
1 2 3 4 5 6 7 8 |
<!-- 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='//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:
|
1 2 3 4 5 6 7 8 |
ga( 'send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue] ); |
Или можно использовать JS объект:
|
1 2 3 4 5 6 7 8 |
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:
|
1 |
<a href="document.pdf" onclick="ga('send', 'event', 'download', this.href); return true;">download</a> |
В этом примере eventCategory задается в download, а eventAction присваивается URL файла. Можно написать общий JS обработчик события для записи всех загрузок PDF, неважно сколько их:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 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 – ответвление от кода отслеживания событий:
|
1 2 3 4 5 6 7 |
ga( 'send', 'social', [socialNetwork], [socialAction], [socialTarget] ); |
Или можно использовать:
|
1 2 3 4 5 6 |
ga('send', { hitType: 'social', socialNetwork: [socialNetwork], socialAction: [socialAction], socialTarget: [socialTarget] }); |
Давайте разберем каждую строку в объекте отдельно…
[socialNetwork] (обязательна). Социальная сеть (Facebook*, Twitter и т.д.).
[socialAction] (обязательна). Тип действия (лайк, отправка, твит…).
[socialTarget] (обязательна). Цель взаимодействия. Обычно это URL.
Отслеживание событий в отчетах в реальном времени
Действия событий должны быть доступны сразу же в отчетах в режиме реального времени (Real-Time → Events). Более детальная информация доступна через 24 часа в разделе Behavior → Events.
Автор: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
