Как ты можешь интегрировать Google Analytics с React Router, чтобы отслеживать просмотры страниц?

Question

Accepted Answer

## Обзор
Чтобы реализовать **отслеживание Google Analytics** в приложении React Router, нужно слушать изменения маршрутов и отправлять события просмотра страницы в Google Analytics каждый раз, когда пользователь переходит на другую страницу.

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

## Реализация
```javascript
history.listen(function (location) {
  window.ga('set', 'page', location.pathname + location.search);
  window.ga('send', 'pageview', location.pathname + location.search);
});
```

## Как это работает
При каждой навигации слушатель выполняет два действия:

- **Устанавливает путь страницы**: вызывает `window.ga('set', 'page', ...)`, чтобы обновить текущий путь в Google Analytics — включая pathname и query string
- **Отправляет событие просмотра страницы**: вызывает `window.ga('send', 'pageview', ...)` для записи pageview

## Важные моменты
- Убедись, что Google Analytics инициализирован до добавления слушателя
- Комбинация `location.pathname + location.search` захватывает полный URL для точного отслеживания
- Регистрируй слушателя рядом с инициализацией компонента Router
- В современных версиях React Router вместо прямого обращения к объекту history лучше использовать хук `useEffect` вместе с `useLocation`

Как ты можешь интегрировать Google Analytics с React Router, чтобы отслеживать просмотры страниц?

Ответ

Обзор

Подход к реализации

Реализация

Как это работает

Важные моменты

Проверочные вопросы

Помогите улучшить этот вопрос

Обсуждение