TriPSs / react-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>
)

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>
)

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>
    )
  }
  
}

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

export default class extends from React.Component {

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

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>
    )
  }
  
}