Many of our customers have asked if it’s possible to integrate Google Analytics into Profound UI Rich Display applications. Yes, this is certainly possible! In fact, it’s quite simple to incorporate Google Analytics into all of your Rich Display applications. This post will show you how to go about tracking website usage in Profound UI using Google Analytics.

To accomplish this, I’ll be using the pui.onload() event. If you aren’t familiar with this event, I suggest taking a look at our documentation for this here: http://www.profoundlogic.com/docs/display/PUI/pui.onload. The pui.onload() event makes adding Google Analytics to your Rich Display screens an easy task. This event will get fired after every Rich Display record format is rendered. Therefore, anything you have in the pui.onload() event will happen after executing each record format. You can even set your record format names as your routes for your application. This makes it easy for Google Analytics to track usage data for your application.

You can define the pui.onload() event in an external JavaScript file. You would then place this file in the following IFS directory: /www/profoundui/htdocs/profoundui/userdata/custom. In Profound UI Rich Display File development, any file placed in this IFS directory is automatically included in your project.

Another resource that will be helpful for this example is the Single Page Application (SPA) tracking documentation that Google provides. You can find this documentation here: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications.

Now you that you have all the basic information you will need to accomplish this, the only thing that’s left to do is to write your code! I included an example below of how to use the pui.onload() event with Google Analytics:

pui.onload = function(){

var recordFormats = currentFormatNames(); var format = ('/'+ recordFormats[0]);

if(window.ga == null){

(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','https://www.google-analytics.com/analytics.js','ga');

window.ga('create', YOUR-ANALYTICS-ID, 'auto');

window.ga('set', 'page', format);

window.ga('send', 'pageview');

} else {

window.ga('set', 'page', format);

window.ga('send', 'pageview');

}

}

This example first checks to see if the Google Analytics script is loaded. If it is not loaded, it will load the script and send the initial tracking information. Finally, it sends a pageview to a route based on the record format name. In order to do this, I used the currentFormatNames() API, which returns a list of the record formats that are currently displayed. If you’d like more information on this API, you can find it here: http://www.profoundlogic.com/docs/pages/viewpage.action?pageId=20938790.

And there you have it! You can now use Google Analytics with your Rich Display applications.