This notes will hold good for any kind a integration with third-party tools who require our application to include thier scripts and call them to send tracking information. Tried my best keep it as much as angular way to do it.

Lets first create a type that will define the schema of the information that needs to be sent to the third-party through the injected scripts. In our case below is the metrics model that will be used to track and analyze on our Adobe Dashboard.

//metrics.model.tsexportinterfaceMetrics{applicationame:string;country:string;language:string;pagename:string;userid:string;userrole:string;}

To call a third-party scripts we would need to include the script on the head section. Since we are trying angular way let add this script node dynamically on AppComponent load.

ImplementOnInit on AppComponent as below

constscriprtNode=this.document.createElement('script');scriprtNode.src=environment.adobeAnalyticsUrl;scriprtNode.type='text/javascript';scriprtNode.async=false;this.document.getElementsByTagName('head')[0].appendChild(scriprtNode);

To use document inside the AppComponent you would have to inject it thorugh the constructor@Inject(DOCUMENT) private document: Document.

The Adobe Analytics expects the object to be bound to a predefined custom property of thewindow object. We will create a service that will get reference to the window object and that can be injected in components. Its cleaner that way.

//window-ref.service.tsimport{Injectable}from'@angular/core';@Injectable()exportclassWindowRef{getnativeWindow():any{returnwindow;}}

Lets create a create a service that will keep track of the object of typeMetrics that we created earlier. This service has to be used to set the object that we will be sending to Analytics service through their included script.

//adobe-analytics.service.tsimport{Injectable}from'@angular/core';import{WindowRef}from'./window-ref.service';import{Metrics}from'src/models/metrics.model.ts';@Injectable()exportclassAdobeAnalyticsService{metrics:Metrics={}asMetrics;constructor(privatewinRef:WindowRef){}updateMetricsObject(deltaMetrics){Object.assign(this.metrics,deltaMetrics)constwr=this.winRef.nativeWindow;wr.Org=wr.Org||{};wr.Org.Metrics=wr.Org.Metrics||{};wr.Org.Metrics.sc=this.metrics;returnwr.Org.Metrics.sc;}sendToAdobe(){constwr=this.winRef.nativeWindow;if(wr.metrics_pagenav!=undefined)wr.metrics_pagenav('',this.metrics);}}

We will try to capture these metrics whenever we browse a new page so that we know which page is most visited and whats the path the user takes and various other insights that we can derive from other attributes like the user details and the page names. In Angular we can use theRouter events to listen to the route changed event and call the analytics method to push the information.

//app-routing.module.tsthis.router.events.pipe(filter(e=>einstanceofRoutesRecognized)).subscribe((event)=>{consturl:string=event['urlAfterRedirects'];constregex=/[a-zA-Z]+[-]*[a-zA-Z]+/gm;varpageName=url.match(regex)[0];this.adobeAnalyticsService.updateMetricsObject({pagename:`blahblah|${pageName}`});this.adobeAnalyticsService.sendToAdobe();});

You can now check your Adobe dashboard to the see tacking informations.

Originally posted onBitsmonkey