Integrating Google Analytics API in Angular (Part1)
I recently integrated with the Google Analytics API in order to create a custom analytics dashboard in Angular. This was to give different stakeholders access to customized analytics on a project I was working on. While Google does provide documentation on how to do it, I found the process very hard to follow. In the end, I had to read a lot of blogs and juggle a lot of code around to make it work. Just in case you have similar issues, I am going to jot down the step-by-step process for embedding the Google Analytics API into our Angular Portal.
So what is Google Analytics, and what is it used for?
Well, Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.
Google Analytics collects data from your website/apps for the creation of reports that are used to provide insights into one's business.
Why create a custom dashboard?
While we can view the analytics of the website and create reports of our site through Google Analytics Dashboard, sometimes there's a need to embed these reports into our own Admin website portal. That's where the Google Analytics API comes in. To do this, firstly, we integrate Google Analytics into our website in order to get tracking information. Once integrated, we can then embed the Google Analytics API onto our site to create our specified dashboards for our portal. Sounds interesting? let's get started.
In this first part of the series, I will do a quick rundown on Integrating the Google Analytics tag into our website to get a log of traffic from the site. In the next part, I will then go over how to embed our API into our own portal.
1. Setup Google Analytics Account
Go to the Google Analytics homepage; if you already have an account set, kindly start by creating a Property. If not, follow the following steps:
- Select Start measuring, and fill in the details on creating an account. Take note, when entering the details below, you will see where it's written Show advanced options, select that part, and choose Universal Analytics Property, then select Google Analytics 4 and Universal Property (will explain later in the blog why we selected this).
On our account setup, we have done the following:
1. Created an account
2. Created a property
3. Specified the URL of our website
When done creating an account, you should see the above page with the following details. So next, we move to our Angular application to integrate our Google analytics tag.
2. Adding Google Analytics to an Angular Application
To add Google Analytics to our application, we need a tag, to get this tag, we go back to our Google Analytics page and go to:
Tracking Info —> Tracking Code.
Here is where will see our tag; copy it and paste it into our index.html inside your <head></head> tag; it should look like this.
Now we are almost there. What we need to do, is link Google Analytics to our site's pages through the Router. We have to add the code below in our app.component.ts; by doing this, we are sending new routes to Google Analytics. Where there is G-xxxxxxxx, we are replacing it with our Tracking Id found:
Tracking Info —> Tracking Code.
Now that's it, we are done. You can then deploy or test on your local environment to see the results. This is what you are expected to see.
Before we close up on step 1, I mentioned that I would explain why we choose Google Analytics 4 and Universal Property (GA4) instead of Universal Analytics Property only (UA). Well, UA is about to be replaced by GA4. GA4 combines both web and app data into the same property; therefore when doing analysis on both web and app, be sure to take into consideration when comparing pageview metrics between the two. The good thing is when creating a property and you choose GA4, it creates properties that have a GA4 and one that has UA. UA would track screen views in separate mobile-specific properties; that's why it is being replaced by GA4.
Conclusion
Ok, hope this was helpful and easy to follow. From this guide, you learned how to Create a Google Analytics account, create a property, get a tag that will be implemented into the web application and see your website traffic. The next thing is embedding our API into our web application to bring dashboards onto our portal. Stay tuned for, Integration of Google Analytics API in Angular (Part2).