Как произвести отслеживание 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 вариант для современных браузеров:

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

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

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

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

Вызовы ajax

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Craig Buckler

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

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

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

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

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

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

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

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

Метки:

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

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

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