Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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
1 Comment
Labels in this area