Integrate Google Analytics GTag to SAP Fiori Smart Template Application

[akshaya_p]

Dear readers,

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 | ...

 

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

            } );

You will see the properties in the custom event in google analytics

Further Read

https://stratserv.co/2020/12/integrate-google-analytics-into-sap-cloud-platform-launchpad-with-sap-b...

Set up events  |  Google Analytics 4 Properties  |  Google Developers

How to Fix Missing GA4 Event Parameters 2023 (measureschool.com)

[GA4] Custom events - Analytics Help (google.com)

https://webmasters.stackexchange.com/questions/125362/how-can-i-track-button-click-in-google-anality...

Gtag Reference- Google tag API reference  |  Google tag (gtag.js)  |  Google Developers

Custom Dimension-[GA4] Custom dimensions and metrics - Analytics Help (google.com)