This package has been deprecated

Author message:

Package has been renamed to @ta-interaktiv/react-gtm, please update at your convenience.

ta-react-gtm

GoogleTagManager

Component to use Google Tag Manager on the page. This component should only be mounted when the GMT ID has be defined.

Version: 2.1

• GoogleTagManager
  • module.exports ⇐ React.PureComponent ⏏
    • new module.exports()

module.exports ⇐ React.PureComponent ⏏

Set up the GTM tracking. Apart from a noscript fallback, this pretty much doesn't render anything, but sets up the GTM dataLayer in the constructor, loads the GTM.js script by Google while mounting and pushes a pageview event into the dataLayer, using the passed-in props.

Apart from props.gtmId, all props are part of the statistics object provided by the Newsnet API.

As this class extends PureComponent, it shouldn't be rerendered all the time.

Kind: Exported class
Extends: React.PureComponent

new module.exports()

Param	Type	Description
props.gtmId	string	The GTM ID to use.
props.pagetype	string	The pagetype (e.g. 'article').
props.category	string	The category of the article.
[props.subcategory]	string	The subcategory of the article.
[props.article_id]	number	The legacy article ID.
[props.premium]	bool	Whether this is a premium article.

Installation

yarn add ta-react-gtm

Usage

import GoogleTagManager from 'ta-react-gtm';

// more code ...

class YourComponent extends React.Component {

  componentDidMount() {
    // Get the Webseismo statistics object from Newsnet API here
    // NOT ACTUAL IMPLEMENTATION!
    this.setState({
      gtmObject: data.statistics.gtm,
      gtmId: data.gtmId
    })
  }


  render() {

    return (
      <GoogleTagManager gtmId={this.state.gtmId} {...this.state.gtmObject} />
    )
  }
}