Introduction

Google Analytics is a great tool for tracking site usage. It gives visibility into what is getting used and when. It also has the ability to create custom reports based on filter criteria.

In this post we will show how to add Google Analytics as a Fiori Plugin that can be used to track app and page usage.

Setting up Google Analytics

Here is a link with directions on how to set up a Google Analytics (GA) Account. What we will need is the tracking ID so we can add it to the plugin. It will look like this:

'UA-XXXXXXXX-1'

Fiori Plugins

Fiori Plugins are used for customizing the UI. In our case we will use it to load and register the Google Analytics Library. We will add options to pull our tracking ID from the target mapping configuration.

Plugin Code

You can create the plugin project by creating a standard project in the WebIDE and deleting all the directories in your webapp folder until you are left with the component. It should look something like this:

The magic happens in the Component.js. The Code will show a lot of errors in the WebIDE. The errors are a mix of missing semi colons and undefined objects, both are fine and should run correctly on the launchpad.

//Load the Google Analytics library (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; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); sap.ui.define([ "sap/ui/core/Component" ], function(Component) { "use strict"; return Component.extend("com.ipaper.ca.ga.plugin.Component", { init: function() { //Pull the Google Analytics tracking ID from the target mapping configuration var sAppID = this.getComponentData().config.GA_App //Make sure a tracking ID is maintained if (sAppID) { //Initalize the tracker ga('create', sAppID, 'auto'); //Called after the plugin is loaded ga('send', 'pageview', { 'page': location.pathname + this.cleanHash(location.hash) }); //Called when the hash is changed $(window).hashchange(function() { ga('send', 'pageview', { 'page': location.pathname + this.cleanHash(location.hash) }); }.bind(this)); } }, cleanHash: function(sHash) { //Remove Guids and numbers from the hash to provide clean data //TODO:Remove everything between single quotes return sHash.replace(/(({){0,1}[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(}){0,1})|(d)/g, ""); } }); });

There are a few things I’d like to make note of.

1. Fiori is a single page application so it never changes paths. Instead, Fiori uses the hash of the URL (everything after the #) to represent a “Page”.  The hash of the URL is never sent to the server. This means that we do not see the hash in the GA Console and our data is almost meaningless. To fix this we need to concatenate the pathname and the hash into the pageview call forcing it to be sent.
2. Fiori hashes can contain fully qualified pages for specific resources that contain identifiers in it. This is problematic if we want to see how much our pages are getting used because to GA every object will look like a different page. To fix this we strip the hash of Guids and numbers to allow for better tracking. After doing so, in GA all the pages will not have Identifiers.
3. Another side effect of the single page architecture is that GA does not know when we change pages. To counter this we add our pageview call inside of a callback on the “hashchange” event. This means that any navigation that we make will trigger a page view to be registered inside of GA.

Registering to the Launchpad Designer

Once you have created a new project and added the code to the Component.js you need to set it up through the Fiori Launchpad Designer.  Navigate to the Launchpad Designer and create a new Target Mapping.  Keep in mind that you need to add it to a catalog that every user—or at least every user you want to track—has access to.  All you need to do is add it to the catalog; it does not need to be added to a group.  Create a new target mapping and configure it similar to what is below.

There are a few things to mention here:

1. You must use the Semantic object of “Shell” and the Action of “plugin”
2. Add the Google Analytics tracking code in the parameters. This allows you to edit the ID in different systems so your development system doesn’t interfere with your production data.
3. Remember to only add the tracking code to the system you want to track.

Considerations

There are a few things that this implementation might make you reconsider. Making report data meaningful might mean changing the identifiers on your apps. Also using navigation for different tabs will track the usage of the tabs themselves.