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

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

Обзор

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

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

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

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

Чтобы получать отчеты о пути gtag.js, используйте команду set и укажите значение для параметра page_path.

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

Пример:

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

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

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

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

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

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

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