Question

177

Difficulty installing Google Tag Manager in React for Google Analytics

rated 0 times [ 178] [ 1] / answers: 1 / hits: 20027 / 6 Years ago, fri, august 24, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadon

Add To Favorites

Follow

Total Points: 488

Total Questions: 105

Total Answers: 105

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

answered 6 Years ago mahogany · Accepted Answer

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.