Tagging an Angular 2+ site

Foreword

Before beginning implementation of our tagging solution, please make sure you have selected the desired plugins from within the Tag Composer interface.

Principle

The proposed solution consists of adding a service and a directive depending on your tagging needs. The code, provided as an example, allows you to measure pages and clicks. However, it is possible to add any type of Tracker features by applying the same principles as those described.

Tagging

If needed, it is possible to use a directive for the integration of a tag into the HTML code of a component, or to use a service for integration into a component class.

Integration

The integration examples rely on the following project tree structure:

The “quickstart” project includes the code:

• of a tagging service “src/app/lib/atinternet/_services/tag.service.js”
• of a tagging directive “src/app/lib/atinternet/_directives/tag.directive.ts”
• of the SmartTag JS “src/app/lib/atinternet/_vendors/smarttag.js”
  • the “smarttag.js” script (Tracker code) must be added in your application’s main page:

    <!-- atinternet:js -->
    <script src="app/lib/atinternet/_vendors/smarttag.js"></script>
    <!-- endatinternet -->

    You may replace the local “smarttag.js” file with a resource from the AT Internet CDN if needed:

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

Tagging service

The tagging service is useful for integrating a tag into the TypeScript code of a component.

Service example

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);
  };

}

Here, the service “TagService” shows three functions:

• click: to measure standard clicks (call tag.click.send)
• clickListener: to measure clicks with listener (call tag.clickListener.send)
• pageSend: to measure pages (call tag.page.send)

This service can be used directly after injection.

Tagging examples

Tagging a 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);
      }
    });
  }
}

Here, the method of the tagging service is called on the event “NavigationEnd”, raised after a navigation to force measurement when the page doesn 't fully reload.

Tagging a click

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);
  }
}

The “clickSend” function takes the click event “$event“ as a parameter. This event will serve as an automatic click management mechanism for the Tracker, useful for the resolution of “cancelled” clicks.

Tagging directive

The tagging directive is useful for tagging an HTML element of a component.

Directive example

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);
    }
  }
}

Here, the directive “TagDirective” (selector atTag) relies on the tagging service “TagService” to conduct click measurement with listener as well as page measurement.

Tagging examples

Tagging a 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>

Tagging a page is done by adding different attributes:

• “atTag” allows the association of the tagging directive and the tag.
• “pageData” allows the declaration of an object containing a page 's tagging data.

Tagging a click

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>

Tagging a click is done by adding different attributes:

• “atTag” allows the association of the tagging directive and the tag.
• “clickData” allows the declaration of an object containing a click 's tagging data.