react-google-tag-manager

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

Showing:

Popularity

Downloads/wk

7.6K

GitHub Stars

195

Maintenance

Last Commit

3yrs ago

Contributors

10

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

NPM Version Build Status Dependencies

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 || '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,
            dataLayerName: this.props.dataLayerName || 'dataLayer',
            additionalEvents: this.props.additionalEvents || {},
            previewVariables: this.props.previewVariables || false,
            scheme: this.props.scheme || 'https:',
        });

        return (
            <div>
                <div>{gtm.noScriptAsReact()}</div>
                <div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
                    {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,
    scheme: React.PropTypes.string,
};

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='' scheme='https:' />

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:

proprequireddefault value
gtmIdyes
dataLayerNamenodataLayer
additionalEventsno{}
scriptIdnoreact-google-tag-manager-gtm
previewVariablesnofalse
scheme nohttps:

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 keysrequireddefault value
idyes
dataLayerNamenodataLayer
additionalEventsno{}
schemeno``
previewVariablesnofalse

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial