ta-react-tracking v1.0.4

Tracking Component

Deprecation Warning

This is the old version of this component. You should use the ta-react-polymorphic-tracking/soon-to-be @ta-interaktiv/react-polymorphic-tracking component instead.

One-size-fits-all tracking component, supports Google Analytics, Google Tag Manager, WEMF NetMetrix and internal Newsnet tracker.

Most of the configuration happens through calling //www.${hostname}/api/sites/default, so most properties are not required (but some of them are useful.)

Installation

npm install ta-react-tracking --save

Usage

import Tracking from 'ta-react-tracking';

...

class YourComponent extends React.Component {
  render() {

    return (
      <Tracking articleId='123456' projectId='YourTestProject' />
    )
  }
}

API – 1.0.0

Props

Results

WEMF/Netmetrix

Uses all the desktop tracker URLs from //www.${hostname}/api/sites/default by default. Appends interactive/ and a project ID, if available, to the tracker URLs. Results in a list of tracking pixels of the form

<img src="[Tracker URL]interactive/[projectId]?r=[Referer]&d=[Current Timestamp]" 
      style="position: absolute; visibility: hidden;"
      width="1"
      height="1"
/>

Newsnet Tracker

Calls an URI using a JavaScript image object. Article ID is a number. Only rendered if a article number is provided.

Google Analytics

This component will once call the standard GA invoking script:

(function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function () {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    }(window,
      document,
      'script',
      'https://www.google-analytics.com/analytics.js',
      'ga'));

It will then for each Google Analytics tracker found in http://www.${hostname}/api/sites/default execute the following code:

window.ga('create', [tracker.id], 'auto', [tracker.name]);
window.ga('[tracker.name].send', 'pageview');

Google Tag Manager (GTM)

This component will once invoke the GTM script with the GTM ID found in http://www.${hostname}/api/sites/default:

(function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push(
        {
          'gtm.start': new Date().getTime(),
          event: 'gtm.js'
        }
      );
      let f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l !=
      'dataLayer' ?
        `&l=${
          l}` :
        '';
      j.async = true;
      j.src = `//www.googletagmanager.com/gtm.js?id=${  i  }${dl}`;
      f.parentNode.insertBefore(j, f);

    }(window, document, 'script', 'dataLayer', [GTM ID]));