Как отследить количество просмотров страниц в реакции, используя роутер и Google Analytics?

Question

Я портирую магистральное приложение на приложение React. в приложении магистрали у меня есть следующий фрагмент

    <!-- Begin UA code -->
    <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-xxx', 'auto');

    // Load plugins

    // Rewrite all GA pages with /ra_minisite prefix
    ga('require', 'cleanUrlTracker', {
      stripQuery: true,
      queryDimensionIndex: 1,
      urlFieldsFilter: function(fieldsObj, parseUrl) {
        fieldsObj.page = '/ra_minisite'+parseUrl(fieldsObj.page).pathname
        return fieldsObj;
      },
    });

    ga('require', 'eventTracker');
    ga('require', 'maxScrollTracker');

    // Customize so WS.com not tracked as outbound link
    ga('require', 'outboundLinkTracker');

    ga('require', 'socialWidgetTracker');
    ga('require', 'urlChangeTracker');

    // Commented out so we can call after all API calls are done
    // Called from metaManager
    // ga('send', 'pageview');

    </script>
    <script async src="https://www.google-analytics.com/analytics.js"></script>
    <script async src="/autotrack.js"></script>
    <!-- end UA code -->

И затем на каждой странице рендеринга после обновления мета-тегов она вызывает

window.ga('send', 'pageview');

Полагаю, я могу просто добавить логику инициализации в index.html, но какой простой и удобный способ подключить window.ga('send', 'pageview'); к маршрутизатору досягаемости, чтобы при изменении или обновлении маршрута просмотр страницы отправлялся в GA?

Answer 1

Вы можете вручную создать объект истории, который вы можете прослушивать для изменений, с помощью функции createHistory. Вы можете прикрепить слушателя и отправить туда событие pageview.

Пример

import { createHistory, LocationProvider } from '@reach/router';

const history = createHistory(window);

history.listen(() => {
  window.ga('send', 'pageview');
});

const App = () => (
  <LocationProvider history={history}>
    <Routes />
  </LocationProvider>
);