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.
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 http://www.google.com/analytics
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
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
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