Introduction
Business Purpose
Google Analytics is one of the most popular web analytics services (SaaS).
This concept describes how an ICM storefront could be integrated with Google Universal Analytics Enhanced Ecommerce features using Google Tag Manager.
Enhanced Ecommerce allows sites to segment their shopping behavior in a more granular way and performs analysis on:
- Shopping Behavior
- Checkout Behavior
- Product Performance
- Sales Performance
- Customer Segments
This information helps marketing specialists to take actions to maximize marketing effect and increase sales by focusing on the most profitable products and customer segments.
Google Analytics also allows to define goals and measure conversion rates or show progression through the checkout process, which allows to understand if there are problems with storefront usability that prevent users from completing an order.
Glossary
| Term | Description |
|---|---|
| Google Analytics | Web Analytics Service offered by Google that tracks and reports website usage. Google Analytics users can review online campaigns by tracking landing page quality and conversions (goals). Goals might include sales, lead generation, viewing a specific page, etc. Collected tracking data are represented in high level dashboard views and in-depth report sets. |
| Google Tag Manager (GTM) | Tag management system created by Google to manage JavaScript and HTML tags used for tracking and analytics on websites. Simplifies integration and maintenance of such tracking and analytics tools inside websites. |
| Enhanced Ecommerce | Google Universal Analytics Enhanced Ecommerce features enables to measure e-commerce activities like product impressions and clicks, promotion impressions and clicks, addition/removal of products to/from shopping basket, checkout steps and purchases. |
| Google Tag Manager Container Code Snippet | A JavaScript code snippet that needs to be integrated into the storefront HTML to initialize the integration with Google Tag Manager. |
| Data Layer | A JavaScript object, used within the storefront to add e-commerce event data (e.g., add product to cart) that is then transferred to Google Tag Manager. |
References
- Concept - WebAnalytics
- Cookbook - WebAnalytics
- Cookbook - Universal Analytics
- Concept - Business Tracking Framework
- Google Enhanced Ecommerce Guide
Business Overview
The following table summarizes the participants and steps for Google Analytics integration and usage.
| Process Participant | Description |
|---|---|
| Buyers interact with the ICM storefront - browse the products catalog, add products to the basket, perform checkout etc. |
 | ICM renders the corresponding storefront page template, containing the Google Tag Manager Container script snippet. This snippet initializes the dataLayer JS object, used to transfer e-commerce event data to Google Tag Manager. Whenever the buyer triggers an e-commerve event (view product, add product to basket, etc.), ICM pushes details about the e-commerce event into the dataLayer using the specified JSON data format. "ecommerce":
