Из этого руководства вы узнаете, как с помощью analytics.js отслеживать активность на сайтах с динамически загружаемым контентом (без традиционной полной загрузки страницы).
Общие сведения
Одностраничное приложение (SPA) – это веб-приложение или веб-сайт, в котором все ресурсы, необходимые для работы с сайтом, загружаются вместе с первой страницей. В дальнейшем любой необходимый контент загружается динамически. Такое приложение может обновлять URL в адресной строке браузера, имитируя переходы между страницами, однако запрос другой полной страницы при этом не выполняется.
Стандартный тег Google Аналитики хорошо подходит для обычных сайтов, поскольку его код выполняется при каждой загрузке новой страницы. Однако при работе с одностраничным приложением, когда новый контент подгружается динамически, такой код будет выполнен лишь один раз. Поэтому отслеживание действий на странице по мере загрузки нового контента необходимо реализовать вручную.
Отслеживание действий на странице
Когда приложение динамически подгружает контент и обновляет URL в адресной строке, данные, сохраненные в счетчике, также должны обновляться.
Чтобы обновить счетчик, используйте команду set, указав новое значение page:
ga('set', 'page', '/new-page.html');
Теперь это значение будет использоваться во всех отправляемых обращениях. Чтобы зарегистрировать действие на странице, отправьте обращение pageview при помощи команды send сразу после обновления счетчика.
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
Строго говоря, в команде send для обращений pageview также можно использовать в качестве третьего параметра необязательное поле page. Однако мы не рекомендуем передавать page таким способом для отслеживания одностраничных приложений, потому что поля, передаваемые с помощью команды send, не сохраняются в объекте отслеживания – они применяются только к текущему обращению. Из-за того, что объект отслеживания не обновляется, могут возникать сбои при отправке обращений других типов помимо pageview (например, с информацией о событиях или социальных взаимодействиях). Эти обращения будут связаны со значением переменной page из объекта отслеживания, заданным при его создании.
Обработка нескольких URL для одного ресурса
Некоторые одностраничные приложения при динамической загрузке контента обновляют только хеш URL. Поэтому может возникнуть ситуация, когда несколько разных URL указывают на один и тот же ресурс. В таких случаях обычно рекомендуется выбирать канонический URL и всегда отправлять его в качестве значения переменной page в Google Аналитику.
Допустим, на страницу с контактными данными можно перейти по любому из следующих URL:
/about.html/#about.html/home.html#about.html
Чтобы избежать дублирования в отчетах, имеет смысл всегда регистрировать адрес /about.html в информации о просмотрах этой страницы.
Важные примечания
Не обновляйте URL перехода для документа
При создании объекта отслеживания с помощью команды create значение document.referrer сохраняется в поле referrer этого объекта. В одностраничном приложении не выполняется полная загрузка страниц, поэтому значение поля referrer всегда остается неизменным.
Несмотря на это, перед отправкой обращений pageview не обязательно вручную обновлять значение этого поля – Google Аналитика определяет путь навигации автоматически.
Не обновляйте сведения о местоположении документа
Как сказано выше, значение document.referrer сохраняется в поле referrer объекта отслеживания. Аналогичным образом значение document.location сохраняется в поле location этого объекта, которое может содержать информацию о рекламной кампании или другие метаданные в виде параметров запроса, добавляемых в конце URL.
При обновлении этих или других метаданных Google Аналитика может запустить новый сеанс вместо текущего. Чтобы избежать этого, при отслеживании действий на странице в одностраничном приложении не обновляйте поле location, а используйте вместо него поле page.
Не создавайте новые счетчики
Мы не рекомендуем при работе с приложением SPA имитировать функции кода отслеживания JavaScript для обычных сайтов, создавая новые счетчики. В этом случае могут быть отправлены неверные данные о кампании и URL перехода, как описано выше.