Отслеживание одностраничных приложений

Из этой статьи вы узнаете, как с помощью библиотеки analytics.js отслеживать страницы на сайтах с динамически загружаемым контентом (без полной загрузки страницы).

Обзор

Одностраничное приложение (SPA) – это веб-приложение или веб-сайт, в котором все ресурсы, необходимые для работы с сайтом, загружаются вместе с первой страницей. В дальнейшем любой необходимый контент загружается динамически. Такое приложение часто обновляет URL в адресной строке браузера, имитируя переходы между страницами, однако запрос другой полной страницы при этом не выполняется.

Стандартный код отслеживания JavaScript выполняется при загрузке каждой новой страницы и наилучшим образом подходит для обычных веб-сайтов. Однако при работе с одностраничным приложением, когда новый контент подгружается динамически, а не с полностью загружаемой новой страницей, такой код будет выполнен лишь один раз. Поэтому последующие действия на странице приходится отслеживать вручную по мере загрузки нового контента.

Отслеживание действий на странице

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

Чтобы обновить счетчик, используйте команду set и укажите новое значение переменной page:

ga('set', 'page', '/new-page.html');

Теперь это значение будет использоваться во всех отправляемых обращениях. Чтобы зарегистрировать действие на странице, отправьте обращение pageview при помощи команды send сразу после обновления счетчика.

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

Строго говоря, в команде send для обращений pageview также можно использовать в качестве третьего параметра необязательное поле page. Однако мы не рекомендуем передавать это поле таким способом для отслеживания одностраничных приложений, потому что поля, передаваемые в команде send, задаются не в счетчике – они применяются только к текущему обращению. Если счетчик не обновляется, могут возникнуть сбои, когда приложение отправит обращения, отличные от pageview (например, связанные с событиями или социальными взаимодействиями), поскольку эти обращения будут связаны со значением переменной page, присвоенным ей при создании счетчика.

Обработка нескольких URL для одного ресурса

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

Допустим, на страницу с контактными данными веб-сайта можно перейти по любому из следующих URL:

  • /about.html
  • /#about.html
  • /home.html#about.html

Чтобы данные в отчетах не повторялись, отслеживать просмотры этой страницы лучше всего по пути /about.html.

Важная информация

Не обновляйте URL перехода для документа

При создании объекта счетчика с использованием команды create значение атрибута document.referrer сохраняется в поле referrer счетчика. В одностраничном приложении страницы не загружаются полностью, поэтому значение поля referrer будет всегда одинаковым.

Несмотря на это, перед отправкой обращений pageview не обязательно вручную обновлять значение этого поля – Google Analytics определяет путь навигации автоматически.

Не обновляйте сведения о местоположении документа

Подобно тому как в счетчике применяется параметр document.referrer для поля referrer, параметр document.location используется для поля location. В нем могут указываться данные о кампании или другие метаданные в виде параметров запроса, добавленных в конец URL.

При обновлении этих или других метаданных Google Analytics может запустить новый сеанс вместо текущего. Чтобы избежать этого, при отслеживании действий на странице в одностраничном приложении не обновляйте поле location, а используйте вместо него поле page.

Не создавайте новые счетчики

Мы не рекомендуем при работе с приложением SPA имитировать функции кода отслеживания JavaScript для обычных сайтов, создавая новые счетчики. В этом случае могут быть отправлены неверные данные кампании и URL перехода, как описано выше.