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

1npm install ta-react-tracking --save

Usage

1import Tracking from 'ta-react-tracking';
2
3...
4
5class YourComponent extends React.Component {
6  render() {
7
8    return (
9      <Tracking articleId='123456' projectId='YourTestProject' />
10    )
11  }
12}
13

API – 1.0.0

Props

Property	Type	Required	Description
articleId	string	no	Newsnet article ID, for standalone projects that need to be tracked in CD as well.
projectId	string	no, but recommended	Freely definable project ID, used to identify single projects in WEMF/Netmetrix.
rawSiteData	object	no	Data object as provided by //www.mandant.ch/api/sites/default. If available, this component will not make its own request and use the provided data instead.

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

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

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:

1(function (i, s, o, g, r, a, m) {
2      i['GoogleAnalyticsObject'] = r;
3      i[r] = i[r] || function () {
4          (i[r].q = i[r].q || []).push(arguments)
5        }, i[r].l = 1 * new Date();
6      a = s.createElement(o),
7        m = s.getElementsByTagName(o)[0];
8      a.async = 1;
9      a.src = g;
10      m.parentNode.insertBefore(a, m)
11    }(window,
12      document,
13      'script',
14      'https://www.google-analytics.com/analytics.js',
15      'ga'));

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

1window.ga('create', [tracker.id], 'auto', [tracker.name]);
2window.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:

1(function (w, d, s, l, i) {
2      w[l] = w[l] || [];
3      w[l].push(
4        {
5          'gtm.start': new Date().getTime(),
6          event: 'gtm.js'
7        }
8      );
9      let f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l !=
10      'dataLayer' ?
11        `&l=${
12          l}` :
13        '';
14      j.async = true;
15      j.src = `//www.googletagmanager.com/gtm.js?id=${  i  }${dl}`;
16      f.parentNode.insertBefore(j, f);
17
18    }(window, document, 'script', 'dataLayer', [GTM ID]));