CX Works

A single portal for curated, field-tested and SAP-verified expertise for your SAP C/4HANA suite. Whether it's a new implementation, adding new features, or getting additional value from an existing deployment, get it here, at CX Works.

Navigation
Related Services
Contributors
Avatar of Chris Lee
Chris Lee
Last Updated: Oct 9, 2019

Integrating Web Analytics with your SAP Commerce Cloud Storefront - An Overview

Web Analytics: Integrating Google Analytics with your SAP Commerce Cloud Storefront

In the last decade, web analytics has exploded in popularity and it is easy to see why; unlike traditional brick and mortar storefronts, eCommerce stores are able to track and analyze their visitors' behavior in far more detail. There are many web analytics tools available on the market, many of which aim to address different business needs. In this article, we will summarize a few common types of web analytic tools that you can use to learn more about how your visitors interact with your website. In the second article, we provide detailed examples of how to integrate Google Analytics and Google Tag Manager into your SAP Commerce Cloud solution.

Table of Contents


Introduction

Web analytics, also known as eCommerce analytics, has become a key pillar in any successful commerce solution today. It provides an immense amount of insights and information about how your visitors are interacting with your website. The depth and detail of information available using these tools provides a definitive competitive advantage over traditional brick and mortar storefronts, where data collection is far more difficult. With a successful implementation of a web analytics tool, you will have accurate data such as the number of visitors, their behavioral patterns, and how they got to your website. This information is difficult to gather in traditional retail environments. The best SAP Commerce Cloud solution implementations use this competitive advantage to optimize their operations, increase conversions, and ultimately improve the business' bottom line.

Types of Web Analytics Tools

There are countless types of web analytics tools out there, but we will focus on tools that are commonly integrated with SAP Commerce Cloud websites. Most tools fall under the following categories:

  1. Behavioral Web and Clickstream Analytics
  2. User Experience Monitoring
  3. Web Performance and Up-time Monitoring 
  4. Data Visualization and Dashboarding

Many web analytics tools will overlap in their functionality and cover multiple categories, but generally will have an area of specialization. For example, Google Analytics is primarily a behavioral analytics tool, however, it offers features that address other categories as well.

Type Description Common Solutions
Clickstream and Behavioral Web Analytics

This type of tool focuses on visitor interactions with your website, such as page views, URL parameters, clicks, events, and conversions. The term "clickstream" comes from this concept of capturing all the click data on your website and then processing it into useful information. This information can then be used to make improvements to digital marketing, site design, product merchandising, and evaluate eCommerce storefront performance.

Google Analytics

Matomo (Piwik)

Adobe Analytics

User Experience Monitoring

Where behavioral web analytics tools track and measure interactions with the website, user experience monitoring tools collect data on the customer experience itself. For example, a visitor could come to the site and visit 15 pages. A user experience monitoring tool aims to answer whether this visitor was engaged due to great content, or whether the visitor was just lost due to poor site design. There are different approaches that tools use, one of the most common is screen recordings or heatmap tracking. These tools record visitor sessions to view and analyze complete visitor journeys. Combining this with screen heat-maps and aggregating this data into common visitor scenarios can lead to valuable insights on how your visitors perceive your site.

Crazy Egg

Fullstory

Usertesting.com

Web Performance and End User Monitoring

Web performance tools tend to be more technical in nature. They monitor and evaluate site performance regarding site load speed and availability. With the explosion of mobile, fast page load times have become an integral part of keeping visitors engaged on mobile devices. Google has committed considerable resources into "making the web faster" through its developer resources and PageSpeed Insights tool. Many SEO experts believe that Google's search ranking algorithm favors fast loading website and penalizes slow sites, which adds to the importance of having a high performing site. Dynatrace and AppDynamics are examples of companies that offer end-user monitoring tools (as well as application monitoring) commonly used with SAP Commerce Cloud.

Dynatrace Digital Experience Monitoring

AppDynamics

Data Visualization and Dashboarding

These tools take the data collected from various sources (including web analytics platforms) and aim to present the data in a clean and easy to understand format. This can be done using visualizations (such as graphs and tables), aggregations (totaling sales for the year), or providing comparisons (this year over last year). These tools take your data and present it to you in an easily digestible format for reporting and analysis.

