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

[former_member243046]

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.

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 w...

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.