February 15, 2017

Tutorial: Angular 2 & Google Analytics with Event tracking

In this post, I’ll show you how to add Google Analytics to an Angular 2 project. There is really no need to use an extra library for including Analytics since the setup is really simple. I will use the Angular CLI to create a new project and add a sample routing between site-a and site-b. The pageviews will be tracked and transferred to Google Analytics. In addition, I’ll show how to submit evens to Analytics. For this purpose a service will be implemented. The full source code is published at Github. For each step there is a single commit, which is linked in the respective headline.

 

Preparations

I will start by creating a new project through the Angular CLI. If you already have a project then you can of course also use this.

 

 

Step 1: Add Typings for Google Analytics – (Code)

Since we want to use TypeScripts typing-features we have to install the required typings via npm.

 

 

Step 2: Add Example Routes – (Code)

Since the application is currently still empty, I will now create two new components (site-a and site-b). If you are working in an existing project, you can skip until step 4.

 

 

Step 3: Routing – (Code)

Now I must integrate the two created components with the routing. To do this, I first create the route configuration and then add the router-outlet to the AppComponent. Finally, the RouterModule must be imported in the AppModule. The route configuration will also be applied.

 

 

Step 4: Add Google Analytics Tracking Code – (Code)

Now it’s time to include Analytics tracking code. Please note that we are in a single page application. Therefore, we must send the pageview manually. To do this, we add the tracking code to the index.html file and then remove the last line since it is responsible for transmitting the pageview.

To navigate at all, I have to add  two links to my example, so that the view can be switched between site-a and site-b component. In order to be able to capture the pageviews manually, we will catch the router events in the AppComponent and forward them to Google Analytics.

Make sure to paste your own tracking code to the index.html and to remove the ga('send', 'pageview'); line!

That’s it already! Now the pageviews are sent to Google Analytics.

 

 

Step 5: Event Tracking with Angular – (Code)

In a real application, we can understand the user behavior even better if we submit some events to Google Analytics. In our example we will install a button. When the user clicks on it, an event is sent to Analytics. In order to make the re-usability possible, I have stored the required code in a service. We will add a button to our app components template and implement the method submitEvent in the related TypeScript code.

Congratulations, we have already realized an event tracking with Angular 2! Check if everything works as expected by using the real time overview in Google Analytics.

 

 

 

Working Page View Tracking:

Working Event Tracking:


Can Kattwinkel

Entwickler bei thecodecampus

Comments (10)

  1. Pedro says:

    Thank you, Can!
    Most helpfull; works ike a charm!

  2. Abdeali says:

    Thanx the Code works …. I didnt try the event Catching yet

  3. Vinay says:

    thank you sir absolutely helpful

  4. Esrhim says:

    Thanks for the post, it’s very useful.

    Just one note, if you don’t use Angular CLI, it complains using wepback: “Cannot find name ‘ga’.”. It should be fine to include below code into the app component, and declare ga as ambient function.


    // Declare ga function as ambient
    declare let ga: Function;

    1. Broc says:

      Just add the reference path at the top of the file:

      ///

    2. Ron says:

      And into google-analytics-events.service.ts

    3. sejin says:

      add

      declare let ga: Function;

      1. Leticia says:

        I do not understand what you mean by adding the UA-ID of your tracking code

  5. Daniel Furze says:

    This is awesome! Thanks 😀 works a treat.

  6. Lukasz says:

    Good one!
    Thank you very much!

Leave a Reply

Your email address will not be published. Required fields are marked *