What is react-gtm-module?
The react-gtm-module package is a React wrapper for Google Tag Manager (GTM). It allows developers to easily integrate GTM into their React applications, enabling them to manage and deploy marketing tags without modifying the codebase directly.
What are react-gtm-module's main functionalities?
Initialize GTM
This feature allows you to initialize Google Tag Manager with a specific GTM ID. The GTM ID is provided in the `tagManagerArgs` object, and the `initialize` method sets up GTM for your application.
import TagManager from 'react-gtm-module';
const tagManagerArgs = {
gtmId: 'GTM-XXXXXX'
};
TagManager.initialize(tagManagerArgs);
Data Layer Push
This feature allows you to push data to the GTM data layer. The `dataLayer` method takes an object with the data you want to push, such as events or page information.
import TagManager from 'react-gtm-module';
const dataLayerArgs = {
dataLayer: {
event: 'pageview',
page: {
url: '/home',
title: 'Home Page'
}
}
};
TagManager.dataLayer(dataLayerArgs);
Custom Events
This feature allows you to send custom events to GTM. You can specify the event name and additional parameters like category, action, and label.
import TagManager from 'react-gtm-module';
const eventArgs = {
event: 'customEvent',
category: 'video',
action: 'play',
label: 'home page video'
};
TagManager.dataLayer({ dataLayer: eventArgs });
Other packages similar to react-gtm-module
react-gtm
The react-gtm package is another React wrapper for Google Tag Manager. It offers similar functionalities such as initializing GTM and pushing data to the data layer. However, react-gtm-module is often preferred for its more comprehensive documentation and ease of use.
react-google-tag-manager
The react-google-tag-manager package is another option for integrating GTM with React. It provides a simple API for initializing GTM and pushing data to the data layer. While it offers similar functionalities, react-gtm-module is often chosen for its better community support and more frequent updates.
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:
npm install react-gtm-module --save
Usage
Initializing GTM Module:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'react-router'
import routes from './routes'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000'
}
TagManager.initialize(tagManagerArgs)
...
const app = document.getElementById('app')
ReactDOM.render(<Router routes={routes} />, app)
DataLayer
Custom dataLayer example:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'react-router'
import routes from './routes'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
dataLayer: {
userId: '001',
userProject: 'project'
}
}
TagManager.initialize(tagManagerArgs)
...
const app = document.getElementById('app')
ReactDOM.render(<Router routes={routes} />, app)
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:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'react-router'
import routes from './routes'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
dataLayerName: 'PageDataLayer'
}
TagManager.initialize(tagManagerArgs)
...
const app = document.getElementById('app')
ReactDOM.render(<Router routes={routes} />, app)
And send your data in each page you want
import React from 'react'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
dataLayer: {
userId: '001',
userProject: 'project',
page: 'home'
},
dataLayerName: 'PageDataLayer'
}
...
const Home = () => {
...
TagManager.dataLayer(tagManagerArgs)
...
return (
<div className='home'>
//your component code
</div>
)
}
export default Home
Events
Example:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'react-router'
import routes from './routes'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
events: {
sendUserInfo: 'userInfo'
}
}
TagManager.initialize(tagManagerArgs)
...
const app = document.getElementById('app')
ReactDOM.render(<Router routes={routes} />, app)
Environments
Configure how Tag Manager will works between development and production server environments.
Example:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from 'react-router'
import routes from './routes'
...
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
auth: '6sBOnZx1hqPcO01xPOytLK',
preview: 'env-2'
}
TagManager.initialize(tagManagerArgs)
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?
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 . |
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.