Как отслеживать одностраничные приложения

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

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

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

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

Подготовка

В этой статье подразумевается, что у вас уже есть:

• Аккаунт и ресурс Google Аналитики для вашего сайта. Подробнее о том, как настроить Google Аналитику…

• Тег Google, добавленный на ваш сайт и срабатывающий при первой загрузке страницы. Подробнее о том, как настроить тег Google…

Как реализовать отслеживание одностраничных приложений

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

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

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

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

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

Как включить улучшенную статистику в Google Аналитике

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

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

2. Откройте страницу Администратор и в разделе Сбор и редактирование данных выберите Потоки данных > Сайт.

3. В разделе Улучшенная статистика установите переключатель в положение Вкл, чтобы активировать все функции.

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

   

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

Как проверить настройки отслеживания

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

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

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

Дополнительные сведения об одностраничных приложениях

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

Как управлять положением прокрутки

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

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

// 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 Аналитике точно отслеживать прокрутку и измерять вовлеченность на новой виртуальной странице.

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

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

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

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

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

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

Если отслеживание просмотров страниц настроено правильно:

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

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