Отслеживание одностраничных приложений с помощью gtag.js

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

Обзор

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

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

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

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

Чтобы изменить путь к странице page_path, измените настройку config ресурса, указав требуемое значение параметра page_path:

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

Теперь для всех последующих событий, отправленных этому ресурсу, будет использоваться новое значение page_path.

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

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

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

  • /about
  • /#/about
  • /home/#/about

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