react-tag-manager

3.0.0 • Public • Published

Google 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!

Package Sidebar

Install

npm i react-tag-manager

Weekly Downloads

56

Version

3.0.0

License

none

Unpacked Size

240 kB

Total Files

10

Last publish

Collaborators

  • tripss