Tagging an Angular 2+ site
Before beginning implementation of our tagging solution, please make sure you have selected the desired plugins from within the Tag Composer interface.
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.
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.
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>The tagging service is useful for integrating a tag into the TypeScript code of a component.
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.
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.
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.
The tagging directive is useful for tagging an HTML element of a component.
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.
<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.
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.
Last update: 11/03/2019