Event Tracking With Google Analytics in Angular

Milos Bejda
Sep 26, 2017 · 2 min read

Event tracking is a great way to track user behavior in your application and it doesn’t require much effort to implement. Assuming your application was scaffolded using the Angular ng-cli tool, you can add an attribute directive to your application that will send click events to your Google Analytics in just a few minutes.

Add Google Analytics

To implement event tracking in your Angular application, you first need to add Google Analytics. You may use the following Google Analytics debug script. That script outputs all your Google Analytics events to the console. For production, you may want to use the production Google Analytics script that does not do that.

Create Directive

Next step is to create an attribute directive. Using the ng-cli tool, run the following :

ng generate directive button

This will create a directive as well as update the app.module.ts file. Inside that directive, add the following code snippet.

That code snippet creates an attribute directive that can be added to any element tag that you want to track clicks on. Here is an example how to use it

Checking Google Analytics

Once you created the event tracking directive, attach it to a tag, launch the application and click on that tag. Your Google Analytics should have caught the event.

Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store