Marquage d’un site ReactJS

 

Avant-propos

Avant d’utiliser nos directives de marquage, veuillez-vous assurer d’avoir initialisé le Tracker JavaScript AT Internet et sélectionné les plugins souhaités depuis l’interface Tag Composer.

Il s’agit d’un exemple de marquage, à adapter selon vos besoin.

 

Principe

Le service de marquage « ATInternetService » permet, par défaut, de marquer des pages et des clics. Elle contient pour cela deux méthodes utilisables depuis le code JavaScript de vos composants :

  • sendPage(), pour l’envoi d’une information de pages,
  • sendClick(), pour l’envoi d’une information de clic
 

Marquage

 

Intégration

 

Fichier smarttag.js

Intégrez l’appel au fichier smarttag.js dans la page index.html de votre répertoire public.
Vous pouvez utiliser un fichier local ou bien un fichier hébergé sur notre CDN.

 

Service

Ajoutez le service à votre projet, par exemple le fichier 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();
 

Marquage d’un composant

 

Import du service

Procédez d’abord à l’import du service dans votre composant :

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

Marquage d’une page

Pour marquer une page, il suffit d’ajouter l’appel à la méthode suivante à l’endroit désiré dans le composant, par exemple dans le componentDidMount() :

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

Marquage d’un clic

Pour marquer un clic, il suffit d’ajouter l’appel à la méthode suivante à l’endroit désiré dans le composant :

tag.sendClick({
  name: 'My_click',
  level2: 12
})
Dernière mise à jour : 28/01/2020