How to implement GTM with reactjs

Asked 9/4, 2018 at 13:33 Answered 23/3 at 6:1

I am trying to implement GTM with reactjs. I have used react-google-tag-manager but it did not solve the purpose. Somehow, the data layer needs to be in a particular format and also the needs to be right below the tag, but it is only one of them that i can achieve at a time. I tried placing the code directly in template.html and call the function from the component i wanted, but that didn't work.

import React from 'react';
import gtmParts from 'react-google-tag-manager';

class GoogleTagManager extends React.Component {
   componentDidMount() {        
       const dataLayerName = this.props.dataLayerName || 'dataLayer';
       const scriptId = this.props.scriptId || 'react-google-tag-manager-gtm';

       if (!window[dataLayerName]) {
           const gtmScriptNode = document.getElementById(scriptId);

           eval(gtmScriptNode.textContent);
       }
   }

   render() {

       const gtm = gtmParts({
           id: this.props.gtmId,
           sourcegroup: this.props.gtmGroupname,
           sourceid:this.props.gtmSource,
           age:this.props.age,
           mtongue:this.props.gtmMtongue,
           city:this.props.city,

       });

       return (
           <div>
               <div>{gtm.noScriptAsReact()}</div>
               <div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
                   {gtm.scriptAsReact()}
               </div>
           </div>
       );        
   }
}

export default GoogleTagManager;

I am pushing parameters in DataLayer and on checking on google tag assistant addon, whole the datalyer is empty.

Licorice answered 9/4, 2018 at 13:33 Comment(0)

I had this issue yesterday and to solve it, I had to put all the properties that I'm trying to record under the additionalEvents property. Something like this:

const gtm = gtmParts({
    id: this.props.gtmId,
    additionalEvents: {
         sourcegroup: this.props.gtmGroupname,
         sourceid:this.props.gtmSource,
         age:this.props.age,
         mtongue:this.props.gtmMtongue,
         city:this.props.city
    }
})

And also avoid using eval() since this is a dangerous pratique. Update your code like this:

if (!window[dataLayerName]) {
    const script = document.createElement("script")
    const gtmScriptNode = document.getElementById(scriptId)
    const scriptText = document.createTextNode(gtmScriptNode.textContent)

    script.appendChild(scriptText)
    document.head.appendChild(script)
}

Kartis answered 1/6, 2018 at 9:52 Comment(0)

Here is a quick and easy way to implement GTM in React:

Add the following code to your <head> tag in public/index.html file:

<script nonce="your-nonce-here">
var gtmId = 'your-gtm-id-here';
(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', `${gtmId}`);
</script>

Note: please replace the placeholders: your-nonce-here, your-gtm-id-here with actual values.

Payola answered 23/3 at 6:1 Comment(0)

Recommended topics

Hot tags