Using Google Analytics With Your Next RhoMobile App

“What gets measured gets managed” - Peter Drucker

Which parts of your RhoMobile app are being used most? Which parts are almost never being touched? What part of your app causes people trouble and drives them away? If you don’t have answers to those basic questions, it’s impossible to know what you should work on for version 2.0. Fortunately, there’s an easy way to find these answers.

Google Analytics let you track anything from eCommerce transactions to custom goals and conversions. Google even offers a feature where you can view your analytics in real time.

But all of these benefits are useless if we don’t know how to implement them. In this blog post, we are going to go over how to put analytics in our RhoMobile application and how to track pageviews, events, and social interactions using Google's javascript library, Analytics.js.

You can download the starter code for this tutorial

Getting Analytics Set Up in Your Code

1. Download the files to your desired workplace or simply clone the Git repository to your Desktop.

  Note: If you already have a tracking ID for your mobile web app, skip steps 2 and 3

2. Go to the Google Analytics page and sign in. If you don't have an account, create one.

3. Now go to the Admin tab, click on the drop down menu for “Property” and choose “Create new property”. When asked what you would like to track, pick website since we are creating a mobile web app. Fill out the rest of the fields however you wish and press “Get tracking ID”.

4. Go into Public/www/index.html and add the following snippet of code right before .

Now replace UA-XXXXX-YY with your tracking ID to enable Analytics.js inside of your RhoMobile application.

In future applications, you are going to want to add this snippet in the head of every HTML page that your users are going to visit.

Note: When working with mobile web apps and Google Analytics, there is no domain to store the data with. Instead, we need to turn off cookie storage in Universal Analytics and pass in our own clientId value. You have the following options for how to do this:

• You can set your own clientId value if your users are logged in. Google recommends a UUID v4 value.

• ga('create', 'UA-XXXXXX-YY', {
  'storage': 'none',
  'clientId': '92bf24a5-20e5-4181-9778-2835f28c52d8'
  });
  ga('send', 'pageview', {'page': '/my/page'});

• You could generate a random one and implement logic to store it in localStorage of the browser. (code not shown for this option)

Now that we have the initial set up for Google Analytics, we will add some code to track the analytics we’re interested in.

Tracking Pageviews

One of the first things we want to know is which pages our users visit. Knowing popular pages can help us make sure we are focusing our time and efforts on the right parts of our app.

To do this, we add pageview tracking to all of our main pages. Go into public/www/js/HomeView.js, and then into the function this.render(). Add the following line right before return this;      

ga('send', 'pageview', {'page': '/socialMedia'});

This will notify Google each time a user is about to search for a friend on our Zebra Social Network. pageview indicates that we’re tracking a pageview as opposed to a transaction or an event. {'page': '/socialMedia'}); has Google Analytics  associate our action with the page /socialMedia and will let you know this page is where the action took place. We could make the page whatever we wanted though: {'page': '/WhateverWeWanted'});

Go into EmployeeView.js and add the following line inside of this.render() and right before the return statement.

ga('send', 'pageview', {'page': '/social/' + employee.firstName});

Now we know which friends’ profiles our users visit the most.

We also want to know when people visit our supplies store but don’t purchase anything. Go into suppliesHome.js and add the following line inside of this.render() and right before the return statement.

ga('send', 'pageview', {'page': '/visitStore'});

These three simple lines of code will keep us up to date on our users’ behavior and how the user traffic flows through our app.

Pageview tracking is useful, but there is more to analytics than what pages our users visit.

Tracking Events

Are a lot of people having problems with our technology and in need of IT help? A single line of code will give us the answer.

Go into useful_tools.js and into this.help(). Add the line:    

ga('send', 'event', 'location', 'search', {'page': '/office/location'});

Add another event call inside of suppliesHome.js. Go into this.buy() and add the following code:

ga('send', 'event', ‘supplies’, ‘buy’, {'page': '/supplies/buy'});

This will notify us whenever someone buys office supplies, helping us keep track of purchases.

The format of an event call is:

ga('send', 'event', 'category', 'action', {'page': 'page name'});

This is important to know for customizing your own events in the future. For our event, the category is supplies and the actions is buy, but you can put whatever you like for these fields.

Tracking events is useful for measuring the effectiveness of almost any function or feature. But how do we track something less tangible such as a user’s social behavior and interactions.

Social Interactions

Social Interaction Analytics allows you to measure the number of times users click on social buttons embedded in webpages. For example, you might measure a Facebook "Like" or a Twitter "Tweet." The breakdown of an analytics call for Social interactions looks like this: 

ga('send', 'social', 'social network', 'social action', 'social target');

We going to use social analytics to track our Zebra social network and see which users are using our ‘Like’ feature. Go into the EmployeeView.js and into this.thumbsUp(). Add the following line before the alert:

ga('send', 'social', ‘Zebra social network’, 'like', {'page': '/' + employee.firstName + '/like'});

Every time someone uses our mobile app and likes an employee’s work on our social network, Google Analytics will know all the details about it.

Let's look at how to put this all together and track a combination of analytics and track progress towards a specific goal.

Goals

Goals measure how well your site or app fulfills your target objectives. A Goal represents a completed activity, called a conversion, that contributes to the success of your business or application.

To create a goal:

1. Log into Google Analytics
2. Go to Admin→ View→ Goals→ +New Goal
3. Pick a name, a Goal ID and set (you can have multiple goals as part of the same set), and a type of goal, and then hit next.
4. Depending on the type of goal you picked, you will be asked to fill out specific Goal oriented details that let Google Analytics know when your goal is hit and how much that goal is worth.

  (Pic of details for an event based goal)

In the pic above, our goal is an event goal. It is hit if the category of a recorded event is equal to ‘category’. We set the value of each conversion at $5.00. Google Analytics will keep track of how much money we’ve made through all our goals and conversions and will add $5.00 to the total every time this goal is reached.

Where to Read the statistics we gathered

All the statistics we’re tracking can be found at Google’s analytics page after you log in.

Real Time View

Google's Real Time view lets you watch certain analytics such as events, pageviews, and user locations be displayed in real time, which doubles as a great way to test out your code for Analytics.js and see that you are implementing it right.

Google can take 24-48 hours to display all other analytics (social interactions, eCommerce, etc)

Conclusion

With only a few lines of code, we were able to track almost all the features and screens viewed in our application, giving us tons of data to work with. We can track which features users love the most, which screens they spend the most time on, and most importantly, what to keep, get rid of, and improve upon.

This has only scratched the surface of what you can use Analytics.js for. Check out more useful features and experiment with them in your next RhoMobile application.