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

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

Одностраничные приложения – это сайты, которые загружают 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, чтобы проверить, правильно ли обновлены URL перехода и URL страницы.

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

Помимо отправки событий 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.

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

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

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

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

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

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

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