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”
 

Tagging service

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

 

Service example

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

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

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

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

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

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.
Was this post helpful?
Yes
No
Last update: 06/07/2018