Developers » AS2 tagging » JavaScript » Fonctionnalités avancées » Marquage d’un site ReactJS
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