Google Analytics is one of the best free ways to monitor the traffic that is coming into your website or web app. I am currently building a site called Buncha Tools and I want to add Google Analytics to monitor the traffic/visitors for my web app. By the end of this article you will successfully have Google Analytics working in your Angular App.

Notes:

  • I am using the 4th version of Google Analytics (GA4) and Angular 9.
  • I am assuming at this point that you already have your web property created, but if you don't please read Google's Documentation.

1. Setup a data stream for your Web Property

First navigate to your Google Analytics web property and go to the admin tab, and click "Data Streams".

data/BrendanSluke/2020/11/GoogleAnalyticsDataStream.JPG

Next click "Web" and fill in your URL and a Stream name:

data/BrendanSluke/2020/11/GoogleAnalyticsSetupADataStream.JPG

2. Get your Measurement ID and Global Site Tag Javascript

At this point you will be in the "Web stream details" view. On this screen you will be able to see your Stream URL, Stream Name, Stream ID, Measurement ID and Status. The most important information on this page is the Measurement ID and the Tagging Instructions section. The Measurement ID is unique to our web property and allows Google Analytics to know that the analytics being sent to them are from our website.

We will now copy the Global Site Tag javascript code from the Tagging Instructions section. We will be pasting this snippet of code into the head tag in our index.html file of our Angular project.

data/BrendanSluke/2020/11/GoogleAnalyticsGlobalSiteTag.JPG

3. Add Global Site Tab Javascript To Index.html

At this point all of the setup with Google is done, we just need to add the javascript to our app. We will paste the javascript inside of the head tag in our index.html file. If you are having trouble locating your index.html file, it is usually located at the root of your web app, or in the src folder in my case.

Here is a diff in my code after adding the Google Analytics javascript: data/BrendanSluke/2020/11/GoogleAnalyticsAddedToIndexHTML.JPG

4. Confirm Google Analytics is Working

The next step is to confirm that Analytics data is actually being sent to Google. Serve your app locally and open to the homepage of your app (it will be running on localhost but the Analytics data will still send to google).

While you have your app open in one tab of your browser, open up your Google Analytics and navigate to the home tab. As long as you have your app still open in your browser you should see a page view showing up in your Google Analytics. This page view is certain to be you because at this point your Google Analytics code has not been updated for you production site. Alternatively you can also click the "Real Time" tab and as long as you have your app open, you should see 1 real time visitor (yourself).

data/BrendanSluke/2020/11/GoogleAnalyticsProofThatItIsWorking.JPG

Congratulations!

You now have Google Analytics connected to your Angular app, the next step is to publish and begin monitoring your traffic through the Google Analytics dashboard.

Thanks for reading through the entire tutorial, I hope this helped you!

-Brendan Sluke

Additional Help: Disable Google Analytics for Development Environment or Internal IP Address