Измерение одностраничных приложений

Этот документ предназначен для разработчиков, которые хотят измерять количество просмотров страниц в своем одностраничном приложении с помощью Google Analytics.

Одностраничные приложения (SPA) — это веб-сайты, которые загружают HTML-документ один раз и получают любой дополнительный контент с помощью API JavaScript.

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

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

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

На этой странице предполагается, что у вас уже есть:

• Аккаунт и ресурс Google Analytics для вашего сайта. Узнайте, как настроить Google Analytics .

• Тег Google, внедренный на ваш веб-сайт, который срабатывает при первой загрузке страницы. Узнайте, как настроить тег Google .

Внедрить измерение производительности одностраничных приложений.

Для точного измерения производительности SPA используйте один из следующих методов для запуска нового виртуального представления страницы:

• Изменения в истории браузера (рекомендуется): Если ваше одностраничное приложение использует API истории , в частности методы pushState() и replaceState() для обновления экранов, используйте эту опцию.

• Пользовательские события: Если ваш веб-сайт использует объект DocumentFragment для отображения различных экранов, воспользуйтесь этой опцией.

Реализация истории браузера. Реализация пользовательских событий.

Реализация изменения истории браузера

Если ваше одностраничное приложение использует History API, вы можете включить расширенные возможности отслеживания просмотров страниц в Google Analytics, чтобы автоматически отслеживать просмотры страниц на основе событий истории браузера.

Важный момент: если вы настраиваете теги с помощью Google Tag Manager, не включайте автоматическое отслеживание истории в GA4, так как это может привести к двойному подсчету просмотров страниц. Вместо этого ознакомьтесь с руководством « Измерение производительности одностраничных приложений с помощью Google Tag Manager» .

Включите расширенные возможности измерения в Google Analytics.

Для автоматического измерения page_views на основе истории браузера:

1. Откройте Google Аналитика

2. В разделе «Администрирование» , в подразделе «Сбор и изменение данных» , нажмите «Потоки данных» > «Веб» .

3. В разделе «Расширенные измерения» переведите переключатель в положение «Вкл.», чтобы активировать все параметры.

4. Нажмите, чтобы отредактировать отдельные параметры. В разделе «Просмотры страниц» нажмите « Показать расширенные настройки» . Убедитесь, что включены как загрузка страниц , так и изменение страниц на основе событий истории браузера .

   

5. Сохраните изменения.

Проверьте правильность настройки измерений.

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

1. Включите режим отладки для каждого тега в настройках измерения вашего SPA-приложения. Узнайте, как отслеживать события в DebugView .

2. Просмотрите ваше одностраничное приложение. При переходе на новый виртуальный экран в DebugView должно появиться новое событие page_view . Сравните параметры события page_view с предыдущим событием page_view , чтобы проверить, правильно ли обновлены ссылка на страницу и адрес страницы.

Дополнительные соображения для СПА-салонов

Помимо отправки событий page_view , для надежной интеграции SPA с Google Analytics и улучшения пользовательского опыта следует учитывать следующие дополнительные аспекты:

Управление положением прокрутки

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

Рекомендация: После каждого перехода между виртуальными страницами программно возвращайте положение прокрутки в начало страницы или в основной контейнер контента.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

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

Обеспечьте доступность контента для функций браузера.

Если пользователи сообщают о проблемах с такими функциями браузера, как неработающий поиск по странице (Ctrl+F) после виртуальной загрузки страницы, это может указывать на то, как ваше одностраничное приложение обновляет DOM.

Рекомендация: Убедитесь, что ваша SPA-платформа и логика маршрутизации полностью и синхронно обновляют соответствующие части DOM с новым содержимым страницы. Задержка рендеринга или контент, скрытый в основном дереве DOM, может быть не сразу проиндексирован функцией поиска браузера. Протестируйте поиск на странице после виртуальных переходов, чтобы подтвердить доступность контента.

Влияние на автоматические события

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

Например, событие user_engagement измеряет время, которое пользователь активно проводит на странице. Без виртуальных просмотров страниц все время взаимодействия приписывается первоначальной загрузке страницы, что делает невозможным анализ времени, проведенного на отдельных экранах.

Когда измерение количества просмотров виртуальных страниц реализовано корректно:

• Событие user_engagement отправляется, когда пользователь переходит с одной виртуальной страницы на другую.
• Время взаимодействия с предыдущей виртуальной страницей рассчитывается и отправляется вместе с событием user_engagement , как правило, непосредственно перед обработкой события page_view для новой виртуальной страницы.
• Другие события, такие как клики или прокрутка, связаны с page_location виртуальной страницы, которую пользователь просматривает в данный момент.

Это позволяет анализировать вовлеченность пользователей и другие показатели для отдельных экранов или разделов в вашем SPA-приложении, обеспечивая более точное понимание пути пользователя.