React-ga не вычисляет первый доступ

Question

Я настроил React-g с React Router следующим образом:

...
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import ReactGA from 'react-ga';

ReactGA.initialize('MY TRACKING CODE', {
  debug: true
});

const history = createHistory();
history.listen((location) => {
  ReactGA.set({ page: location.pathname });
  ReactGA.pageview(location.pathname);
});


ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Layout />
    </Router>
  </Provider>
), document.getElementById('root'));
registerServiceWorker();

если я уже на странице и имею доступ к другому пути, я получаю следующее на консоли:

 log.js:2 [react-ga] called ga('set', fieldsObject);
 log.js:2 [react-ga] with fieldsObject: {"page":"/products"}
 log.js:2 [react-ga] called ga('send', 'pageview', path);
 log.js:2 [react-ga] with path: /products

Однако, если я впервые захожу на страницу (нажав на ссылку или введя путь непосредственно в браузере), я ничего не получу на консоли.

Есть ли какой-то шаг, который я пропускаю, чтобы вычислить первый доступ?

Answer 1

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

Следующая настройка работала для меня:

...
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import ReactGA from 'react-ga';

const trackPageView = location => {
  ReactGA.set({ page: location.pathname });
  ReactGA.pageview(location.pathname);
};

const initGa = history => {
  ReactGA.initialize('MY TRACKING CODE', {
    debug: true
  });
  trackPageView(history.location);
  history.listen(trackPageView);
};

const history = createHistory();
initGa(history);

ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Layout />
    </Router>
 </Provider>
), document.getElementById('root'));
registerServiceWorker();