How To Use Google Analytics in Angular?
A Brain-Friendly Guide on How To Track User Behaviour
Having a portfolio or a website is a great way to showcase your work, especially when you’re working in web development. To obtain an outstanding portfolio, you should collect all the feedback you can get your hands on. By analyzing and incorporating user feedback in your future work, you‘re able to improve the experience of your beloved visitors.
In this article, you‘ll find the information to start with Google Analytics. We’ll put the theory into practice by using a popular and modern web application framework like Angular. After reading, you will be able to apply this new information yourself and you’ll learn how users interact with your website. Don’t waste any more time and start learning from your website visitors today.
The structure of this article is the following:
- Tracking Page Views
- Tracking Events
Tracking Page Views
If you haven’t done so already, you should sign up for Google Analytics to obtain a code called “Tracking ID”. Visit their website and create an account. When you create a new account correctly, you’ll have a tracking ID to link your application with. Nonetheless, let me show you where to find Tracking ID once you’re inside your account.
If you have already created an account in the past, or you don’t find a tracking ID anymore you can check the “Admin panel” at the bottom of your screen. You’ll find the existing tracking ID under Property Settings.
The Tracking ID itself will be something similar as UA-343565455–1. If you don’t have a Tracking ID just yet, create a new property to link to your website. If everything goes just right, you’ll have a Tracking ID in your property settings, as the one blacked out in the image down below.
To track the behaviour of your website visitors, you’ll have to include some JavaScript code on your page(s). I’ll give you the snippet. You should add it to your index.html. Because Angular renders the application inside the tag, this script is always loaded when someone visits your site.
Normally, you could add a line of code to the end of the script and you would be done. But, most websites have more than one page, so let me show how you can do that.
To track every page view, we subscribe to all NavigationEnd events and ignore all others. Every time, we send an event back to Google Analytics with our Tracking ID. Your application now successfully keeps track of every page change.
When you develop yourself, you might have some questions or issues that come up along. Don’t worry, this happened to me as well. Luckily for you, I will list the issues I encountered:
- Because everything of Google Analytics is just defined in the window, we declared a Function variable
gtag. This is an alternative to(window as any).gtag. Up until this point, I’ve not found a decent TypeScript way to do this. I’ve tried some npm packages, tried creating an interface, tried moving code around a bit. In the end, it remained in its current state. Feel free to play around with it yourself and let me know if there is room for improvement. - I’m listening to the route events inside a
ngAfterViewInitfunction. This makes sense when you’re familiar with Angular, since the rest of the JavaScript code is loaded inside the view. This is the reason why we are not doing the same part in thengOnInitfunction, if that would have crossed your mind. You can find more information on the component lifecycle of Angular here. - You’ll probably have to turn off advertisement blockers (e.g. AdBlock) if you want to track your visitors. This also means that you won’t be able to track everyone that visits your site. You should respect that some people don’t like to be tracked.
Tracking Events
In the following example, we’ll keep track of a click event. This is one of the most occurring events in the browser, so it’s a good candidate. Similar to page view tracking, we use JavaScript function gtag declared in our window.
gtag('event', 'click', {
'event_category': 'language_change',
'event_label': language
});Let’s discuss parameters. The first two parameters are clear. We declare a click event, simple and straightforward. The third parameter is a map with more information about the event itself. I’ve chosen the event category to be language_change and the event label to be the target language our visitor has chosen. If you need more information, read the docs. You can do it in a lot of different ways, but this works for me.
Tracking this language event is important to me. It will provide me with more information on the preferred language of the user, in addition to tracking their demographic location. Based on events like these, about my visitors, we can intervene if needed:
- Change the default language
- Add/Remove languages
This is of course just one part of a larger puzzle. Depending on your needs (e.g. blog, e-commerce, other) you can track a lot of different events. It’s important to brainstorm regularly. It’s a great tool to collect feedback from your visitors without explicitly having to ask them.
Conclusion
Google Analytics gives you insights in code, but it also aids in delivering more value to your visitors. In this article, page views and events are covered.
Firstly, pageviews provide more information about how interesting an article is. If an article is not engaging enough, people will drop out early. So it is important to follow up, so you can intervene if necessary.
Secondly, events are even more interesting to follow up. For example, you could change the language to the one that is chosen most often. Of course, you can also determine the language based on the demographics of your visitors. You can keep track of how often an external link is clicked, how often an advertisement is viewed, and so on.
What do you use Google Analytics for? Or don’t use it (yet)? Leave a comment if you have a good reason. I don’t have a lot of experience with it yet, so I’m curious.
Interested in personal training or coaching? Mail me at info@kwal-it.be or visit our site for our other services.
