Integrate Google Analytics GTag to SAP Fiori Smart Template Application

There have been multiple blog posts and documents on integrating Universal analytics to Fiori application. Universal analytics will be sunset soon and we have to usestart using GA4 or Google Tag Manager.

In this BlogPost i will detail on integrating GA4 to SAP Fiori smart template application. It doesn’t have an index.html file. So how do we integrate? Component.js!

Create a Google Analytics Account and a GA4 property

Follow “Prepare GA “section in this Blog Post

Integrate Google Analytics into SAP Cloud Platform Launchpad with SAP Business Application Studio | by Sören Holst #sap #sapcloudplatform #sapbusinessapplicationstudio #sapfiori – Strategic Services (stratserv.co)

Get the GA Code

The setup assistant will lead you to choose GTag or manually add GA-4 code

Copy this code and keep handy

<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxxx"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-xxxxxxxxxxx'); </script>

If you want to view it after setup

Go to Admin Setup Assistant->Data Collection->Data Tream->View tag instructions

Integrating in SAP Smart template app

Open Component.js of your smart template app and add the code as below

-( 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;
	a.crossorigin = "anonymous";
	m.parentNode.insertBefore( a, m );
} )( window, document, 'script', 'https://www.googletagmanager.com/gtag/js?id=G-ZW7S7EYLPF', 'ga' );
window.dataLayer = window.dataLayer || [];
function gtag () {
	dataLayer.push( arguments );
}
gtag( 'js', new Date() );

gtag( 'config', 'G-ZW7S7EYLPF',
	{
		'user_id': sap.ushell.Container.getService( "UserInfo" ).getId()
	} );
sap.ui.define( [ "sap/suite/ui/generic/template/lib/AppComponent" ], function ( AppComponent ) {

Use GTag to send events from your controller

  gtag( 'event', 'click_cart', {
                'event_category': 'button', 'event_label': 'somename',
                'soemprop1': desc, 'someprop2': Country
            } );