Google Analytics (GA)

Google Analytics is maybe the most prominent Webtracking solution for free, but is also available as an enterprise solution, see Analytics 360.

INFO

Google Analytics (GA) is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.

In conjunction with the Google Tag Manager (a tag management system to manage JavaScript and HTML tags, including web beacons, for web tracking and analytics), you can easily add web tracking to an existing application.

Google Search Console is a no-charge web service by Google for webmasters. It allows webmasters to check indexing status and optimize visibility of their websites.

Google Analytics 4 (GA4)

Meet the next generation of Google Analytics. Google Analytics 4 (formerly known as "App + Web") is a new kind of property, with several advantages over Universal Analytics:

• Privacy-focused and durable for the future
• Intelligent, using machine learning to unearth insights about the customer journey across platforms and devices
• Enhanced, seamless integrations with Google's advertising platforms to optimize campaign performance and drive greater marketing ROI

Things to know

• Google Analytics 4 is replacing Universal Analytics
• On July 1, 2023, standard Universal Analytics properties will no longer process data. You'll be able to see your Universal Analytics reports for a period of time after July 1, 2023. However, new data will only flow into Google Analytics 4 properties.

Recommended events

Adding these events to your website or mobile app helps you measure additional features and behavior as well as generate more useful reports. Because these events require additional context to be meaningful, they're not sent automatically.

For all properties

We recommend these events to all customers in all business verticals. Later sections in this article include some of these events when we recommend sending the events for the given use case.

Event	Trigger when	UDINA
ad_impression	a user sees an ad impression, for app only
earn_virtual_currency	a user earns virtual currency (coins, gems, tokens, etc.)
join_group	a user joins a group to measure the popularity of each group
login	a user logs in	✔️
purchase	a user completes a purchase	✔️
refund	a user receives a refund
search	a user searches your content	✔️
select_content	a user selects content	✔️
share	a user shares content
sign_up	a user signs up to measure the popularity of each sign-up method
spend_virtual_currency	a user spends virtual currency (coins, gems, tokens, etc.)
tutorial_begin	a user begins a tutorial
tutorial_complete	a user completes a tutorial

For online sales

We recommend these events when you want to measure sales on your site or app. They're useful for retail, ecommerce, education, real estate, and travel. Sending the events populates the monetization reports.

Event	Trigger when	UDINA
add_payment_info	a user submits their payment information
add_shipping_info	a user submits their shipping information	✔️
add_to_cart	a user adds items to cart	✔️
add_to_wishlist	a user adds items to a wishlist	✔️
begin_checkout	a user begins checkout	✔️
generate_lead	a user submits a form or a request for information
purchase	a user completes a purchase	✔️
refund	a refund is issued
remove_from_cart	a user removes items from a cart	✔️
select_item	a user selects an item from a list	✔️
select_promotion	a user selects a promotion
view_cart	a user views their cart	✔️
view_item	a user views an item	✔️
view_item_list	a user sees a list of items/offerings	✔️
view_promotion	a promotion is shown to a user

SAPUI5 Implementation

SAPUI5 works as a Single-Page-Application (SPA) with the need, to sync your router and event flow with the relevant web tracking solution.

INFO

A Single-Page-Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

To decouple multiple tracking implementations from your application, you can use a component event to loosely track events-on-demand.

Component.js

Register an event handler, to broadcast tracking relevant events from inside you custom controllers.

metadata: {
    ...
    events: {
        /**
         * Event is fired on analytics relevant events 
         * to allow tracking in web analytic tools
         */
        analytics: {
            parameters: {
                event: { type: "string" },
                data: { type: "object" }
            }
        }
    }
}

App.controller.js

The main app controller registers relevant events and delegates to helpers.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
	"ns/util/GoogleAnalytics",  // Generic Implemention for GA
	"ns/util/SAPWebAnalytics"   // Generic Implemention for SWA
], function (Controller, GoogleAnalytics, SAPWebAnalytics) {
	"use strict";
	return Controller.extend("ns.controller.App", {
        onInit: function () {
            // ...
            // register for component analytics event
            this.getOwnerComponent().attachAnalytics(this._onAnalytics, this);
            // register for route title change event
            // Hint: your router targets inside manifest.json need a localized title!!!
            this.getRouter().attachTitleChanged(this._onTitleChanged, this);
        },

        // handle router title change
        _onTitleChanged: function (oEvent) {
			var sTitle = oEvent.getParameter("title");

			// Example usage: set the browser page title (optional)
			document.title = sTitle;

			var sHash = (location.hash),
				sUrl = "/shop/" + ((sHash.startsWith("#")) ? sHash.substr(2) : "");

			// fire analytics event
			this.getOwnerComponent().fireAnalytics({
				event: "pageView",
				data: {
					page_location: sUrl,
					page_title: sTitle
				}
			});
		},

        // forward analytic events to specific implementation
        _onAnalytics: function (oEvent) {
			var sEvent = oEvent.getParameter("event"),
				mData = oEvent.getParameter("data"),
				sTrackingTool = "GA"; // read default from your app config

			if (sTrackingTool === "GA" && typeof gtag !== "undefined") {
				GoogleAnalytics[sEvent](mData);
			} else if (sTrackingTool == "SWA" && typeof swa !== "undefined") {
				SAPWebAnalytics[sEvent](mData);
			}
		}
	});
});

Custom.controller.js

Loosely trigger web analytics events from your controller.

this.getOwnerComponent().fireAnalytics({
    event: "addToCart",
    data: oContext.getObject() // pass in relevant data as object
});