Build a Directive that Tracks User Events in a Service in Angular
A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.
[00:00] A common scenario is tracking things like button clicks, or other user events on the page so we can actually build a track directive to handle that for us. I'll make a directive with a selector of track. This will be an attribute. Make sure to import this, and export the class track directive. Then make sure to add that to our declarations.
[00:30] Once that's in there, we can come back to our buttons, and say track, and I'll just use a string of one button. Then this way, this track is an input on our track directive. I'll set that up. Import input. Just call it track, and then we want to track the clicks. Add the host listener for click, and say on click, console log this.track.
[00:59] Now when we click on button one, we should see the one button logged out. We can add this to all three of our buttons, copy paste. Paste two, three. Save that, and click, click, click. One, two, three.
[01:16] Now, the cool thing here is we didn't have to build a new component to handle this. We simply just added a directory which adds this tracking behavior to an already existing element. Now, to keep track and store these different tracking events, I'm going to create a service to handle that. I'll make an injectable, and say export class tracking service.
[01:37] Make sure to add this to our providers. Tracking service. Then we can actually inject the tracking service into our directive. Some constructor private tracking service, and now this tracking service is available inside of our listener.
[01:57] Instead of just logging this out, we can say this.tracking, and then we'll need a method on here to actually track. We'll just call this log. Then we want to keep track of these. I want to say log is an array, and these can be tracking events where we just say this.logs.pushtrackingevents. Then we'll just log this out to make it visual.
[02:19] Now, we can use this log method to say log. I'm just going to say the event was a click, and the message was this.track. Now, when I save, as I click this button, you'll see we have an array with an object in it with an event of click, and a message of one button. A click again.
[02:38] Now, we have another array with two tracking events in it. Click in two button, and we can keep on clicking, and adding those tracking events. It would be fairly trivial to even hook this up to a backend of some sort.
[02:49] With this track directive, you could continue to track whatever event you wanted. If I wanted to track mouse overs to say on mouse ever, call this mouse over. Now, let's save here, and now we're even tracking all these mouse overs, and clicks.
[03:05] We're adding more, and more behaviors to our track directive without even having to touch the buttons or components that we'd create.