Google Analytics — незаменимый инструмент для любого веб-разработчика. Достаточно подключить его к себе на страницу, и к вашим услугам подробнейшая статистика на любой вкус. К сожалению, по умолчанию она не умеет отслеживать асинхронные события. Но это можно легко исправить.

Что такое асинхронные события?

Если вы заглядывали в наше портфолио, вы наверняка видели вкладки «Процесс» и «Галерея» на страницах работ. При клике на вкладке страница не перезагружается, содержимое всех вкладок уже загружено, достаточно просто отобразить его с помощью javascript. Это и есть асинхронное событие.

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

Отслеживание событий

Для отслеживания подобных событий Google предоставляет специальный API — метод объекта _gat, который создается при загрузке кода Google Analytics. Интерфейс метода таков:

_trackEvent(String category, String action[, String label[, Int value[, Bool noninteraction]]])

Описание параметров:

  • String category — категория события, например «Видео»
  • String action — действие по событию, например «Просмотр»
  • String labelопционально ярлык события, например название видео
  • Int valueопционально значение, привязанное к событию, например оценка по пятибальной шкале
  • Bool noninteractionопционально, false по умолчанию если этот параметр установлен в true, то событие не будет учитываться при вычислении показателя отказов

Для отслеживания события достаточно вызвать этот метод с необходимыми параметрами:

_gat._trackEvent('Портфолио', 'Процесс', 'База стартапов SVCDB');

Однако этот метод не совершенен. Код Google Analytics подключается асинхронно, поэтому возможна ситуация, когда событие уже вызвано, а объект _gat еще не определен, что приведет к ошибке. На этот случай API аналитики Google позволяет ставить события в очередь:

var _gaq = _gaq || [];
_gaq.push(['_trackEvent', 'Портфолио', 'Процесс', 'База стартапов SVCDB']);

// Вариант кода для подключения с использованием jQuery
$('.tab').click(function () {
    var _gaq = _gaq || [];
    _gaq.push(['_trackEvent', 'Портфолио', 'Процесс', 'База стартапов SVCDB']);
});

Готово, теперь как только загрузка кода аналитики завершится, все методы в очереди будут автоматически запущены, а все последующие обращения к методу push() будут перенаправлены к правильным методам. А вся собранная статистика доступна в панели Google Analytics во вкладке «События» раздела «Содержание»:

После добавления отслеживания событий может потребоваться до 24 часов, прежде чем статистика станет доступной.