Using Google Analytics in Rich Application Pages

While Urban Airship supports tracking of rich page opens out of the box, often customers like to track opens and clicks within a Rich Page with a third-party tool like Google Analytics.

Setup

These directions assume you already have created a Google Analytics account.

  1. Go to the Admin page in Google Analytics.
  1. Under the Property menu, select “Create new property” and name it something like “Urban Airship Rich Pages”

  2. Set the Default URL to https://device-api.urbanairship.com. After completing the above three steps, verify that your page looks like this:

  1. Click to apply settings.

After clicking Get Tracking ID, you will see the following page:

Be sure to take note of the Tracking ID assigned to this property.

Track Page Opens

To track opens for a page you need to embed the Google Analytics JavaScript. You can get this code from the Google Analytics Admin screen, under Tracking Info > Tracking Code. It looks like this:

<script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'YOUR TRACKING ID HERE', 'urbanairship.com');
   ga('send', 'pageview');
</script>

Replace YOUR TRACKING ID HERE with the tracking ID you were given at the end of the setup process.

it may take several hours before results appear in Google Analytics.

Viewing the Results

Because UA generates a unique URL for each page per user, you will want to first create a filter so that Google Analytics will roll up your URLs to the page level. The following filter will convert urls from this format, with user info embedded:

https://device-api.urbanairship.com/api/user/3BIi_uawQaa8HShcJJxooA/messages/message/iyHEOIqcTq-drAx78p4FYw/body/

To this:

/api-messages/message/iyHEOIqcTq-drAx78p4FYw/body/

The steps to set this up are:

  1. Click on Admin

  2. Click on filters

  3. Click new filter

  4. Make it look like this:

This will allow you to see message-level URLs like so:

You can change the Primary Dimension to see the plain English page title.

Track Link Clicks

One way to track clicks within your Rich Page is to fire Events off to Google Analytics.

To accomplish this you can include this script in your page:

<script>
 function sendLink(choice) {
    ga('send', 'event', 'category', 'action', choice);
    return true;
 }
</script>

You can modify the values of ‘category’ and ‘action’ to organize the information in Google Analytics.

For more information, see Google’s documentation: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Then wire up the event on your event, passing in a unique id to the sendLink() method like so:

<a onclick="return sendLink('download');" href="http://blah.com/download">Download Now</a>

Check the Events section under Real-Time or Content, to see your results.