Integrating Google Analytics with Angular

If you don't know what Google Analytics is or haven't used it on your website, then this blog will provide you more information. This blog provides you  basic information on Google Analytics, why it is needed, how it is used and how to work with it.

What is Google Analytics?

Google Analytics is a web analytics tool offered by Google, which gives you an extremely 

an in-depth look at your website performance.

Why should we use Google Analytics?

Following are the reasons to use Google Analytics:

• You can see how people find your website.
• You can track what people do when they are on your website.
• You gain data on who is visiting your website and how.
• You can find the most popular pages on your website.
•  It helps you to track conversions.
• It's free* - limited data
• It's easy.

How to get into Google Analytics?

• To install Google Analytics for any website, the first thing you need to have is a Google account.
•  If you don't already have, create a new one.

Steps for Setting Up Google Analytics Account:

•  Click on the Google Analytics Link,which directs you to the Gmail Login Page if you does not have a Google Account. 
• If you already have a Google Account, it will redirect you to the page which displays something like below image.

• After Clicking on Sign Up button, you must fill out information for your website and create an account and property for your website.
• Click on the Settings icon on the bottom side of the left navigation bar → enter the details for creating the New Account → Now click on "Tracking ID" button → this generates your Tracking ID.

• Now copy the java script content (below figure, in red color) in our application, this will track our website.

Google Analytics with Angular Application

Given below is an Angular Application which has two components: one is Login and another is Registration.

Here we have a navbar provided with two tabs:  Login and Registration. When we click on login, displays a JSON object which contains some Logged In Users.

And when we click on Registration, displays a form with some details on which we can perform  CRUD (Create, Delete, Update and Read) operations within the Form.

Login:

Registration:

When we click on Save the page will be redirected and data will be saved in Table Format  as follows:

When we Click on Add New User button it will directly redirect to the above page which contains Registration Form.

How to Include Google Analytics in Angular Application:

• Want to track how many users are visiting my application, So that we can improve more.
• Also, want to know the user's information for a particular page (Login / Registration).
• And also want to track for every event that is occurring in the registration page.

For performing among processes we should use Google Analytics.

Including Google Analytics in Angular Application, go through the following Steps:

• First and foremost Step is Angular provides us angular-gtag service which can be installed into our application using npm.

npm install angular-gtag --save

          By using the above command we can install gtag service into our application.

• While our tracking code is generated, Google Analytics provides us a java script content under Website Tracking - Global Site Tab (gtag.js) . Include the same java script code into index.html file of our application.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126721966-2">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());


gtag('config', 'UA-126721966-2', { 'send_page_view': false });
</script>

• Now we should create a service.ts file and import necessary class from angular-gtag and can write all the required methods in this service file so that we can directly import this class in any components.
  
  import { Injectable, OnInit } from '@angular/core';

  import {Gtag, GtagPageview, GtagEvent} from 'angular-gtag';

  
  

  @Injectable ()

  export class GoogleAnalyticsService implements OnInit {

  constructor (private gtag: Gtag) {};

  public ngOnInit(): void {}

  public sendEvent(eventCategory: string, eventAction: string, eventLabel: string) {

  this.gtag.event(eventCategory, {

  event_action: eventAction,

  event_category: eventCategory,

  event_label: eventLabel

  });

  }

  }

• Finally, by calling this service file into our component, we can call the method(send Event) and can track our application when an Event occurs.
• For Example, when the user clicks on the Save button, it needs to track that an event is triggered. So, by calling the method "send Event", on Save method and also by providing required parameters such as

Event Category --- Registration

                  Event Action --- Saved                               

Google Analytics Reports for our Angular Application:

• Google Analytics provides us five types of reports for tracking a particular website.

• Google Analytics also provides customized Dashboards which describes the Graphical Representation of data for the website.

Real Time Reports for our application:

• In this Real Time Report, it tracks the number of active users right now on the site.
• Also provides us the graphical representation of page views for every minute and also for every second.
• Using this Report, we can also check the top active page of our website. If we Login to the page, it shows us as /Login.

Click on Real Time Reports in the left navigation bar → Click on Overview which shows as the below image.

• If the user changes into Registration Page it shows as /Registration.

Click on Real Time Reports in the left navigation bar → Click on Location which shows as the below  image.

• In this Real Time reports we have another page that is Location in which it describes the location of the particular users.

Event Tracking :

Click on Real Time Reports in the left navigation bar → Click on Events which shows as the below  image.

• There is another page in Real Time Reports i.e. Events. This page displays the result of Events that are occurred when a page undergoes Tracking. For Example, In Registration Tab of our application, we were performing CRUD operations, an event occurs for every CRUD operation.
• Google analytics tracks the event which is occurred by the user and displays in this page.

