Use Google Analytics In A NativeScript Angular Application

So you’ve spent time creating an awesome mobile application, but how do you know how it is performing in each of the available app stores? How can you gauge the user interactions with your application to better improve what you’ve built? The easiest way, and in my opinion the best way, would be to incorporate Google Analytics. With Google Analytics we can track application events, screen views, and other things without leaking any identifiable information about the user.

We’re going to see how to include Google Analytics in our Android and iOS mobile application built with NativeScript and Angular.

Create a New NativeScript with Angular Project

To keep this tutorial easy to understand, we’re going to create a fresh NativeScript project and work our way into it. From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

First we’re importing the plugin that we had previously installed. Within the AppComponent class we make use of the ngOnInit module to initialize the plugin. The trackingId property should match what is found in the Google Analytics dashboard. The dispatchInterval is a time in seconds and it represents when to send off the information to Google.

You should not initialize the plugin or do any logging within the constructor method. Instead you should make use of the ngOnInit method.

The purpose of the above doSomething method is to track an event. When we call this function we want to tell Google Analytics that we called it. Because we plan to call it via a button tap, we should probably label it as such in Google and describe the function that was called.

Now let’s take a look at our simple front-end. Open the project’s app/app.component.html file and include the following:

The above markup contains an action bar and a simple button that we can use to call our doSomething function. Not too much to think about in terms of user interface because the focus was on the hidden logic of the TypeScript file.

Testing Notes

When you’re testing the application that is making use of the Google Analytics for NativeScript, you may find some errors in your console that look like the following:

Google is trying to transition everything to Firebase. Even though this error is thrown, the views and events are still tracked as long as the trackingId is correct. If you’d like to remedy these errors, follow the instructions in the link from the log.

Conclusion

You just saw how to track usage of your NativeScript with Angular application with Google Analytics. This is incredibly useful when it comes to how many people are actively using your application and how they are using it exactly.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.