Marquage d’un site Angular 2+

 

Avant-propos

Avant d’utiliser notre solution de marquage, veuillez sélectionner les plugins souhaités depuis l’interface Tag Composer.

 

Principe

La solution proposée consiste en l’ajout d’un service et d’une directive en fonction du besoin de marquage. Le code, fourni à titre d’exemple, permet de mesurer des pages et des clics. Il est toutefois possible d’ajouter n’importe quelle fonctionnalité du Tracker en appliquant les mêmes principes que ceux décrits.

 

Marquage

En fonction du besoin, il est possible de passer par l’utilisation d’une directive pour l’intégration d’un marqueur dans le code HTML d’un composant ou encore par l’utilisation d’un service pour l’intégration dans une classe de composant.

 

Intégration

Les exemples d’intégration s’appuient sur l’arborescence de projet suivante :

Le projet « quickstart » contient le code :

  • d’un service de marquage « src/app/lib/atinternet/_services/tag.service.js »
  • d’une directive de marquage « src/app/lib/atinternet/_directives/tag.directive.ts »
  • du smarttag JS « src/app/lib/atinternet/_vendors/smarttag.js »
 

Service de marquage

Le service de marquage est utile pour intégrer un marqueur dans le code TypeScript d’un composant.

 

Exemple de service

Ici, le service « TagService » expose trois fonctions :

  • click : pour la mesure de clic standard (appel de tag.click.send)
  • clickListener : pour la mesure de clic avec listener (appel de tag.clickListener.send)
  • pageSend : pour la mesure de page (appel de tag.page.send)

Ce service peut être utilisé directement après injection.

 

Exemples de marquage

 
Marquage de page

Ici, la méthode de marquage du service est appelée sur l’événement « NavigationEnd » levé après une navigation pour forcer la mesure lorsqu’il n’y pas de rechargement complet de page.

 
Marquage de clic

La fonction « clickSend » prend en paramètre l’événement de clic « $event ». Cet événement va servir au mécanisme de gestion automatique de clic du Tracker utile pour la résolution des cas de clics « canceled ».

 

Directive de marquage

La directive de marquage est utile pour marquer un élément HTML d’un composant.

 

Exemple de directive

Ici, la directive « TagDirective » (selector atTag)  s’appuie sur le service de marquage « TagService » pour effectuer la mesure de clic avec listener et la mesure de page.

 

Exemples de marquage

 
Marquage de page

Le marquage de page se fait par l’ajout de différents attributs :

  • « atTag » permettant d’associer la directive de marquage à la balise,
  • « pageData » permettant de déclarer un objet contenant les données de marquage d’une page.
 
Marquage de clic

Le marquage de clic se fait par l’ajout de différents attributs :

  • « atTag » permettant d’associer la directive de marquage à la balise,
  • « clickData » permettant de déclarer un objet contenant les données de marquage d’un clic.
Cet article vous a-t-il été utile ?
Oui
Non
Dernière mise à jour : 26/06/2018