Tagging a ReactJS site

Data collection / JavaScript / Advanced features / Tagging a ReactJS site

Foreword

Before using our tagging directives, please make sure you have initialised the AT Internet JavaScript Tracker and selected the desired plugins from within the Tag Composer interface.

Here is a tagging example, it must be adjusted to your needs.

Principe

The tagging service “ATInternetService” allows, by default, the tagging of pages and clicks. For this, it contains two methods that can be used from the JavaScript code of your components:

• sendPage(), to send page information,
• sendClick(), to send click information

Tagging

Integration

smarttag.js file

Add the call to the smarttag.js file in the index.html of your public folder.
You can use a local file or one deployed on our CDN.

Service

Add the service to your project, for example the file ATInternetService.js:

class ATInternetService {
  constructor() {
    this.tag = this.newTag({secure: true});
  }

  newTag(options) {
    try {
      return new window.ATInternet.Tracker.Tag(options);
    } catch(ex) {
      return {
        dispatch: () => ({}),
        page: { set: () => ({}) },
        click: { send: () => ({}) }
      };
    }
  }

  //@param info: {name: string, level2?: string, chapter1?: string, chapter2?: string, chapter3?: string, customObject?: any}
  sendPage(info) {
    this.tag.page.set(info);
    this.tag.dispatch();
  }
  //@param info: {elem: any, name: string, level2?: string, chapter1?: string, chapter2?: string, chapter3?: string, type: string, customObject?: any}
  sendClick(info) {
    this.tag.click.send(info);
  }
}

export let tag = new ATInternetService();

Component tagging

Service import

Import the service in your component :

import { tag } from '../Services/ATInternetService.js';

Page tagging

In order to tag a page, juste call the following method anywhere in your component, for example in the componentDidMount() :

componentDidMount() {
  tag.sendPage({
    name: 'My_screen',
    level2: 12,
    customObject: {'pageid':'56639A'}
  })
}

Click tagging

In order to tag a page, juste call the following method anywhere in your component :

tag.sendClick({
  name: 'My_click',
  level2: 12
})

Last update: 28/01/2020