Capturing Interaction

Google Analytics was designed to provide insights on user experience based on user interactions. It is not so much an Application Performance Monitor (APM) like Application Insights or New Relic (while it can provide some extremely basic insights), but rather to assist internal teams with increasing conversion rates and improving customer acquisition (and retention). To this end, we may want to add some basic interactions to our Google Analytics metrics. In this post, we’re not going to cover goal setting, funnels, metrics, etc. We’re simply going to track a few events. However, the following principles can be used to accomplish the same purpose.

Create a Button

On my application’s First Page (that I created in my “Setup” on page 1 of this post). I’ve created a simple button, and I bound it to a click event.

<button (click)="click()">Click Me!</button>

View the source here.

In my page’s TypeScript file, I’ve created a click function. Depending on whether you are using the legacy analytics code or the new code, your method will call a different Google Analytics function.

Legacy Format: 

import { Component, OnInit } from '@angular/core';

declare var ga: any;

@Component({
  selector: 'app-first-page',
  templateUrl: './first-page.component.html',
  styleUrls: ['./first-page.component.scss']
})
export class FirstPageComponent implements OnInit {
  private _clickCnt = 0;

  ngOnInit() {
  }

  click() {

    ga('send', {
      hitType: 'event',
      eventCategory: 'Button',
      eventAction: 'click',
      eventLabel: 'First Page',
      eventValue: ++this._clickCnt
    });

    console.log(`Button clicked ${this._clickCnt} times.`);
    console.log('Click for "First Page" sent!');
  }
}

New Format: 

import { Component, OnInit } from '@angular/core';

declare var gtag: any;

@Component({
  selector: 'app-first-page',
  templateUrl: './first-page.component.html',
  styleUrls: ['./first-page.component.scss']
})
export class FirstPageComponent implements OnInit {
  private _clickCnt = 0;

  ngOnInit() {
  }

  click() {

    gtag('event', 'click', {
      event_category: 'Button',
      event_label: 'First Page',
      value: ++this._clickCnt
    });

    console.log(`Button clicked ${this._clickCnt} times.`);
    console.log('Click for "First Page" sent!');
  }
}

You can find the source here.

Essentially, both code samples accomplish the same thing; namely, they register an event with Google Analytics. The only call-out here is line 3 (for both versions). In each version, depending on which library we are using, we declare a variable (e.g. ga or gtag) outside the scope of the component. This is to prevent compilation errors from the TypeScript compiler.

(NOTE: One downside of using Google Analytics is that the values for a specific event are summed in the daily reports. So, if the button on the page is clicked 3 times, the final event report will show 6 (1 for the first click + 2 for the second + 3 for the third) for the value. If you want to track values for individual users, sessions, clicks, etc., then you’ll need to configure metrics in Google Analytics.)

With your click event wired up, go ahead and run your application again (remember, with the --prod flag). You’ll then begin to see events being logged in realtime on your Google Analytics dashboard.

Conclusion

We’ve just added Google Analytics to our Angular application by utilizing an external JavaScript file. There is a better, “more Angular” way to do this via services (which we’ll cover in the next post). However, this approach is great for the quick, simple addition of Google Analytics to a new project, or to add Google Analytics to a pre-existing project where the return on injecting Google Analytics as a service isn’t really worth the investment of time.

Personally, I only use Google Analytics for tracking page views. That’s it. For other metrics, such as application performance and user interaction, I use a formal APM (such as Application Insights or New Relic).

Again, for the full source code to this project, check out my GitHub blog demos repository.