Difficulty installing Google Tag Manager in React for Google Analytics

Question

I am trying to install Google Tag Manager on my React site, but when I read the documentation for Google Tag Manager it indicates that I should paste a long script tag into the head and body of every page:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager --> 

However, React sites do not traditionally use the script tag. How can I effectively and efficiently set my React site up with Google Tag Manager? Are there special React or JavaScript tags for SPAs?

Answer 1

You can add that script in /public/index.html since its a single page app but will only load once unless you add events depending on what your Google Tags do.

To implement Google Tag Manager, use NPM package for more customizable options: https://www.npmjs.com/package/react-google-tag-manager

If you're using Google analytics within your tag manger, read below.

Best approach is to use Google Analytics React NPM Package: https://github.com/react-ga/react-ga

Add: ReactGA.pageview(window.location.pathname + window.location.search); in your router change to make sure you get your page hits.