Shared by Denys van Kempen

SAP technology expert, ambassador, advocate – partner enablement | SAP Press Author | SAP HANA Academy | Experience SAP & Sports Analytics​

Technical Articles
Author's profile photo Soeren Holst

Integrate Google Analytics into SAP Cloud Platform Launchpad with SAP Business Application Studio

 

In this blog post we will integrate Google Analytics (GA) into the SAP Fiori Launchpad (FLP) site to track the data usage of SAP Fiori apps.

Following information might be interesting:

  • Usage of specific SAP Fiori apps in their FLP sites
  • Number of unique users, new users and user sessions
  • Distribution of those according to Geo-location, accessed browsers, devices and languages

To track the data usage, we will develop a Shell Plugin and integrate it into a FLP site on SAP Cloud Platform, Cloud Foundry environment.

We will use the AppLifeCycle Service to attach the app loaded event. Every time a user opens an application inside the FLP the Shell Plugin sends a request to GA with the respective information.

SAP Business Application Studio is the development environment.

Prepare GA

1. Create or sign in to your GA account: https://www.google.com/analytics

2. Create a property in the admin area.

Create%20Property

3. Enter a property name and select “Show advanced options”.

4. Switch on “Create a Universal Analytics property”.

5. Copy the URL of your FLP site without the hash (Open the Launchpad subscription in your SAP Cloud Platform, Cloud Foundry environment account and click on the settings button of you FLP site).

6. Click on next and save the property.

7. Select “All accounts” on the top-left side and choose the property with the Tracking-ID starting with UA in the second line.

8. Note the Tracking-ID for later.

Create the Shell Plugin

1. To develop the Shell Plugin, please follow steps 1-3 of my previous blog post Developing a Shell Plugin for SAP Fiori Launchpad on SAP Cloud Platform, Cloud Foundry environment with SAP Business Application Studio

2. Replace the code of the Component.js with following:

//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;
    a.crossorigin= "anonymous";
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("ns.MyShellPluginModule.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            this.initGoogleAnalytics();
        },

        initGoogleAnalytics: function() {
            //Get GA tracking ID from Portal configuration
            var trackingID = "UA-********";
            //Initalize the tracker
            ga('create', trackingID, 'auto');
            this.registerPortalSiteNavigationEvents();
        },
        
        registerPortalSiteNavigationEvents: function(){
            //Track app and page navigation events
            var oAppLifeCycle = sap.ushell.Container.getService("AppLifeCycle");
            oAppLifeCycle.attachAppLoaded(function(oEvent){
                var oParameters = oEvent.getParameters();
                oParameters.getIntent().then(function(event){
                    var sSenanticObject = event.semanticObject;
                    ga('send', 'pageview', {
                        'page': sSenanticObject
                    });
                });
                
            }.bind(this));
        }
    });
});

3. Build and deploy the project and assign the Shell Plugin to your FLP site as described in my previous blog post in step 4-6.

Open the FLP and check GA

Open the FLP site from your Site – Manager and navigate to any app.

Open GA and select Realtime – Overview on the left side. You will see the real-time activities in your FLP.