"add": {
"products": [
{
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}
]
},
"currencyCode": "USD"
},
"event": "addToCart"
|
<dataLayer> | The dataLayer converts the data and delivers it to a pre-configured container for the webshop in Google Tag Manager. |
| A pre-configured Google Analytics tag is fired in Google Tag Manager and transfers e-commerce event data to a pre-configured Google Analytics account for the webshop. |
| Google Analytics stores the e-commerce event data and provides reporting functionality. |
| Marketing specialists on the webshop owner side analyze the data from Google Analytics reports.
|
Technical Overview
The integration of Google Analytics is done with the help of Google Tag Manager, which is enabled by GoogleTagManagerService, located in f_business/a_storefront/ac_gtm cartridge.
The GoogleTagManagerService is implemented as a managed service based on the Business Tracking Framework.
The business tracking can be integrated into the storefront via interface TrackingSFI.
The Google Tag Manager Service integration uses this mechanism to integrate Google Tag Manager into the storefront.
Cartridge Structure
The following cartridges support the integration with Google Tag Manager:
Component Set | Cartridge | Description |
|---|---|---|
f_business/a_storefront | ac_gtm | Contains the GoogleTagManager managed service, tracking event handlers and corresponding container classes. |
f_business/a_storefront | ac_gtm_google_analytics | Adds the event handling which is relevant for the Enhanced Ecommerce plugin of Google Analytics. Defines the mapping between e-commerce events and corresponding ISML templates, containing the Enhanced Ecommerce tracking code for GTM. |
f_business/a_storefront | ac_gtm_sf | Contains the ISML templates, that render snippets which push JSON into the GTM data layer. These snippets are specific for the responsive storefront. |
f_business/f_checkout | bc_marketing | Contains tracking events and tracking data objects which are generated from events model stored as a XSD file, located in staticfiles/definition/tracking/v1_0/tracking.xsd. Fire*Event pipelets are also located in this cartridge. |
f_business/a_storefront | sld_ch_sf_base | Contains the FireTrackingEvents pipeline, holding the logic for creating and handling the tracking events. |
Tracking Events
Certain events from the Business Tracking Framework are distributed to the GoogleTagManagerService that creates code snippets with a given data structure (dataLayer JSON) to be included in the page source code.
The following diagram displays the events that are currently supported for Google Enhanced Ecommerce features integration.
Fire Tracking Events
FireTrackingEvents pipeline start nodes should be used whenever a certain tracking event must be fired at runtime.
The pipeline encapsulates the logic for creating the tracking event object from the input values, handling the event over to TrackingMgr and putting the returned tracking data container to the pipeline dictionary.
Fire tracking event directly in ISML template:
<ispipeline pipeline="FireTrackingEvents-ViewProductList" alias="dict" params="#ParamMap( ParamEntry('ProductList', ProductBOs), ParamEntry('CurrentSession', CurrentSession), ParamEntry('CurrentUser', CurrentUser), ParamEntry('CurrentRequest', CurrentRequest), ParamEntry('PageName', 'CartRecommendations'), ParamEntry('PageType', 'CartRecommendations'))#" />
Fire tracking event in other pipeline:
Tracking Data Objects
Tracking events and tracking data objects are defined in XSD and automatically generated as JAXB objects. They just hold the required tracking data in independent format. Example: TrackingProduct, TrackingOrder.
Tracking Event Handlers
Tracking Event Handlers process the tracking events and create data containers with the required data for the concrete Web Analytics tool data. The main method is handleEvent in which the data container is created and filled with required data.
Handlers use ObjectMappers to map from the tracking data objects in the TrackingEvent into the corresponding format for the concrete Web Analytics tool data objects. They could also access BO layer to retrieve required data that are not available in the TrackingEvent. Each concrete subclass of AbstractGoogleTagManagerEventHandler works with concrete type of TrackingEvent, i.e., OrderPlacedEvent.
Tracking Data Containers
Tracking Data Containers contain the data required by the concrete web analytics tool for a specific tracking event. The diagram below shows containers used for Google Analytics integration.
Storefront Integration
This section describes the integration of the Google Tag Manager into the ICM responsive storefront demo application.
For all e-commerce activities on certain parts of the webshop, storefront page template placeholders are included for the tracking tool code, using the IncludeTrackingTool ISML module, located in the bc_marketing cartridge. The logical name of the e-commerce event or related tracking code snippet is specified in the template attribute of the module. Internally, this module finds the registered managed services of the application for tracking that implements the TrackingSFI interface. If the service has a specific tracking code for the specified e-commerce activity, the corresponding ISML template is included. The template renders the specific code snippet for the concrete Web Analytics tool using the prepared data available in the tracking data container.
The following picture provides an overview of the storefront integration for Google Tag Manager tracking code for Enhanced Ecommerce activity, measuring views of product detail:
The following table lists the webshop storefrent pages and ISML templates in which the IncludeTrackingTool ISML module is used:
Page | Cartridge | SF ISML | Activity Name | GTM ISML |
|---|---|---|---|---|
All | app_sf_responsive | DefaultPageStructure.isml | MainFrameBodyStart | MainFrameBodyStart.isml |
Wishlist | app_sf_responsive | Wishlist.isml | ViewWishList | ViewProductList.isml |
Recommendations | app_sf_responsive | ProductList.isml | RecommendationsTracking | RecommendedProductData.isml |
Product Detail | app_sf_responsive_cm | ProductDetail.isml | ViewProductDetail | MeasureProductDetail.isml |
Shopping Cart | app_sf_responsive_cm | Cart.isml EmptyCart.isml | BasketChangeAdd BasketChangeRemove BasketChangeQuantities BasketChangeVariations | BasketChangeAdd.isml BasketChangeRemove.isml BasketChangeQuantities.isml BasketChangeVariations.isml |
Checkout | app_sf_responsive | HeaderProgressBar.isml | CheckoutCart | Checkout.isml |
Receipt | app_sf_responsive | CheckoutReceipt.isml | OrderPlaced | OrderPlaced.isml |
Data Layer Code
Whenever a given tracking event is fired, the corresponding handlers should process the data and render the corresponding dataLayer JSON snippet, required by Google Tag Manager.
The following table provides the mapping of tracking events to the corresponding Google Enhanced Ecommerce activities, as well as samples with the expected dataLayer JSON format for each event:
Tracking Event class | Google Enhanced Ecommerce Activity | Sample dataLayer JSON |
|---|---|---|
ViewProductEvent | {
"ecommerce": {
"detail": {
"actionField": {
"list": "Product Detail"
},
"products": [{
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
}
},
"event": "impressionsPushed"
}
| |
ViewProductListEvent, ProductSearchEvent The ProductSearchEvent also triggers a ViewProductListEvent, ProductSearchEvent is available from 7.10.26-LTS / 7.10.29 | {
"ecommerce": {
"impressions": [{
"price": "107.06",
"name": "A-DATA XPG Gaming Series V2.0, DDR3, 1600 MHz, CL9, 12GB (4GB x 3)",
"variant": "",
"id": "7006513",
"category": "Computers/106/911",
"list": "CartRecommendations",
"brand": "A-DATA"
}, {
"price": "17.17",
"name": "Benq MD300",
"variant": "",
"id": "1612143",
"category": "Computers/191/195",
"list": "CartRecommendations",
"brand": "Benq"
}, {
"price": "29.64",
"name": "Creative Labs Live! Cam Video IM",
"variant": "",
"id": "1664866",
"category": "Cameras-Camcorders/577",
"list": "CartRecommendations",
"brand": "Creative Labs"
}],
"currencyCode": "USD"
}
}
{
'productSearchEvent': {
'currencyCode': 'USD',
'searchTearm': 'Benq',
'pageSize': '8',
'currentPage': '2'
}
}
| |
BasketAddProductEvent | {
"ecommerce": {
"add": {
"products": [{
"quantity": "1",
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
},
"currencyCode": "USD"
},
"event": "addToCart"
}
| |
BasketRemoveProductEvent | {
"ecommerce": {
"remove": {
"products": [{
"quantity": "1",
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
},
"currencyCode": "USD"
},
"event": "removeFromCart"
}
| |
BasketChangeQuantitiesEvent | Increase quantity {
"ecommerce": {
"add": {
"products": [{
"quantity": "2",
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
},
"currencyCode": "USD"
},
"event": "addToCart"
}
Decrease quantity {
"ecommerce": {
"remove": {
"products": [{
"quantity": "2",
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
},
"currencyCode": "USD"
},
"event": "removeFromCart"
}
| |
BasketChangeVariationEvent | {
"ecommerce": {
"add": {
"products": [{
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
},
"currencyCode": "USD"
},
"event": "addToCart"
},
{
"ecommerce": {
"currencyCode": "USD",
"remove": {
"products": [{
"quantity": "1",
"price": "115.81",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Blue",
"id": "3934158",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
}
},
"event": "removeFromCart"
}
| |
ViewCheckoutEvent | Checkout Step 1 (Addresses) e-commerce activity: {
"ecommerce": {
"checkout": {
"actionField": {
"step": "1"
},
"products": [{
"quantity": "1",
"price": "21.15",
"name": "LaCie 130902",
"variant": "",
"id": "3115300",
"category": "Computers/206/298",
"brand": "LaCie"
}, {
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
}
},
"event": "checkout"
}
Checkout Step 2 (Shipping) e-commerce activity: {
"ecommerce": {
"checkout": {
"actionField": {
"step": "2",
"option": "Standard Ground"
},
"products": [{
"quantity": "1",
"price": "21.15",
"name": "LaCie 130902",
"variant": "",
"id": "3115300",
"category": "Computers/206/298",
"brand": "LaCie"
}, {
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
}
},
"event": "checkout"
}
Checkout Step 3 (Payment) e-commerce activity: {
"ecommerce": {
"checkout": {
"actionField": {
"step": "3",
"option": "Cash on Delivery"
}
"products": [{
"quantity": "1",
"price": "21.15",
"name": "LaCie 130902",
"variant": "",
"id": "3115300",
"category": "Computers/206/298",
"brand": "LaCie"
}, {
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}]
}
},
"event": "checkout"
}
| |
OrderPlacedEvent | {
"ecommerce": {
"purchase": {
"actionField": {
"revenue": "133.9",
"shipping": "3.02",
"coupon": "",
"affiliation": "",
"step": 5,
"tax": "21.38",
"id": "00000202"
},
"products": [{
"quantity": "1",
"price": "116.07",
"name": "A-DATA CH94 Portable 500GB",
"variant": "Hard_disk_drive_capacity: 500 GB, Colour_of_product: Pink",
"id": "3950792",
"category": "Computers/206/219",
"brand": "A-DATA"
}, {
"quantity": "1",
"price": "21.15",
"name": "LaCie 130902",
"variant": "",
"id": "3115300",
"category": "Computers/206/298",
"brand": "LaCie"
}]
}
}
}
|
Known Limitations
Enhanced Ecommerce refund activity (full or partial refund of an order) is currently not supported.
The Google Tag Manager does not support multiple domains. Each domain requires to have its own account and container.
It is recommended to activate
GoogleTagManagerServiceat application level, so it is possible to track the usage of the different applications (web, mobile, etc.) of a customer channel in Google Analytics.Free Google Analytics service has a limit of ten million tracking hits per month. If your needs exceed this limitation then a Google Analytics premium account must be purchased.
In case your account sends a large number of tracking hits per day (more than 200.000), updates of Google Analytics reports and metrics could be delayed (up to two days).