How to track page views in react using reach router and google analytics?

react-router google analytics
reach/router createhistory
react analytics library
google analytics react
browserhistory listen
react track page views
reach/router location
google analytics spa react

I'm porting backbone app to React app. in backbone app I have the following snippet

    <!-- 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 -->

And then on each page render after updating meta tags it calls

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

I assume I can just drop init logic into index.html, but what would be a nice, simple way to hook window.ga('send', 'pageview'); into reach router, so that when route changes or updates, pageview would be sent to GA?


You can manually create the history object that you can listen to for changes with the createHistory function. You could attach a listener and send a pageview event there.

Example

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

const history = createHistory(window);

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

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

How to track page views in react using reach router and google , Is there a particular way navigation tracking should be done? the React component tree via createHistory: https://reach.tech/router/api/createHistory V2 migration docs : Add snippet on tracking page views with new router ( Here, we will be looking at how to integrate analytics from Google using an open source library from Github call React-GA. Firstly, head over to our Google Analytics Dashboard to do some setup. Go


You can listen to the global history object. In your App.js:

import { globalHistory } from '@reach/router';

history.listen(({ location }) => {
  window.ga('send', 'pageview');
  // or use the new gtag API
  window.gtag('config', 'GA_MEASUREMENT_ID', {'page_path': location.pathname});
});

tracking pageviews · Issue #43 · reach/router · GitHub, to add Google Analytics to my site, using react-ga. I can get an initial page load event to fire, but have not worked out how to track page views  Be able to track the navigation routes using Google Analytics. React apps are SPA (Single Page Application) that is the reason we don't see any change in the browser's address bar. Usually we saw


You can use the location provider API from reach router:

import { Router,createHistory,LocationProvider }from "@reach/router";
import ReactGA from "react-ga";
ReactGA.initialize("UA-103xxxxx-xx");
const history= createHistory(window);
history.listen( window => {
  ReactGA.pageview(window.location.pathname+ window.location.search);
  console.log('page=>',window.location.pathname);
});

And then in use it in the route:

<LocationProvider history={history}>
  <Router></Router>
</LocationProvider>

Here is the complete solution.

How to handle router events (for Google Analytics)? · Issue #412 , Google Analytics was designed with traditional websites and web that Google Analytics had some mechanism to automagically track page views. With react-​router we can extend Route with a component that calls our  Track Page Views. Tracking page views in a single page app like react may seem like it would be complicated but its relatively simple thanks to react-router and history libraries. history.listen((location) => { ReactGA.set({ page: location.pathname }); ReactGA.pageview(location.pathname) } );


Tracking Single Page Applications with Google Analytics, Pageview Tracking. In my personal implementations, I will also use react-router which allows you to easily create a React app with full routing  The logPageChange method itself uses React GA's method set and pageView to actually trigger the page change on the Google Analytics side. We also include location field with window.location.origin included due to ReactGA's issue .


Using Google Analytics with React, Called from metaManager // ga('send', 'pageview'); </script> <script async src="​https://www.google-analytics.com/analytics.js"></script> It triggers a Google Analytics pageview on mount (the “initial visit” to your website). We also give the Router a history so we can listen to it every time the page changes. Now, just import AppRoutes into your application and you’re done! Congrats, you’ve integrated Google Analytics with React Router v4.


React analytics tracking, A virtual pageview is a hit which Google Analytics track as 'pageview', even is a solution for react-router version 4 using the component to track page views. with no other special tracking needs, you don't need to reach for any 3rd party  If you’re interested in tracking page visits (and user behavior down the road), I suggest using the Segment analytics library and following our React quickstart guide to track page calls using the react-router library. You can allow the <Route /> component to handle when the page renders and use componentDidMount to invoke page calls. The