Developers » AS2 tagging » JavaScript » Advanced features » Tagging a ReactJS site
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