Understanding how users interact with your applications is crucial, which video is generally watched, which character is generally played, which feature is not used, many insights that can drive away the users or increase their engagement.
Google Analytics is dominating the subject, they started first and injected a **** lot of money in their technology.
In this tutorial we will have a look at how we can use it in a HTML5 mobile application with Ionic.
The application will be very simple, we will track when a user arrives on the Home Page and when he answers a question.
As usual we start by creating our application and installing Cordova and Ionic plugins:
Good news, a mobile device is not required to use Google Analytics.
We can use the browser platform. This platform is an improved version of your current browser, some Cordova plugins work with it which is awesome for debugging!
We first need to install it:
Normally the browser can be run with livereload like this:
However, a recent change broke it. Thanks to the Ionic community, a workaround was found, you can use this for now:
A Google Account account is required to use Analytics.
The signup is there.
A new property is required, basically one for each application or website we need to track:
Nothing complicated here:
A new Account Name because it’s a brand new Google Analytics account and the name of the application.
We finally access this:
Our Tracking ID!
We can now start coding.
Our first objective is to track when a user visits the Home Page, but first we add GoogleAnalytics to the list of providers:
And setup the home.ts file:
The GoogleAnalytics Service will be stocked in a property, the tradition is to call it ga.
The startTrackerWithId method will init our Service with our Tracker ID, once this is done the trackView method will notify that the Home Page has a new View. Every time this event will be triggered, it will increment the number of PageViews for the Home Page.
Launching our app, we have our first View detected!
We can now move forward, our next goal: tracking a custom event!
Here is the home.html file that will be used:
Just a simple question for the user, the number property will stock the answer and the hasAnswered property will show a thank you message once the question is answered.
The answer method will be used to trigger Google Analytics event, which is as follow:
(Don’t forget to initialize the hasAnswered property to false).
The trackEvent method signature is as follow:
trackEvent(category, action, label, value, newSession)
We won’t use the newSession parameter. All the other parameters are strings except the value, which is a number.
All of those information are custom, nothing set in stone.
The category is named “form” because it’s form related, you can create your own like Videos, Downloads, etc.
The action is “vote“, you can call it play, pause, download, etc.
The label is “Hours online” to track the corresponding question.
Finally the value is the answered number.
Moving to the Events sub-menu, you have the event triggered when the question is answered!
Ok I have to tell you one thing that can make you sad …
Until now we have used the REAL-TIME menu.
If we move to BEHAVIOR -> Events -> Overview:
There is nothing…
This is where all the data are stocked.
You’d say “that’s ok we have the Real-Time area where we have the data”, well … not really, the value that you pass when answering the question in the application is only available in the BEHAVIOR view, not the Real-Time one and this view generally takes one or two days to refresh.
Furthermore Google Analytics only considers that you will need a number for tracking minutes played, number of videos watched, number of downloads, … and that’s not always true.
A workaround would be to simply use the label field to do the work:
We finally have the values and the count:
We have seen how to track a page View and a Custom Event. An Event is composed of a category, an action, a label and a value. It requires a lot of processing time before being registered in Google Analytics, this time is required so Analytics can make some statistics with the values and display it on the Overview report page.
Gathering data on users is super important to improve a mobile application and see what they like and what they don’t like.
With great power comes great responsibility so don’t be evil 😉. If you handle Google Analytics in another way don’t hesitate to comment.