react-google-tag-manager
v2.2.1
Published
This package contains a react based implementation for Google's Tag Manager snippet.
Downloads
39,203
Readme
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:
- provide a GTM-ID
- provide additional events on script initialization (optional)
- provide a name for the dataLayer (optional)
- can be used for server-side-rendering and client-side-rendering
- contains tests
- 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,
});
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
};
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()
andscriptAsHTML()
which return a simple HTML string gtmParts
takes the following arguments:
| argument keys | required | default value |
| ------------------- | ------------- | ------------- |
| id
| yes | |
| dataLayerName
| no | dataLayer
|
| additionalEvents
| no | {}
|