react-google-tag-manager

This repository contains a react based implementation for Google's Tag Manager snippet.

Motivation & Expectation

We like to use Google's Tag Manager in our React Stack. We wrap it into a component because it makes it testable. And based on our agreement every component needs to be tested.

Other requirements for the GTM implementation are:

1. provide a GTM-ID
2. provide additional events on script initialization (optional)
3. provide a name for the dataLayer (optional)
4. can be used for server-side-rendering and client-side-rendering
5. contains tests
6. installable via npm

How to use

To use it in your project run npm i react-google-tag-manager. It could be used like the following example:

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


class GoogleTagManager extends React.Component {
  componentDidMount() {
    const dataLayerName = this.props.dataLayerName;
    const scriptId = this.props.scriptId;

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

      eval(gtmScriptNode.textContent);
    }
  }

  render() {
    const gtm = gtmParts({
      id: this.props.gtmId,
      dataLayerName: this.props.dataLayerName,
      additionalEvents: this.props.additionalEvents,
      previewVariables: this.props.previewVariables
    });

    return (
      <div>
        <div>
          {gtm.noScriptAsReact()}
        </div>
        <div id={this.props.scriptId}>
          {gtm.scriptAsReact()}
        </div>
      </div>
    );
  }
}

GoogleTagManager.propTypes = {
  gtmId: React.PropTypes.string.isRequired,
  dataLayerName: React.PropTypes.string,
  additionalEvents: React.PropTypes.object,
  previewVariables: React.PropTypes.string,
  scriptId: React.PropTypes.string
};

GoogleTagManager.defaultProps = {
  dataLayerName: "dataLayer",
  scriptId: "react-google-tag-manager-gtm",
  previewVariables: false,
  additionalEvents: {}
};

export default GoogleTagManager;

You can render this later simply by

// inside the render method where you want to include the tag manager
<GoogleTagManager gtmId='GTM-12345' />

// or with all optional parameters
const event = { platform: 'react-stack' }

<GoogleTagManager gtmId='GTM-12345' scriptId='gtm-script-container' dataLayerName='dl-backup' additionalEvents={event} previewVariables='' />

In this example the google tag manager id, the dataLayer name, additional events and the script id where gtm script should be mounted are configurable through props:

prop	required	default value
gtmId	yes
dataLayerName	no	dataLayer
additionalEvents	no	{}
scriptId	no	react-google-tag-manager-gtm
previewVariables	no	false

Notes:

• The componentDidMount part is required as the script contents itself would not be executed otherwise on the client side
• As eval can be used to do harm, make sure that you are understanding what you are doing here and read through the script that is evaluated
• Additionally this module exports noScriptAsHTML() and scriptAsHTML() which return a simple HTML string
• gtmParts takes the following arguments:

argument keys	required	default value
id	yes
dataLayerName	no	dataLayer
additionalEvents	no	{}