SAP Analytics Cloud

Tableau

Google Analytics & Data Studio


Google Analytics

Google Analytics is one of the most widely used web analytics platforms today. It offers a basic free version and has a simplistic user interface that is tailored towards business users. It is also flexible in terms of implementation. A basic implementation is just a snippet of JavaScript code on all your web pages. When more detailed data or information is needed, it is possible to build an advanced implementation using custom code and APIs.


This series will focus on how to implement Google Analytics effectively with an SAP Commerce Cloud storefront.


Web Analytics Technology Landscape

Before diving into the Google Analytics integration, it helps to take a step back and see how the different technology layers interact. Each layer is dependent on the previous, for example, you cannot collect analytics on a site that is not yet live.



Google Analytics sits in the data collection layer of the technology stack, collecting data from the storefront layer and passing it down to tools that use Google Analytics as a source. Google Analytics itself also has some reporting and dashboarding features. Many tools in the next layer, such as SAP Marketing Cloud, have direct integrations to Google Analytics to source and use this data for marketing purposes.


This article assumes you have your SAP Commerce Cloud storefront live in production before looking to integrate a web analytics tool such as Google Analytics.


Traditional Implementations

In traditional Google Analytics implementations, analytic tracking uses hardcoded JavaScript (JS) on all pages of the website. Google has it documented here. For example:


analytics.js
<!-- Google Analytics -->
<script>
(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;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->


This type of implementation has limitations such as:

  1. Developers are required to create, update, and maintain the analytics code on all pages.

  2. Developers are required to understand analytics tracking and have in-depth knowledge into the inner workings of Google Analytics.

  3. Additions, updates, or changes to analytics tracking requires a code change.

  4. Analytics and business experts are unable to make any updates to analytics tracking.

  5. Integrations with other digital marketing tags and data collection tools become complex with code additions and updates.

  6. QA can only be done on development or staging environments.

Concept of a DataLayer

To get around these limitations, you can use a dataLayer approach to implementing Google Analytics. A dataLayer exposes the required backend information in a standardized format needed for frontend analytics, where it is accessible by analytics libraries such as Google Analytics running on the site. This is typically done through a tag manager such as Google Tag Manager (GTM). One key advantage of a dataLayer is that it provides separation between the analytics data variables and the analytics tracking code itself.

For example, let's say you want to pass a "Site Region" parameter with every pageview event sent to Google Analytics. In the traditional hard-coded method of implementation, a developer would update the global pageview code (shown above) and directly append a custom dimension variable to it.


Site Region Custom Dimension
ga('send', 'pageview', {
  'dimension20':  'USA'
});


However, the "Site Region" parameter might not yet be easily accessible by JavaScript (JS). Therefore, the developer would first need to create a JS variable that determines which site region a visitor is currently on. Because this is a global piece of code on all pages of the website, the developer would also need to QA the entire site before releasing the code to production. Any further updates or changes to the site region variable would also need to be done by the developer.

However in a dataLayer model, all the required JS variables are maintained separately in a dataLayer object.


dataLayer example
dataLayer = [{
    'siteRegion': 'USA',
  }];


The analytics code would then be implemented in the tag management solution, such as Google Tag Manager. The dataLayer can then be maintained by the developers, and the analytics tags be maintained by the analytics experts.


To illustrate this:



For your SAP Commerce Cloud solution website, implementing your Google Analytics through Google Tag Manager and dataLayers is the recommended best practice. This provides a balance of ease of implementation and the ability to customize your analytics tracking to suit your needs.

For more documentation on the dataLayer, please visit the Google's Developer Guide, as well as look at our next article in this series.


Conclusion

In this article, you learned about the different web analytics types and approaches to implementing Google Analytics on your SAP Commerce Cloud solution website. Web analytics will continue to gain in importance as more and more activities move online. Having a solid data collection foundation through a properly implemented and maintained web analytics platform will be key to a successful SAP Commerce Cloud storefront. In the second part of this series, we will go into further detail on how to build a dataLayer structure with your SAP Commerce Cloud solution website to implement Google Analytics using Google Tag Manager.