Skip to Content
Author's profile photo Craig Gutjahr

Google Analytics Integration with SAPUI5 / Fiori

With the release Fiori, SAP has announced to the world that it is serious about improving the lives of users and it is spending resources providing easy to use tools. Fiori provides a greatly enhanced user interface built on an up to data HTML5 architecture. However, the question now comes up ‘How are my users using the new tools”?

With Google Analytics, you can determine where your visitors are coming from, which links on your site are getting the most hits and how long the visitors spend on various pages of your site. In addition to providing critical marketing data, it also tracks browser features so that you can make informed design decisions. Analytics will tell you the screen resolution and connection speed of your users.

Integration of Google Analytics with custom Fiori applications (and SAPUI5 architecture in general) will provide site owners and administrators a view into HOW the users are using the system, as well as key demographic information on the users who.

Integration Instructions

Google Analytics Account Setup

The setup the Google Analytics account is basic and free. It is recommended that you setup for two accounts; one for production user and one to use as a base for testing.

Step 1 – Establish an account with Google Analytics

  • Go to
  • Enter your Google account email and password and click Sign In
  • Click on the Admin tab at the top header area of the site.
  • In the ‘Account’ section, choose to ‘Create a new Account’


  • On the next page, you will be asked ‘what would you like to track. Choose ‘ Website’
  • Choose Universal Analytics


  • Fill out the remaining fields
  • Agree to the Terms and Conditions

Step 2 – Get the Google Analytics tracking code

Google Analytics only tracks pages that contain the Google Analytics tracking code. The first step is to get the specific tracking code for your site. The second step (which will be covered later) is to add the code to each of your portal pages, which you want to track.


You’ll need to update the “xxxx-x” in the sample above with your own Google Analytics account number.

Fiori Application Integration

The integration with your SAP Fiori application is basic and straightforward. However, it is important to note that Fiori applications are not typical web sites with several HTML pages with some CSS and JavaScript files utilized.

Fiori applications are written in JavaScript and are interpreted by the browser at run time. Therefore, there are no HTML files in which you add the Google Analytics code.  The Google Analytics code will be entered directly into the JavaScript code.

This example is meant to give you a basic overview how the integration can be completed.  These instructions assume you have an existing simple Fiori Master List and Detail application.

Step 1 – Add the ‘core’ Google Analytics to the Component JS file. Please remember to change the xxxxxxxx-xx to your own Google Analytics code


Also note the term AUTO in following line. This tells Google Analytics to ignore if the call is coming from a different website


Step 2 – Google Analytics is now accessible via the JavaScript variable ‘ga’. You can now utilize the variable to call Google Analytics and record Events or Page Views. For simplicity I am using the following code to register a Page View’ when the user clicks on an item in the master list.


Whenever a user clicks on an item, a call is made to Google Analytics and a page view is recorded via the page ‘/ViewDetail’.


This article detailed learnings of some recent efforts to integrate one of these best- of-breed web traffic tools and custom Fiori applications. Integration of the two applications will provide both administrators and business users imperative information on how their users conduct business within their Fiori application

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kumar Saurav
      Kumar Saurav

      Hi Craig,

      Thanks for crisp but necessary information.


      Kumar Saurav.

      Author's profile photo Saurabhn Gupta
      Saurabhn Gupta

      Hi Craig,

      steps mentioned in article will work only in Fiori on cloud?

      Author's profile photo Craig Gutjahr
      Craig Gutjahr
      Blog Post Author

      It should work in the cloud and on premise..

      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Craig,

      This is really awesome blog.

      I am also trying to integrate Google Analytics tool. I have got below generated code. How can I fit this in my case? Can you please guide me? I am feeling difficulty to integrate.


      <!– Global site tag (gtag.js) – Google Analytics –>
      < script async src=”″></script>
      < script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag(‘js’, new Date());

      gtag(‘config’, ‘UA-XXXXXX-1);
      < /script>

      Thanks and Regards,