Tracking SAP Cloud Portal Sites Usage Data with Google Analytics

Several weeks ago, I started looking into integrating Google Analytics (GA) with the SAP Cloud Platform Portal to provide customers a way to track the usage data of their Portal sites – Fiori Launchpad and Freestyle.

This is a question we heard from many of our customers who wanted to collect usage data about:

• Usage of specific Fiori Apps in their Fiori Launchpad sites
• Page visits to their Freestyle site pages
• Number of unique users, new users and user sessions
• Distribution of those according to Geo-location, accessed browsers, devices and languages

Searching through the SAP Community Network, I came across this great blog – Google Analytics for Fiori Launchpad– created by Former Member  that made my task much easier and straightforward. As Nathan has already done most of the heavy lifting, my contribution in this post will focus on

• Extending the Google Analytics integration to SAP Cloud Platform
• Adapting the code to work for both Fiori Launchpad and Freestyle portal sites in the cloud

In this post we will

1. Create a similar Fiori Shell plugin to handle the bootstrap and event registration to GA tracking
2. Deploy it to our SAP Cloud Platform account
3. Add and configure the plugin to any Portal site we wish to track

Note: in the screenshots and descriptions I refer to a Fiori Launchpad site, however the same exact steps apply to both types of portal sites.

Prerequisites

Google Analytics

To Register for GA tracking follow the steps as described here – Get started with Analytics

1. Create your GA account
2. Create a new GA Property – A property represents one specific portal site, and is the collection point in Analytics for the data from that site. You will need to create a separate property for each Portal site you’d like to track. When creating the property:

• For Default URL – enter the Portal site runtime URL (without the hash). For instance: https://flpportal-<your account id>.dispatcher.hanatrial.ondemand.com/sites/<your site alias or id>
• Copy the Tracking Id value [‘UA-XXXXXXXX-1’] – we will use it in the Portal site configuration later.

3. Set up a Reporting View in your property which let you create filtered perspectives of your data. For the sake of simplicity create a standard view without any filters to collect all user data from this portal site.

SAP Cloud Platform 

To develop the Fiori Shell Plugin for this integration we will use the  SAP Web IDE for Full-Stack.

Before you start make sure you have the following in place:

• Register for a free SAP Cloud Platform Trial account
• Enable the SAP Cloud Platform Portal service in your account
• Enable the SAP Web IDE Full-Stack service in your account
• And of course ….

You have an SAP Cloud Platform Portal site – either Fiori Launchpad or Freestyle – which you wish to track.

Create the Fiori Shell Plugin

To create a shell plugin please follow the instructions here: SAP Fiori Launchpad Extensibility: Creating SAP Fiori Launchpad Plugins in SAP Web IDE When generating the Shell plugin project enter the project name – gaportalplugin.

Add the custom code

Now that the project has been generated let’s add the code that will register the end user’s session for GA tracking and will send tracking data on specific events. .

1. Open the Component.js file
2. Delete all the file content
3. Replace with the following (assuming you named the project gaportalplugin)

//Boostrap Google Analytics
(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');

sap.ui.define([
	"sap/ui/core/Component"
], function(Component) {

	return Component.extend("gaportalplugin.Component", {

		metadata: {
			"manifest": "json"
		},

		init: function() {
			this.initGoogleAnalytics();
		},
		
		initGoogleAnalytics: function() {
			//Get GA tracking ID from Portal configuration
			var trackingID = this.getComponentData().config.trackingID;
			if (trackingID) {
				var siteService = this.getSiteService();
				if(siteService){
					//Initalize the tracker
					ga('create', trackingID, 'auto');
					this.registerPortalSiteNavigationEvents(siteService);
				}
			}
		},
		
		registerPortalSiteNavigationEvents: function(siteService){
			//Track app and page navigation events
			siteService.subscribeOnAppNavigation(function(target){
				var pageSemanticObj = target.semanticObject;
					ga('send', 'pageview', {
						'page': pageSemanticObj
					});
			}.bind(this));
		},
		
		getSiteService: function(){
			try{
				return sap.ushell.Container.getService('SiteService');
			}catch(exception){
				return null;
			}
		}
	});
});

Lets go over the code flow:

1. When the shell plugin is loaded the Component.js file’s init method is invoked.
2. We get the tracking id corresponding to the unique GA property we created for this portal site and initialize the GA tracking for this user session

3. We use the Portal API to register to the app navigation event. This event is fired when the end user navigates to a portal page and/or launches an application.

GA automatically tracks the page’s relative URL, location,  and title (as set in the browser’s tab header. However when sending the navigation event to GA you can add additional parameters to the event handler as documented here. For instance, provide your own meaningful page/application title:

//Get the page or app title as set in the site menu
var pageTitle = sap.ushell.Container.getService('SiteService').getAppOrMenuTitle();
var pageSemanticObj = target.semanticObject;
ga('send', 'pageview', {
		'page': pageSemanticObj,
		'title': pageTitle
});

Deploy the plugin to SAP Cloud Platform

After developing the shell plugin, deploy it to your SAP Cloud Platform account to make it available for Portal Admins to use in their portal sites. Follow the instructions here: Deploying SAP Fiori Launchpad Plugins to SAP Cloud Platform

Add and configure the Shell Plugin

To enable GA Tracking in your Fiori Launchpad or Freestyle Portal site we will need to add the shell plugin to the site and configure the trackingID parameter with the value we copied from to the GA property.

1. Open the admin environment of your Fiori Launchpad Portal site (Fiori Configuration Cockpit)
2. Click on Content Management > Apps to configure new and existing apps in your Launchpad site
3. Click on + to add a new app
4. In the App Resource list select the gaportalplugin application you just deployed
5. Under App Type select Shell Plugin 

   

6. Click on Catalogs and add the Sample Catalog or Everyone catalog or any other catalog you defined that contains the business roles you wish to track their users.
7. Click on Parameters to enter the new trackingID parameter
8. Click Save to apply your changes

Publish the Site and Verify Setup

To make the latest changes available for your end users

1. Click on the publish button in the top menu
2. Confirm and click on Publish and Open 

   

3. The Portal site run-time is opened in a new browser tab:
4. To verify the setup access the site from a desktop or a mobile (or both) and perform some navigation actions:

• For Fiori Launchpad sites – click on one of the available tiles to launch the app
• For a freestyle site – navigate to one of the pages or launch an app from a link if one is available.

From your Google Analytics cockpit, access the REAL-TIME report. You should see your user session tracked there with details about the device, accessed page/application (+ title),and more.

Google Analytics Reports

The Google Analytics console provides an extensive set of predefined reports graphically displaying the tracking data collected from your site. Under AUDIENCE you can view the number of users and user sessions accessing your site,

The user’s Geo location

User’s device, browser, language and more

Under the BEHAVIOR reports, you can view the details of all the apps and pages that were accessed in your site:

Notice that the Fiori launchpad Search action (through the top search bar) is also tracked.