Track Rich Pages With Google Analytics

While Engage supports tracking of rich page opens out of the box, you can also track opens and clicks within a rich page with a third-party tool like Google Analytics.

See the Rich Content Editor Tutorial to learn how to create rich pages.

What You'll Do

In this tutorial, you will:

  1. Create a new Property in Google Analytics and copy its Tracking ID.
  2. Copy Google's website tracking code and add it to your rich page.
  3. Copy the link clicks tracking code and add it to your rich page.
  4. Create a Google Analytics filter.
  5. View the events.

Steps

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

Configure Google Analytics

  1. Navigate to the Admin page in Google Analytics.
  2. From the Property dropdown menu, select "Create new property", and name it something like "Urban Airship Rich Pages."

  3. Set the Default URL to https://device-api.urbanairship.com.

  4. Verify that your page looks like this:
  5. Click the Get Tracking ID button, then you will see the this page:
  6. Note the Tracking ID assigned to this property.

Track Page Opens

To track page opens you need to embed the Google Analytics JavaScript.

If you just completed the previous step, you will already have this page open, and you can skip to step 4.

  1. Navigate to the Admin page in Google Analytics.
  2. From the Property dropdown menu, select the property you created in the previous step.

  3. In the Property column, click Tracking Info then Tracking Code.

  4. Copy the code from the Website tracking section.
  5. Paste the code into every page you want to track. Sample code is below. Make sure to replace YOUR TRACKING ID HERE with your actual Tracking ID.

<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>
Note

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

  1. Paste this code into every page you want to track:
       <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. See Google's documentation for more information.

  2. Wire up the event to your event, passing a unique ID to the sendLink() method:
       <a onclick="return sendLink('download');" href="http://blah.com/download">Download Now</a>
       

View the Events

If you are tracking Link Clicks, view the events in the Overview or Content sections of the Google Analytics Real-Time report.

Page Opens

Because Urban Airship 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.

  1. Navigate to the Admin page in Google Analytics.
  2. In the View column, click Filters then + New Filter.

  3. Set the filter so it looks like this:
  4. Click the Save button.

The filter converts URLs from this format, with user info embedded:

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

To this, which is how message-level URLs will appear in Google Analytics reports:

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