This repository contains a react based implementation for Google's Tag Manager snippet.
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:
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:
prop | required | default value |
---|---|---|
gtmId |
yes | |
dataLayerName |
no | dataLayer |
additionalEvents |
no | {} |
scriptId |
no | react-google-tag-manager-gtm |
previewVariables |
no | false |
scheme |
no | https: |
componentDidMount
part is required as the script contents itself would not be executed otherwise on the client sideeval
can be used to do harm, make sure that you are understanding what you are doing here and read through the script that is evaluatednoScriptAsHTML()
and scriptAsHTML()
which return a simple HTML stringgtmParts
takes the following arguments:argument keys | required | default value |
---|---|---|
id |
yes | |
dataLayerName |
no | dataLayer |
additionalEvents |
no | {} |
scheme |
no | `` |
previewVariables |
no | false |