Package Exports

react-gtm-module

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-gtm-module) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 snnipets.

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

import React from 'react'

...
import TagManager from 'react-gtm-module')

const tagManagerArgs = {
    gtmId: 'GTM-000000',
    dataLayer: {
        userId: '001',
        userProject: 'project'
    },
    dataLayerName: 'HomeDataLayer'
}
...

const Home = () => {
    ...
    TagManager.initialize(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)

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'.