react-tag-manager

Installation

$ npm install --save react-tag-manager
$ yarn add react-tag-manager

Examples

Enabling and loading the Google Tag Manager

import GTM from 'react-tag-manager'

export const AppContainer = () => (
  <div>
    <GTM 
      gtm={{
        id: 'GTM-12345',
        auth: '',      // Optional
        preview: '',   // Optional 
      }} 
      settings={{
        sendPageView: true,     // default false
        pageView: {             // default null
          event: 'pageview',    // default
          data : {},            // default
          
          settings: { 
            locationProp: 'pathname', // default
            sendAs      : 'url',      // default
          },
        }
      }}>
    	...
    </GTM>
  </div>
)

Updating / Adding data to the data layer

import DataLayer from 'react-tag-manager/DataLayer'

export const Component = () => (
  <div>
    // All props will be added to the data layer
    <DataLayer 
      foo={'bar'}
    />
        
    <DataLayer 
      foo={'bar'}
      settings={{
        passProps: true, 	// default false, will pas all the given props to the child components
        withGTM: true, 		// default false, will add GTM to the child components
      }}>
      ...
    </DataLayer>

    ...
  </div>
)

Trigger a event

import React from 'react'
import { withGTM } from 'react-tag-manager'

@withGTM
export default class extends from React.Component {

  handleButtonClick = () => {
    const { GTM } = this.props
    
    GTM.api.trigger({
      event: 'my-button-click',
      bar: 'foo'
    })
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick} />
      </div>
    )
  }
  
}

Trigger a pageview event

import React from 'react'
import { PageView } from 'react-tag-manager'

export default class extends from React.Component {

  render() {
    return (
      <div>
      	<PageView />
        ...
      </div>
    )
  }
  
}

Trigger a onClick event

import React from 'react'
import { Click } from 'react-tag-manager'

export default class extends from React.Component {

  render() {
    return (
      <div>
      	<Click
      	  event={'click'}
      	  data={{
      	    event: 'click',
      		...
      	  }}>
      	  <button>CLICK ME</button>
      	</Click>
        ...
      </div>
    )
  }
  
}

Development

If you'd like to contribute to this project, all you need to do is clone this project and run:

$ npm install
$ npm run build
$ npm run build:watch // To recompile files on file change

Using development version in local project

You can use npm link / yarn link to use your development version in your own project:

• Go to react-tag-manager directory and execute command npm link / yarn link
• Go to your project directory and execute command npm link react-tag-manager / yarn link react-tag-manager

License

React Tag Manager is MIT licensed.

Collaboration

If you have questions or issues, please open an issue!