react-gtm-module

React Google Tag Manager Module

This is a Javascript module to React based apps that implement Google Tag Manager. It is designed to use GTM snippet.

You can easily use custom dataLayer, multiple dataLayers and additional events.

Installation

npm:

1npm install react-gtm-module --save

Usage

Initializing GTM Module:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import Router from 'react-router'
4import routes from './routes'
5
6...
7import TagManager from 'react-gtm-module'
8
9const tagManagerArgs = {
10    gtmId: 'GTM-000000'
11}
12
13TagManager.initialize(tagManagerArgs)
14...
15
16const app = document.getElementById('app')
17ReactDOM.render(<Router routes={routes} />, app)
18

DataLayer

Custom dataLayer example:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import Router from 'react-router'
4import routes from './routes'
5
6...
7import TagManager from 'react-gtm-module'
8
9const tagManagerArgs = {
10    gtmId: 'GTM-000000',
11    dataLayer: {
12        userId: '001',
13        userProject: 'project'
14    }
15}
16
17TagManager.initialize(tagManagerArgs)
18...
19
20const app = document.getElementById('app')
21ReactDOM.render(<Router routes={routes} />, app)
22

Multiple dataLayer example:

If you need send multiple custom dataLayer you can initialize GTM Module on different components sending different dataLayers

You can initialize it normally:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import Router from 'react-router'
4import routes from './routes'
5
6...
7import TagManager from 'react-gtm-module'
8
9const tagManagerArgs = {
10    gtmId: 'GTM-000000',
11    dataLayerName: 'PageDataLayer'
12}
13
14TagManager.initialize(tagManagerArgs)
15...
16
17const app = document.getElementById('app')
18ReactDOM.render(<Router routes={routes} />, app)
19

And send your data in each page you want

1import React from 'react'
2
3...
4import TagManager from 'react-gtm-module'
5
6const tagManagerArgs = {
7    dataLayer: {
8        userId: '001',
9        userProject: 'project',
10        page: 'home'
11    },
12    dataLayerName: 'PageDataLayer'
13}
14...
15
16const Home = () => {
17    ...
18    TagManager.dataLayer(tagManagerArgs)
19    ...
20
21    return (
22        <div className='home'>
23            //your component code
24        </div>
25    )
26}
27
28export default Home
29

Events

Example:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import Router from 'react-router'
4import routes from './routes'
5
6...
7import TagManager from 'react-gtm-module'
8
9const tagManagerArgs = {
10    gtmId: 'GTM-000000',
11    events: {
12        sendUserInfo: 'userInfo'
13    }
14}
15
16TagManager.initialize(tagManagerArgs)
17...
18
19const app = document.getElementById('app')
20ReactDOM.render(<Router routes={routes} />, app)

Environments

Configure how Tag Manager will works between development and production server environments.

Example:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import Router from 'react-router'
4import routes from './routes'
5
6...
7import TagManager from 'react-gtm-module'
8
9const tagManagerArgs = {
10    gtmId: 'GTM-000000',
11    auth: '6sBOnZx1hqPcO01xPOytLK',
12    preview: 'env-2'
13}
14
15TagManager.initialize(tagManagerArgs)
16

How can I find auth and preview?

Go to Google Tag Manager -> ADMIN -> Environments -> Actions -> Get Snippet. Look for gtm_auth and gtm_preview

Don't know to use GTM environments?

- https://support.google.com/tagmanager/answer/6311518
- https://www.simoahava.com/analytics/better-qa-with-google-tag-manager-environments/

Value	Type	Required	Notes
gtmId	String	Yes	GTM id, must be something like GTM-000000.
dataLayer	Object	No	Object that contains all of the information that you want to pass to Google Tag Manager.
dataLayerName	String	No	Custom name for dataLayer object.
events	Object	No	Additional events such as 'gtm.start': new Date().getTime(),event:'gtm.js'.
auth	String	No	used to set environments.
preview	String	No	used to set environments, something like env-00.
nonce	String	No	used to add a nonce
elementId	String	No	used to add an id for "Custom HTML" tag nonce support

Note:

• Disabling javascript in the browser can prevent the correct operation of this library if React is only being rendered on the client side.

• Before implementing GTM in your application ensure that you have at least one published container, otherwise Google Tag Manager snippet will return 404.