On Saving New Account:

• In our application, when the user creates a new account and clicks on Save, an event is occurred and tracked by google analytics and displays which action has occurred (Saved or etc.).

On Updating Existing Account:

• When the user updates an already existing account,  an event occurs and the google analytics displays the tracking data as below.

• The data is updated and saved to the database, so the two events occur one by one.

On Deleting a particular Account:

• When the user deletes an existing account, there an event occurred and the tracking data is displayed below.

• In this way, google analytics provides us the accurate details of the user who were performing any operations in our application.

Audience Report:

Click on Audience Reports in the left navigation bar → Click on Overview which shows as the below  image.

• This one tells you who is visiting your site. In the Audience Overview report, you can get the aggregate number of visitors, new users, returning users via pie charts and other related means.

• From the above screenshot of Audience Overview, since it has only one user for my website so the Pie Chart shows only one color. If there are two or more users, the chart shows variations of users according to their time period.

Active Users in Audience Report:

Click on Audience Report in the left navigation bar → Click on  Active Users which shows as the below  image.

• This Page in Audience Report shows us the graphical representation of active users of our application.

• According to the picture above, we can observe the active users list for a week. The data points show that on May-29 there was one user who is active on that particular day, after on May 30 to Jun 2 there were no users active so the scale decreased, on Jun 3 the scale increased again because on that again another user is active on our website.
• In this way, we can analyze the active user's list by the graph in the Audience.
• Above the graph shows only 1-day Active Users, we can also check the user data among a week, a two-weeks and also among a month too.

User Flow in Audience Report:

Click on Audience Report in the left navigation bar → Click on  Users Flow which shows as the below  image.

• This page in Audience Report shows the User Flow among the pages in our application.
• Through Traffic and Drop Off's among pages are displayed using this User flowgraph and also the sessions were taken for each interaction to the pages also noted here.

• According to the graph, the green part shows the sessions occurred through traffic and the red part shows the Drop Off's that occurred during each session on a particular page.

Acquisition Reports:

Click on Acquisition Reports in the left navigation bar → Click on  Overview which shows as the below  image.

• Acquisition Reports lets you know how your clients found and visited your site. This report is truly critical because it gives data about how your guests discovered you and how they landed at your site.

• Acquisition Reports shows us the different channels of users that are logged into our website. Since there is only one user it shows us Direct channel of users in our site.

Behavior Reports:

Click on Behavior Reports in the left navigation bar → Click on  Overview which shows as the below  image.

• The Behavior Reports displays essential data about your site related to your audience behaviors. This page will let you know what your site visitors are doing on your site.

Flow Diagram of  Behavior:

Click on Behavior Reports in the left navigation bar → Click on  Behavior Flow which shows as the below  image.

Site Content in Behavior Reports:

Click on Behavior Reports in the left navigation bar → Click on  Site Content → Click on All Pages which shows as the below  image.

• In this page, it describes the content of our web site which includes page views, Average Time, Entrance percentage and Exit percentage of a particular page of our web site.

Events in Behavior Report:

Click on Behavior Reports in the left navigation bar → Click on Events → Click on Overview which shows as the below  image.

• In the Events page of Behavior Reports, it describes the total events that are occurred for a particular page on our web site and also the unique events that occurred on the website.

• Also describes the Top Events that are occurred for a particular page on the website.

• From the above Figure, in the Registration page of our application, the Top Event that occurred by a user is adding a new account, so the view displays event action added in the top event of our page.

Event Flow in Behavior Reports:

Click on Behavior Reports in the left navigation bar → Click on  Events → Click on Event Flow which shows the below image.

• This Page shows us the Flow diagram of Events that occurred on our web site.

Conversion Reports:

• Conversion Reports lets you know more about your deals and conversions. 
• You can find E-commerce Reports under the Conversions once you turn on E-commerce tracking in Google Analytics.

Custom Dashboards in Google Analytics:

Click on Customization in the top side of left navigation bar → Click on Dashboards which shows as the below image.

• One of the biggest advantages of Google Analytics is that it allows you to create custom reports. Custom reports let you filter results based on a number of factors and view any of the metrics included in Analytics.

• After filling all the details for creating a custom report, a custom dashboard is created with the Title given.

• Provided title name as Registration and a custom dashboard with that name is created as above.

• These are few custom dashboards that are created for my custom report named as Registration.
• Since we don't have any new users for the application so the graph doesn't show any variations.

I hope this information on Google Analytics will be helpful. Post your thoughts in the comments below.