Skip to Content
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.

 

Assigned tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sven Dupre
      Sven Dupre

      Hey

      Thanks for the nice post!

      I was wondering if it is also possible to detect tile presses to external apps (app type URL instead of app type SAPUI5 in the configuration on the site) by using a standard sap service. These are not detected with your described solution.

      Right now we are detecting these using vanilla javascript (adding event listeners to the tiles). It works but it is not a clean solution.

      Sven