Как настроить веб-аналитику одностраничных приложений (SPA)

Одностраничное приложение (Single-Page Application) — это когда веб-приложение создано так, что все взаимодействие с сайтом происходит на одной HTML-странице, а необходимые данные подгружаются динамически при помощи AJAX-запросов на сервер.

Чаще всего SPA созданы так, что вы можете думать, что переходите по ссылкам на различные разделы сайта. Однако фактически страница сайта не будет перезагружаться при переходе по разделам, а javascript-код будет в зависимости от ваших действий либо показывать скрытые ранее блоки и скрывать ненужные, либо загружать их динамически через AJAX.

Одностраничные приложения удобны по нескольким причинам:

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

В чем проблема?

Из-за специфического принципа работы SPA код Google Analytics или Google Tag Manager сработает лишь единожды, если только пользователь самостоятельно не перезагрузит страницу в браузере. Несмотря на то, что пользователи могут (и будут) совершать несколько переходов по разделам, стандартными методами Google Analytics этого отследить не может. При этом в первую очередь страдают такие метрики:

  • Количество страниц на сеанс;
  • Показатель отказов;
  • Длительность сеанса.

Как исправить отслеживание страниц в SPA?

Для перехода на новую страницу без перезагрузки одностраничные приложения используют HTML5 History API — набор методов JavaScript, при помощи которых можно манипулировать содержимым истории текущей вкладки — перемещаться вперед и назад, а также пополнять стек истории.

Если вы пользуетесь стандартной реализацией кода отслеживания Universal Analytics, рекомендации по отслеживанию одностраничных приложений можно почитать на странице справки Google. В общем случае разработчику веб-приложения необходимо добавить в блок(и) кода, который выполняет перемещение по истории, следующие строчки:

Рассмотрим подробнее, как можно встроить этот код на примере двух популярных JS-фреймворков — ReactJS и AngularJS.

ReactJS

Вручную:

Если веб-приложение на React использует библиотеку React Router, добавьте к приложению:

Или используйте готовое решение — установите библиотеку react-ga и подключите скрипт к странице:

AngularJS 1

Этот метод сработает, если веб-приложение работает на Angular.js 1-й версии и использует библиотеку UI-Router.  Добавьте отслеживание события $stateChangeSuccess в коде приложения:

Как и в случае с React, для AngularJS также есть плагин, упрощающий настройку веб-аналитики: Angulartics.

Также не забудьте подключить скрипт и подключить в качестве зависимости:

Angular 2+

О приложениях на новой версии Angular создатели плагина Angulartics также позаботились: на странице Angulartics2 можно найти подробные настройки по установке и интеграции плагина для Angular 2 (на английском языке).

Google Tag Manager

Если на сайте установлен Google Tag Manager, настройка корректного отслеживания займет меньше усилий, и сводится к небольшой надстройке над привычным способом внедрения тега GA в Google Tag Manager.

В Google Tag Manager  встроено отслеживание истории браузера. Чтобы его включить, создайте новый триггер типа «Изменение в истории»:

spa-gtm-trigger

Затем примените этот триггер к тегу Universal Analytics (Просмотр страницы):

spa-gtm-ga-tag

Тег теперь будет срабатывать не только на загрузку/перезагрузку страницы (All Pages), но и на каждое событие «изменение в истории».

Заключение

Аналитика веб-приложений — интересная и глубокая тема. В статье мы коснулись лишь поверхности, описав способы устранения некорректного сбора данных в Google Analytics для ReactJS и AngularJS 1, а также при помощи Google Tag Manager. Если у вас был опыт настройки систем аналитики на одностраничных приложениях и вы хотите им поделиться, приглашаем сделать это в комментариях к статье!