Setting Up Google Analytics in an Angular Application
Get user insights from your Angular Application with Google Analytics
In this guide, we will create a simple Angular starter application. Then we will setup or configure Google Analytics for the application. Finally, we will monitor user activity of the application in the Google Analytics dashboard.
Google Analytics is a web analysis service from Google. The service can be used in tracking and reporting real time data related to user activity on your website.
Create an Angular application
To create an Angular application within a workspace named my-app. Run the following CLI command:
$ ng new my-appSign in to Google Analytics
Sign in to Google Analytics to create an analytics account and get a Tracking Id to be used in the application.
Google Analytics can be found on the link provided here.
Setup Account
Once Signed in, you will be presented with the Google Analytics home page that looks like the one below.
Click on the Admin button at the bottom left corner of the Google Analytics home page.
Now, follow the steps below to create an account and get Tracking Id
- Start to setup your analytics account by clicking on the Create Account button.
On the page that follows, provide your account name of choice. For this guide I have used the account name my-app. Then click Next.
2. On the what to measure page. Select Web as the type of application you want to get insights from. Then click on Next
3. Finally on property setup page. Fill out with the necessary details as in the figure below.
Note: On the website URL you can use: my-app.com domain. URLs like localhost:4200 or localhost will not work here. So just use my-app.com or some other random domain name even though you are running the application on localhost.
Finally click on Create to complete your account setup.
Get Tracking Id
The Tracking Id is what Google Analytics uses to uniquely identify your website.
Once the account setup is completed, you will be presented with a page similar to the one below.
The page displays Tracking Id and Global Site Tag. If you inspect the Global Site Tag you will notice that it contains the Tracking Id.
Angular applications are single page apps (SPA). So, we will only paste the Global Site Script Tag into the one and only true html page, namely index.html.
Copy the Global Site Tag, similar to the one highlighted in red above, and Paste it just below the <head> element opening tag of the index.html file as below.
Run the application
To run the application. Simply switch to the projects root folder and run the ng serve command as follows:
$ cd my-app
$ ng serve -oThe -o argument tells the application to automatically open in your default browser. Normally on this URL http://localhost:4200/.
Monitor Web Insights in Google Analytics
Now, go to Google Analytics home page.
You will see that there is 1 active user for the website. You can open the application in another browser and you will see 2 active users.
For more insights click on one of the buttons under Reports.
Conclusion
Google Analytics is a great tool for monitoring and understanding user activity and or behavior.
We have just touched the tip of the iceberg when it comes to what you can do with Google Analytics. Take some time to play around with it.
