Skip to content

TriPSs/react-tag-manager

Folders and files

NameName
Last commit message
Last commit date

Latest commit

51aab22 · Mar 22, 2019

History

30 Commits
Oct 29, 2018
Nov 19, 2017
Apr 4, 2018
Apr 4, 2018
Apr 4, 2018
Nov 19, 2017
Mar 22, 2019
Mar 22, 2019
Mar 22, 2019
Mar 22, 2019
Mar 22, 2019

Repository files navigation

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

React Tag Manager is MIT licensed.

Collaboration

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