Set up event tracking using JS and dataLayer

How to set up event tracking in your JS app by using dataLayer, Google Tag Manager and Google Analytics?

Well, here is how 🙂

OK, so let's say you have your JS based app finished and ready to go live and now it is the time to set up tracking. We would like to measure and track  important events which our users can generate using our app. 

In order to achieve this goal we will create JS service which will be used to push event and data to dataLayer from where Google Tag manager and Google Analytics can use them and create our needed reports.

In my case i will be using Angular

first let's create our tracking.service.ts from where we will push data to dataLayer

                    import { Injectable } from '@angular/core';

declare global {
  interface Window { dataLayer: any[]; }
}

@Injectable({
  providedIn: 'root'
})
export class TrackingService {

  constructor() { }

  pushEvent(eventName,eventCategory,eventLabel,eventAction,eventValues){
    window.dataLayer.push({
      'event': eventName,
      'eventCategory': eventCategory,
      'eventLabel': eventLabel,
      'eventAction':eventAction,
      'eventValue':eventValues
    });
  }
}
                  

As you can see here we are pushing event, eventCategory, eventLabel, eventAction and eventValue

So, let's say we want to track every time when new user registers:

                    this.trackingService.pushEvent('User Interactions','RegistrationComplete','registrationGoogle','registration',1);

                  

we will call this method with event name User interactions , label RegistrationComplete,  action registrationGoogle, action registration and value 1. Notice that value is set to 1 - this needs to be set to value 1 in order to have correct data in Google Analytics.

OK, let's try to track every time when user sends a message:

                    this.trackingService.pushEvent('User Interactions','Chat','newMessage','sent',1);

                  

As you can see we are still using same event name User interactions this will be used by GA to group your events but also to simplify setting up tag in Google Tag manager.

 Let's switch now to Google Tag Manager in order to create variables, trigger, event and tag

Go to variables section and click on new, select dataLayer variable and give it a name dlv-event category , in Data Layer Variable Name field enter  eventCategory

set variable for event category

Repeat same steps for action, label and value. And the end you will have 4 custom variables:

set up custom variables for event tracking

Now let's create trigger. Go to trigger section in GTM click on new and select give it  a name User interactions and select Custom Event . In event name field enter User Interactions this is our event name pushed to dataLayer in first step. Click save

Set up trigger in Google Tag Manager

 Now it is time to create our Google Analytics tag and fire it based on this event and use this custom variables.

Open Tags section GTM, click on new enter the name User interactions and select Google Analytics: Universal Analytics.

In track type select event and use our custom variables to populate event params. For tag trigger select our newly created trigger User interactions

create dynamic Google Analytics event tracking in Google Tag Manager

Now let's check how does it look like in Google Analytics. Let's send one message and see is our event going to show up in real time.

event tracking in Google Analytics

And there it is! We have successfully implemented dynamic tracking and data are already visible in Google Analytics!

Thank you

and thank me