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 »
    • le script « smarttag.js » (code du Tracker) doit être ajouté dans la page principale de votre application :
      <!-- atinternet:js -->
      <script src="app/lib/atinternet/_vendors/smarttag.js"></script>
      <!-- endatinternet -->

      Vous pouvez si besoin remplacer le fichier « smarttag.js » local par une ressource présente sur le CDN AT Internet :

      <script src="https://tag.aticdn.net/YOURSITEID/smarttag.js"></script>
 

Service de marquage

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

 

Exemple de service

import {Injectable} from '@angular/core';

declare const ATInternet: any;
export type Tag = any;

export interface PageInfo {
  name: string;
  level2?: string;
  chapter1?: string;
  chapter2?: string;
  chapter3?: string;
  customObject?: any;
}

export interface ClickInfo {
  elem: any;
  name: string;
  level2?: string;
  chapter1?: string;
  chapter2?: string;
  chapter3?: string;
  type: string;
  event?: any;
}

@Injectable()
export class TagService {

  private tag: Tag;

  constructor() {
    this.tag = new ATInternet.Tracker.Tag();
  }

  click(info: ClickInfo): boolean {
    return this.tag.click.send(info);
  };

  clickListener(info: ClickInfo): void {
    this.tag.clickListener.send(info);
  };

  pageSend(info: PageInfo): void {
    this.tag.page.send(info);
  };

}

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
import {Component} from '@angular/core';
import {PageInfo, TagService} from "./lib/atinternet/_services/tag.service";
import {NavigationEnd, Router} from "@angular/router";

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>

  <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'Tour of Heroes';

  constructor(private router: Router, private tagService: TagService) {
    let pageData: PageInfo;
    router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        pageData = {
          'name': event.url.replace(/[^\w]/gi, ''),
          'chapter1': 'chap1',
          'chapter2': 'chap2',
          'chapter3': 'chap3',
          'level2': '1',
          'customObject': {'arg1': 3, 'arg2': '4'}
        };
        this.tagService.pageSend(pageData);
      }
    });
  }
}

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
import {Component} from '@angular/core';
import {ClickInfo, TagService} from "./lib/atinternet/_services/tag.service";

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    <a [href]="'https://www.atinternet.com/'" (click)="clickSend($event, 'myLink');">My Link</a>
  </nav>

  <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'Tour of Heroes';

  constructor(private tagService: TagService) {}

  clickSend(event: any, name: string): boolean {
    let clickData: ClickInfo = {
      'elem': event.target,
      'name': name,
      'chapter1': 'chap1',
      'chapter2': 'chap2',
      'chapter3': 'chap3',
      'level2': '1',
      'type': 'exit',
      'event': event
    };
    return this.tagService.click(clickData);
  }
}

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

import {Directive, ElementRef, Input} from '@angular/core';
import {TagService} from "../_services/tag.service"

@Directive({
  selector: '[atTag]'
})

export class TagDirective {

  constructor(private el: ElementRef, private tagService: TagService) {}

  @Input() clickData: any;
  @Input() pageData: any;

  ngAfterViewInit() {
    if (this.pageData && typeof this.pageData === 'object') {
      this.tagService.pageSend(this.pageData);
    }
    if (this.clickData && typeof this.clickData === 'object') {
      this.clickData.elem = this.el.nativeElement;
      this.tagService.clickListener(this.clickData);
    }
  }
}

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
<h2>My heroes</h2>
<div>
  <label>Hero name:</label> <input #heroName />
  <button (click)="add(heroName.value); heroName.value=''">
    Add
  </button>
</div>
<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span>
    <span>{{hero.name}}</span>
    <button class="delete"
    (click)="delete(hero); $event.stopPropagation()">x</button>
  </li>
</ul>
<div *ngIf="selectedHero">
  <h2>
    {{selectedHero.name | uppercase}} is my hero
  </h2>
  <button (click)="gotoDetail()">View Details</button>
</div>
<div atTag [pageData]="{'name':'heroes','chapter1':'chap1','chapter2':'chap2','chapter3':'chap3','level2':'1','customObject':{'arg1':3,'arg2':'4'}}"></div>
<div atTag [pageData]="{'name':'heroes','chapter1':'chap1','chapter2':'chap2','chapter3':'chap3','level2':'1','customObject':{'arg1':3,'arg2':'4'}}"></div>

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
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    <a [href]="'https://www.atinternet.com/'" atTag
       [clickData]="{'name':'myLink','chapter1':'chap1','chapter2':'chap2','chapter3':'chap3','level2':'1','type':'exit'}">AT Internet</a>
</nav>

  <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'Tour of Heroes';

  constructor() {}
}
<a [href]="'https://www.atinternet.com/'" atTag
       [clickData]="{'name':'myLink','chapter1':'chap1','chapter2':'chap2','chapter3':'chap3','level2':'1','type':'exit'}">AT Internet</a>

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.
Dernière mise à jour : 11/03/2019