click-tracker

What does the ClickTracker do ?

This npm package can help you with the 3 points below:

1. Track any event on specific elements in any component in the application using a directive. This directive will provide you with 3 details: the component selector, the element html and the event type.The directive doesnt provide the component class name because class names get minified when the angular project is built using production configuration.

2. Track only click events in the entire application using a directive. This directive will provide you with 2 details :the element html and the event type.

3. Finally, you can optionally use this package also to send the event trace before a typescript/http error occurs to a backend service.

Installation

npm i click-track --save

Usage for "any event" tracking

This is great if you are looking to target specific elements in specific components OR specific elements in all components.

1. Import the ClickTrackerModule into the imports section of the NgModule.

@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,ClickTrackerModule],providers: [],bootstrap: [AppComponent]})

2. Add the providers property to the @Component({}) which hosts the element on which the event needs to be tracked. This is essential for the directive to access the component reference. We pass the component name as argument to the getProvider() exposed by the ClickTrackerModule

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],providers:[getProvider(AppComponent)]})

3. Ensure you are passing a reference to ElementRef in the component constructor.The name of the reference does not matter.It can be anything. This is essential to access the component selector.

constructor(private hostSelector:ElementRef){}

4. In the Component template, apply the eventTrack directive selector to the elements on which the click/other event need to be tracked. For instance, I have applied the selector to the button below. The directive will send the event details to the host component via the eventTrackPayload EventEmitter. You can then access the event details in the Component Class via a method eg: logPayload() in the below example

<button eventTrack (eventTrackPayload)="logPayload($event)">Action</button>

Log the event details in the component class

logPayload(payload:any){console.log(payload)}

5. How can you track any other event ? Say you want to track the (mouseover) event over the <p> element or (focus) event on an <input> element below.

<p eventTrack #e1="eventTrack" (mouseover)="trackMouseOver($event)" (eventTrackPayload)="logPayload($event)">Move the mouse over me to track</p>

<input placeholder="Focus to track" eventTrack #e2="eventTrack" (focus)="e2.trackEvent($event)" (eventTrackPayload)="logPayload($event)">

Everytime you move the mouse over the <p> element, the trackMouseOver() is called, where we manually call the trackEvent() exposed by the Directive defined below.

trackMouseOver(event:any){this.e1?.trackEvent(event);}

You can access this.e1 in the component class via @ViewChild('e1',{static:false})e1:EventTrackDirective | undefined

The Directive will pass the event details to you via the eventTrackPayload EventEmitter.You can then access the event details in the Component Class via a method eg: the same logPayload() in the above example

In the input, we are directly calling the eventTrack() within the template, everytime the input is focussed. The Directive will pass the event details to you via the eventTrackPayload EventEmitter.You can then access the event details in the Component Class via a method eg: the same logPayload() in the above example

Expected Output

Example: If you applied the eventTrack directive selector to elements within the AppComponent.

1. For the <p> element, the directive will send you the event details in the below format:

{ "component": "APP-ROOT", "target": "<p _ngcontent-ng-c2369526215="" eventtrack=""> Move the mouse over me to track

", "eventType": "mouseover" }

2. For the <input> element, the directive will send you the event details in the below format:

{ "component": "APP-ROOT", "target": "<input _ngcontent-ng-c2369526215="" placeholder="Focus to track" eventtrack="">", "eventType": "focus" }

3. For the <button> element, the directive will send you the event details in the below format:

{ "component": "APP-ROOT", "target": "<button _ngcontent-ng-c2369526215="" eventtrack="">Action", "eventType": "click" }

Usage for "only click event" track anywhere in the application

This is great if you dont want the component details and just want to track "any click event" in any component in the entire application.

1. Import the ClickTrackerModule into the imports section of the NgModule.

@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,ClickTrackerModule],providers: [],bootstrap: [AppComponent]})

2. In the root AppComponent, just add any html element with the commonEventTrack directive selector applied. The directive will send the event details to the host component via the commonEventTrackPayload EventEmitter. You can then access the event details in the Component Class via a method eg: logPayload() in the below example.

Example: <div commonEventTrack (commonEventTrackPayload)="logPayload($event)"></div>

logPayload(payload:any){console.log(payload)}

Usage for "event trace before an error" in the application

You can use this if you want the trace of events that occured before a typescript error or http request failure.

1. Update the providers section of your AppModule as below. If you are registering the ErrorHandler and the HTTP_INTERCEPTORS, make sure you are registering the eventTrackTarget as well with the providers. The maxEventsTracked needs to be registered if you want to track the last N events before the error. In the below example, you can track the last 10 events before the error.

If the maxEventsTracked is not registered ,all the events before the error will be tracked.

The ClientErrorTrackService will handle all typescript errors and the ErrorTrackInterceptorService will handle all API failures.

Please note that any failure related to the eventTrackTarget will be ignored.

providers: [{provide:eventTrackTarget,useValue:"<BACKEND API URL WHICH WILL RECEIVE THE EVENT TRACE>"},{provide:maxEventsTracked,useValue:10},{provide:ErrorHandler,useClass:ClientErrorTrackService},{provide:HTTP_INTERCEPTORS,useClass:ErrorTrackInterceptorService,multi:true}]

2. To send the event details to the eventTrackTarget, we need to track the events. For this purpose, you can use either of the 2 directive selectors already described earlier :commonEventTrack OR eventTrack