Оценивайте производительность одностраничных приложений с помощью Google Tag Manager.

В этом руководстве показано, как настроить мониторинг Google Analytics для одностраничного приложения (SPA) с помощью Google Tag Manager. Вы узнаете, как настроить свой ресурс Google Analytics, включить необходимые переменные GTM и создать теги, которые срабатывают при изменении истории.

Прежде чем начать

В этом руководстве предполагается, что у вас есть:

• Аккаунт и ресурс Google Analytics .
• Контейнер Google Tag Manager, установленный в вашем SPA-приложении.
• Должность редактора (или выше) в Google Analytics и Google Tag Manager.

Шаг 1: Подготовка потока данных GA4

Для ручного отслеживания событий page_view в одностраничном приложении (SPA) необходимо сначала отключить автоматическое отслеживание просмотров страниц на основе истории в Google Analytics 4, чтобы избежать двойного учета.

1. Откройте Google Analytics .
2. В разделе «Администрирование» , в подразделе «Сбор и изменение данных» , нажмите «Потоки данных» .
3. Выберите поток веб-данных.
4. В разделе «Расширенные измерения» нажмите значок настроек. .
5. В разделе «Просмотр страниц» > «Показать расширенные настройки» снимите флажок « Изменения страниц на основе событий истории браузера» .
6. Нажмите « Сохранить ».

Шаг 2: Включите встроенные переменные истории в менеджере тегов.

Для использования триггеров или переменных, основанных на истории событий, в GTM необходимо сначала включить встроенные переменные истории.

1. Откройте Google Tag Manager .
2. В рабочей области перейдите в раздел «Переменные» .
3. В разделе «Встроенные переменные» нажмите «Настроить» .
4. В разделе «История» включите следующие переменные:
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Закройте панель настроек.

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

Примечание: В некоторых старых документах могут упоминаться Old History URL или New History URL . Это не стандартные встроенные переменные. Используйте вместо них указанные переменные.

Шаг 3: Создайте триггер «Изменения в истории».

Далее создайте триггер, который будет срабатывать всякий раз, когда в вашем SPA происходит событие изменения истории (например, pushState или replaceState ).

1. В рабочей области Tag Manager перейдите в меню «Триггеры» .
2. Нажмите «Создать» .
3. В разделе «Конфигурация триггера» выберите триггер « Изменения в истории» .
4. (Необязательно) Если вы хотите отслеживать только определенные изменения на экране, измените триггер так, чтобы он срабатывал при некоторых изменениях в истории .
5. Назовите триггер (например, «Изменение истории») и нажмите «Сохранить» .

Шаг 4: Создайте тег Google.

Теперь создайте тег Google, который будет обновлять параметр page_location всякий раз, когда происходит изменение истории.

1. В меню «Теги» нажмите «Создать» .
2. В разделе «Настройки тегов» выберите тег Google .
3. Введите свой идентификатор тега (тот же идентификатор, который использовался для вашего первоначального тега Google).

4. В разделе «Настройки конфигурации» добавьте следующие параметры:

   • page_location : {{Page URL}}
   • page_title : {{Page Title}}
   • update : true
   Примечание: Параметр update объединяет значения конфигурации с существующей конфигурацией тега и подавляет немедленное дублирование события page_view . page_referrer здесь не включен, поскольку Google Analytics автоматически отслеживает исходный внешний реферер при первоначальной загрузке страницы, и его отсутствие позволяет Google Analytics автоматически заполнять URL-адрес предыдущей виртуальной страницы в качестве реферера для пути навигации в ваших отчетах.

5. Присвойте тегу имя (например, "Google Tag - SPA Update") и нажмите "Сохранить" .

   Примечание: Не добавляйте триггер в раздел «Триггеры» для этого тега Google. Он срабатывает как настраиваемый тег с использованием последовательности тегов на шаге 5.

Шаг 5: Отправьте виртуальное событие page_view

Наконец, создайте тег события GA4 для отправки фактического события page_view при каждой загрузке виртуальной страницы.

1. В меню «Теги» нажмите «Новый» .
2. В разделе «Настройки тега» выберите Google Analytics: Событие GA4 .
3. Введите идентификатор вашего измерения .
4. Задайте имя события как page_view .
5. В разделе «Расширенные настройки» > «Последовательность тегов» выберите «Запускать тег перед событием GA4 — Просмотр виртуальной страницы» и выберите тег Google Tag — SPA Update , который вы создали на шаге 4.
6. В разделе «Запуск» выберите триггер « Изменение истории» , созданный вами на шаге 3.
7. Присвойте тегу имя (например, "GA4 Event - Virtual Page View") и нажмите "Сохранить" .

Шаг 6: Проверьте настройки

Чтобы убедиться, что просмотры виртуальных страниц регистрируются корректно:

1. В менеджере тегов нажмите «Предварительный просмотр» , чтобы перейти в режим предварительного просмотра .
2. Перемещайтесь по своему SPA-приложению.
3. В окне отладки Google Analytics убедитесь, что при каждом изменении экрана появляется новое событие page_view .
4. Убедитесь, что значения page_location соответствуют вашим ожиданиям.

Примечание: Использование стандартного {{Referrer}} позволяет зафиксировать первоначальный источник, который привёл пользователя на ваш сайт. Чтобы отслеживать предыдущую виртуальную страницу в вашем SPA в качестве источника перехода, вам потребуется реализовать пользовательскую переменную GTM для хранения адреса предыдущей страницы.