Integrating Google Tag Manager with a React App
Google Tag Manager is a great tool, it allows you to integrate third party data collection and analytics tools with your web site without modifying code. However, integrating with Tag Manager can be a bit of a mystery in the context of a Single Page Application, like one written in React.js.
You can’t just copy and paste a code snippet and expect everything to work
Upon setting up Tag Manager, it tells you to insert a couple of JavaScript snippets into every page of your website. Something along the lines of:
<!-- 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-XXXXXX');</script>
<!-- End Google Tag Manager --><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
But in a Single Page Application, there is really only one page, so do we just copy and paste this into index.html and call it a day?
Keep everything in JavaScript
While you can certainly just paste the supplied code snippets into the index.html file of your application, there are certain upsides to keeping code inside JavaScript files. For one, we use different GTM ID’s for different build environments. Keeping code inside JavaScript files and index.html to a bare minimum allows us to easily configure deployment bundles for different target environments.
We decided to use react-gtm-module (https://github.com/alinemorelli/react-gtm). We simply add the following code inside the JS file that mounts our App component to index.html and react-gtm-module injects the tag manager code in the right places. Note that the GTM ID can be a configuration variable from your build process.
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-XXXXXX'
}
TagManager.initialize(tagManagerArgs)Set a History Change trigger in your Tag Manager container
Since your tag manager code snippet sits inside of index.html the whole time, you will need to set a History Change trigger inside your Google Tag Manager workspace to detect route changes in your single page application:
With the History Change trigger in place, you can add new Tags and fire them based on the History Change trigger:
Don’t forget to publish your workspace
Once you are done setting up your triggers and tags, don’t forget to publish your workspace container. Otherwise, your website will get a 404 error when it tries to access your Tag Manager instance.
Finnovate.io is a technology company focused on helping organizations build unique digital experiences on web, mobile and blockchain. Finnovate.io offers development services, training, consulting, as well as a platform that rapidly turn paper based content into interactive experiences.
