How to Install Google Analytics in FIORI Launchpad Plug In

Recently we had a requirement to understand FIORI Tile Usage in SAP. We wanted to use Google Analytics for this purpose. Since the google Analytics 4 has HTML tags given in there website it was not a straight forward task add the code in compenent.js

Thanks to ChatGPT , I was able to convert the tag to JavaScript for breaking my head for 3 days !

Here are the steps :

Step 1 :  Login to Web IDE – Create a project from Template

Add Project from Template

Step 2 :  Choose FIORI Plugin

Choose FIORI Plugin

Step 3 : Provide Project Name

Provide Project Name

Step 4 : Give  Plugin ID as com.companyname.ga  and Click on FINISH

Give Plugin ID

Replace the below code in Component.js

// Load Google Analytics asynchronously
// Tracker ID will G-XXXXXXXX

(function (GA_TRACKING_ID) {
  const script = document.createElement('script');
  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`;
  script.async = true;
  document.head.appendChild(script);
})('G-XXXXXXXX');  // Your Tracker ID will G-XXXXXXXX


sap.ui.define([
	"sap/ui/core/Component"
], function (Component) {

	return Component.extend("com.companyname.ga.Component", {

		metadata: {
			"manifest": "json"
		},

		init: function () {
			window.dataLayer = window.dataLayer || [];
			function gtag() {
							window.dataLayer.push(arguments);
				}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXX');  // Your Google Tag

		}
	});
});

Step 5 : Deploy to SAP Gateway as UI5 Reprository

Deploy to Gateway System

Step 6 :  After deploying create a target mapping and tile in a Catalog which all users have access

Create a Tile Target Mapping

Create a Tile

Step 7 : Add the Tile to universal group so that plugin will capture user activities.

Step 8 :  Check your Google Analytics to see the traffic is captured.

Results in Google Analytics are shown below :

As you can see it shows the number of users , demography , event count , Tiles click

Results on Activity in FIORI Launchpad

Summary

From this blog we have learnt  to create a SAP FIORI Plugin , add a google tag in FIORI Launchpad , assign plugin to FIORI Catalogs and Groups and view user activity in Google Analytics to get a FIORI Usage Report.

Please provide feedback or ask clarifying questions regarding your content in the comment section