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:

tns create ga-project --ng
cd ga-project
tns platform add android
tns platform add ios

Take note that we’re using the --ng flag when creating the project. This indicates that we’re going to be creating an Angular project rather than a NativeScript Core project.

To get Google Analytics working in our project, we’re going to make use of a nifty NativeScript plugin created by Steve McNiven-Scott. This plugin can be installed by executing the following:

tns plugin add nativescript-google-analytics

Now we can get down to business and start including it within our mobile application.

Tracking Views and Events with Google Analytics

Open your project’s app/app.component.ts file. We’re going to focus on creating some TypeScript logic for initializing the plugin and tracking various aspects of our application.

import { Component, OnInit } from "@angular/core";
import * as GoogleAnalytics from "nativescript-google-analytics";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent implements OnInit {

    public ngOnInit() {
        GoogleAnalytics.initalize({
            trackingId: "UA-XXXXXXXX-YY",
            dispatchInterval: 5,
            logging: false
        });
        GoogleAnalytics.logView("App Component");
    }

    public doSomething() {
        GoogleAnalytics.logEvent({
            category: "TapEvent",
            action: "doSomething"
        });
    }

}

So what is happening in the above code?

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.

public doSomething() {
    GoogleAnalytics.logEvent({
        category: "TapEvent",
        action: "doSomething"
    });
}

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:

<ActionBar title="{N} Google Analytics"></ActionBar>
<StackLayout>
    <Button text="Do Something" (tap)="doSomething()"></Button>
</StackLayout>

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:

[Firebase/Core][I-COR000003] The default Firebase app has not yet been configured. Add [FIRApp configure] to your application initialization. Read more: https://goo.gl/ctyzm8.
[Firebase/Core][I-COR000012] Could not locate configuration file: 'GoogleService-Info.plist'.

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 C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.