CODEWITHSUNDEEP
reactjsgoogle-analyticsreact-router
SpoKaPh
SpoKaPh

Reputation: 167

How to set up Google Analytics 4 for React-Router?

I'm trying to set up Google Analytics 4 on my react site. Previously I used react-ga, but this library doesn't support Google Analytics 4 yet. I pasted the GA4 tag directly into the index.html file without an external library. What additional code do I need to add to get GA4 to work with react router?
Thanks in advance!

Upvotes: 10

Views: 7414

Answers (5)

thisismydesign
thisismydesign

Reputation: 25182

Background: There are 2 types of Google Analytics properties: Universal Analytics (UA-xxxxxxxxx-x) which is deprecated with the end of life on 2023.07.01 and Google Analytics 4 property (G-xxxxxxxxxx) which is the replacement.

The simplest way to get started is to follow Google's guide: include gtag on the page and use it as window.gtag. This method works for both old and new tags and there's even TypeScript support via @types/gtag.js. The script can be loaded async as recommended.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-xxxxxxxxxx')
    </script>

    <!-- ... -->
  </head>

  <body>
    <!-- ... -->
  </body>
</html>

Keep in mind that Google Analytics does automatic page tracking, but this will not work for every use case. For example, hash and search parameter changes are not tracked. This can lead to a lot of confusion. For example, when using HashRouter or anchor links the navigation will not be tracked. To have full control over page view tracking you can disable automatic tracking. See for a detailed explanation: The Ultimate Guide to Google Analytics (UA & GA4) on React (Or Anything Else

Manual page tracking: https://stackoverflow.com/a/63249329/2771889

You can see this working in cra-typescript-starter where I'm also setting the tag from an env var.

Upvotes: 0

PennsBestNA
PennsBestNA

Reputation: 1

You should be able stop using react-ga and just insert the global script tag in index.html as Cameron mentioned. Keep in mind you'll likely need to ensure that your app is updating both the window.location and document.title for GA4 work as desired.

Google's docs mention:

"When a pageview is sent to Analytics, the default page parameter values are used, unless modified. This means you do not need to modify page_title or page_location parameters if updates to window.location (e.g. via the History API) and document.title are made prior to the event being sent.".

I have a simple single page application and wasn't receiving detailed page view data until I updated the title AND location at each render.

Upvotes: 0

Dani Alcal&#224;
Dani Alcal&#224;

Reputation: 252

No additional code is needed, just paste that tag into the index.html and Google Analytics will track all your urls.

Upvotes: -1

cisco
cisco

Reputation: 888

You can also checkout the npm package ga-4-react:

https://www.npmjs.com/package/ga-4-react

Upvotes: 1

cameronjchurch
cameronjchurch

Reputation: 410

You can call gtag directly. Just put the global site tag code in your index.html <head>.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

I was facing the same issue today and ended up pulling out the react-ga package and going this route. I saved the withTracker.js piece from the react-ga demo code and modified it like below.

export default function withTracker(WrappedComponent, options = {}) {
    const trackPage = (page) => {
        window.gtag('send', 'page_view', {
            page_location: window.location.href,
            page_path: window.location.pathname            
        });
    };
...

Upvotes: 12

Related Questions