Introduction

There are multiple ways to trace page views and user activity. Among them, SAP provides SAP Analytics Cloud (SAC). Google Analytics is another way that can be integrated with SAP UI5. In this article, we will learn Google Analytics Integration in SAP UI5.

What is Google Analytics

Google Analytics is a web analytics service offered by Google that helps website owners and marketers understand how users interact with their websites and mobile apps. It provides detailed insights into user behavior, including page views, clicks, bounce rates, session duration, and more. With Google Analytics, website owners can measure the performance of their website, identify areas for improvement, and make data-driven decisions to optimize their online presence.

How to configure Google Analytics

To configure Google Analytics so that you can integrate it later with SAPUI5, you can follow these steps:

1. Sign up for a Google Analytics account if you don’t already have one.
2. Once you’re logged in, click on the Admin button in the lower left corner of the screen.
3. In the Admin panel, click on the “Create Property” button to create a new property for your website.
4. Follow the prompts to enter information about your website, such as the website name, URL, and time zone.
5. On the next screen, select “Website” as the type of property and enter your website’s URL.
6. Under “Advanced Options,” make sure that the “Create a Universal Analytics property” option is selected. This will enable you to use the latest version of Google Analytics, which supports more advanced features and reporting.
7. Follow the remaining prompts to complete the setup process and obtain your tracking ID. This ID will be in the format “UA-XXXXX-Y” where “XXXXX” represents your account number and “Y” represents the property number.
8. Once you have your tracking ID, you can integrate Google Analytics with SAPUI5 by adding the tracking code to your application, as described in the previous answer. Make sure to replace “GA_MEASUREMENT_ID” with your actual tracking ID.

How to Integrate Google Analytics in SAP UI5

To implement Google Analytics tracking using SAPUI5, you can follow these steps:

1. Add the Google Analytics tracking code to your SAPUI5 application. You can do this by creating a new JavaScript file and adding the tracking code to it. Make sure to replace “GA_MEASUREMENT_ID” with your actual tracking ID.

   sap.ui.define([], function() {
     "use strict";
     return {
       trackPageView: function() {
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'GA_MEASUREMENT_ID');
       },
       trackEvent: function(category, action, label, value) {
         window.gtag('event', action, {
           'event_category': category,
           'event_label': label,
           'value': value
         });
       }
     };
   });
   

    

2. Include the JavaScript file in your SAPUI5 application by adding it to the manifest.json file.

   {
     "sap.ui5": {
       "resources": {
         "js": [{
           "uri": "path/to/tracking.js"
         }]
       }
     }
   }
   

    

3. Call the trackPageView method in your SAPUI5 application’s controller or component.

   sap.ui.define([
     "sap/ui/core/mvc/Controller",
     "path/to/tracking"
   ], function(Controller, tracking) {
     "use strict";
     return Controller.extend("your.namespace.controller.App", {
       onInit: function() {
         tracking.trackPageView();
       }
     });
   });
   

    

4. Call the trackEvent method to track specific user actions in your SAPUI5 application.

   sap.ui.define([
     "sap/ui/core/mvc/Controller",
     "path/to/tracking"
   ], function(Controller, tracking) {
     "use strict";
     return Controller.extend("your.namespace.controller.App", {
       onPressButton: function() {
         tracking.trackEvent("Button", "Click", "Submit", 1);
       }
     });
   });
   

    

   That’s it! With these steps, you can implement Google Analytics tracking in your SAPUI5 application and start collecting valuable data about your users’ actions.

    

Google Analytics Integration in SAP UI5

Index.html

<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>

sap.ui.define([], function() {
  "use strict";
  return {
    trackPageView: function() {
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-63143188-5');
    },
    trackEvent: function(category, action, label, value) {
      window.gtag('event', action, {
        'event_category': category,
        'event_label': label,
        'value': value
      });
    }
  };
});

Main.view

<mvc:View controllerName="Test.Test.controller.Main" xmlns:ndc="sap.ndc" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="Google Analytics Integration in SAP UI5">
                    <content>
                        <Button icon="sap-icon://area-chart" text="Track Page View using Google Analytics" press="onPressButton"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Main.controller

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "Test/Test/js/tracking"
], function (Controller, MessageBox, MessageToast, JSONModel, tracking) {
    "use strict";
    return Controller.extend("Test.Test.controller.Main", {
        onInit: function () {
            
        },
        onPressButton: function () {
            tracking.trackPageView();
        }
    });
});

Manifest.json

        "resources": {
            "js": [{
                "uri": "js/tracking.js"
            }]
}

Output

Google Analytics

Before

After