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:
;; Component { const dataLayerName = thispropsdataLayerName || 'dataLayer'; const scriptId = thispropsscriptId || 'react-google-tag-manager-gtm'; if !windowdataLayerName const gtmScriptNode = document; ; } { const gtm = ; return <div> <div>gtm</div> <div id=thispropsscriptId || 'react-google-tag-manager-gtm'> gtm </div> </div> ; } GoogleTagManagerpropTypes = gtmId: ReactPropTypesstringisRequired dataLayerName: ReactPropTypesstring additionalEvents: ReactPropTypesobject previewVariables: ReactPropTypesstring scriptId: ReactPropTypesstring; ;
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 | {} |