Portrait von Stefan Wanzenried
Stefan Wanzenried
Software Engineer @Gridonic
Mar 1, 2019 12 min read

Google Analytics Enhanced Ecommerce for Drupal Commerce

We can leverage Google Analytics to get basic insights how products perform on a Drupal Commerce webshop. Based on the number of pageviews, the reports in Google Analytics show how many times a product has been viewed, how many times the checkout has been initiated or completed. Not bad, but we can do better! Google Analytics offers a plugin called Enhanced Ecommerce, tracking additional data related to e-commerce, such as product views, cart additions and removals, the checkout process and purchases. Compared to the traditional reports based on pageviews, reports from the enhanced ecommerce data allow us to really understand a user’s shopping behaviour: How many sessions had product views? How many users added products to the cart? How many of them initiated checkout, and how many abandoned checkout at which step?

The shopping behaviour report shows how many sessions had cart additions.
Example of the "Shopping Behaviour" report in Google Analytics: It shows how many session had product views, cart additions, checkouts and purchases.

In this blog post we are going to look how to integrate Enhanced Ecommerce in a Drupal Commerce 2 project. The integration is possible thanks to the Commerce Google Tag Manager module. In a nutshell, this module automatically sends e-commerce data from Drupal Commerce to Google Analytics via Google Tag Manager (GTM). The first part of this blog post explains the module’s tracking features while the second part focuses on advanced topics such as using the module’s event tracker service to customize the data sent to Google Analytics. Let’s get started! 😄

Why use Enhanced Ecommerce

Enhanced Ecommerce tracks a user during his whole journey on your shop website, from entering a page, viewing products, going through the checkout process until the purchase. The generated reports help you to identify problems with your shop:

  • Lots of product views but no cart additions? Maybe there is an accessibility problem with the Add to Cart button on mobile.
  • Most users abandon checkout at the payment step? Maybe you should offer additional payment methods.
  • Is a product with a poor Cart-to-Detail Rate still worth for your business to be sold?

Furthermore, Enhanced Ecommerce offers advanced conversion tracking possibilities in Google Analtyics. Traditionally, you would probably setup destination based goals to tack e-commerce conversions, e.g. a purchase is tracked when the user visits the order confirmation page. Using Enhanced Ecommerce, these goals can be setup based on events. For example, the conversion „User adds a product to the cart“ can be reached with a goal that listens on the „Add To Cart“ event.

What about other reporting solutions? The Drupal Commerce Reporting module is still beta and offers a limited set of reports compared to its 7.x version. That said, there is no harm in using both modules. The Drupal module has the advantage of having access to the raw data in the database - the reports will be more detailed and accurate, also because the user cannot block the tracking with an AdBlocker. On the other hand, Drupal does not know how the user interacts with the shop or the products before buying them.

The Commerce Google Tag Manager module

The module implements the Enhanced Ecommerce plugin by using the data layer of GTM. It records the user’s activity in Commerce (product view, add to cart, checkout etc.) and stores relevant data server-side. This data is then fetched and submitted to Google Analytics on the next page request. Example: The user adds a product to the cart and gets redirected to the product page. This page fetches the recorded addToCart event data via ajax and pushes it on the GTM data layer. Finally, the data is passed from GTM to Google Analytics. That’s it! Now we can study and evaluate shiny e-commerce reports in Google Analytics, or even craft our own custom reports by aggregating and segmenting the available data in a different way. 👌

Requirements and Installation

  • The module depends on the Google Tag Manager module and the obvious Commerce module.
  • Google Analytics must be deployed with GTM, you should not be using a Google Analytics standalone tracking code.

Please follow the official documentation on how to configure Google Analtycis and GTM. Many thanks to Kevin Wenger who contributed the excellent documentation!

Features

The module automatically tracks and sends the following Enhanced Ecommerce events:

  • Views of product details when viewing a Commerce product entity
  • Additions and Removals to the cart
  • Checkout with the possibility to track checkout options
  • Purchases including shipping information and coupon usage

Let us explore each of these events in more detail in the next sections.

Product Detail Views

This event measures how often a product is viewed in detail. In Drupal Commerce, this is typically the case when a user is viewing a Commerce product. The module automatically detects this and sends the following data to Google Analytics:

  • Name: Title of the Commerce product entity
  • ID: The internal, unique ID of the product entity
  • Variant: The title of the default product variation
  • Price: The price of the default product variation

The above mapping of the fields from a Commerce product to a product represented in Enhanced Ecommerce is not fixed, you might change the mapping according to your needs. It is also possible to enhance the product data with additional information such as the product’s brand or category. Please check out the Product Data Mapping section on how to customize product data.

Example data pushed on the GTM data layer:

'event': 'productDetailViews',
'ecommerce': {
  'detail': {
    'products': [{
      'name': 'Drupal Commerce T-Shirt',
      'id': '12345',
      'price': '15.25',
      'variant': 'Drupal Commerce T-Shirt Medium'
     }]
   }
}

In Google Analytics, the product detail views can be found under Conversions > Ecommerce > Product Performance > Shopping Behaviour.

The product detail views in Google Analytics shows how many times a product has been viewed.

Cart Additions and Removals

As the name implies, this event is emitted whenever the user adds or removes products to/from the cart.

Example data for the addToCart event in the data layer:

'event': 'addToCart',
'ecommerce': {
  'currencyCode': 'CHF',
  'add': {
    'products': [{
      'name': 'Drupal Commerce T-Shirt',
      'id': '12345',
      'price': '15.25',
      'variant': 'Drupal Commerce T-Shirt Medium',
      'quantity': 1
     }]
  }
}

Several interesting reports in Google Analytics make use of the cart event data:

  • Conversions > Ecommerce > Shopping Behaviour shows how many sessions had cart additions.
  • Conversions > Ecommerce > Product Performance shows the cart additions and removals of each product. It also calculates a Cart-to-Detail Rate, corresponding to the product's cart additions divided by the views of product details.
The shopping behaviour report shows how many sessions had cart additions.

Checkout Tracking

This event tracks the user during the checkout. Each checkout step gets numbered from 0 to n and is tracked individually together with the products in the cart.

Example data:

'event': 'checkout',
'ecommerce': {
  'checkout': {
    'actionField': { 'step': 1 },
    'products': [{
      'name': 'Drupal Commerce T-Shirt',
      'id': '12345',
      'price': '15.25',
      'variant': 'Drupal Commerce T-Shirt Medium',
      'quantity': 1
     }]
  }
}

Enhanced Ecommerce also offers the possiblity to track checkout options.

The checkout option is useful in cases where you've already measured a checkout step but you want to capture additional information about the same checkout step. For example, the shipping method selected by a user.

The module does not track any checkout option out of the box. However, it offers an extension point so that developers can implement checkout options easily (see Tracking Checkout Options).

An interesting report in Google Analytics is the Checkout Behaviour report. It shows the number of abandonments at each step. This report might help you to identify strengths and weaknesses of the checkout funnel.

The checkout behaviour report shows the number of checkout abandonments at each step.

Purchases

Last but not least, the module tracks purchases. Data being sent to Google Analytics includes:

  • The order number
  • The total price of the order
  • Shipping costs, if Commerce Shipping is installed
  • Information about the bought products
  • Promotion coupon codes used for the order
  • Name of the store (interesting if your Commerce setup includes multiple stores)

Example data:

'event': 'purchase',
'ecommerce': {
  'purchase': {
    'actionField': [{
      'id': '123',
      'affiliation': 'Drupal Shop',
      'revenue': '18.00',
      'shipping': '2.75',
      'coupon': '',
     }],
  'products': [{ ... }]
  }
}

This data is used by Google Analytics in several reports. The Product Performance report for example shows a product’s total revenue, unique purchases, average quantity and price. The Sales Performance report lists each transaction with revenue, shipping and quantity.

Advanced Usage

The module does currently not offer any configuration options. However, it provides services and hooks for developers to track additional data or change event data before being sent to Google Analytics. If you are a developer, read on! 😄

Product Data Mapping

As pointed out in the section about the Product Detail View event, it is possible to customize how a Commerce product is mapped to a product in Enhanced Ecommerce. The module fires the commerce_google_tag_manager.alter_product event whenever it builds the product data from a given Commerce product variation. Here is an example of an event listener which modifies the Enhanced Ecommerce product with a custom ID and name.

Tracking Checkout Options

Checkout options enhance the checkout tracking with additional information such as the chosen shipping profile or payment method. The module fires the commerce_google_tag_manager.track_checkout_step event whenever a checkout step is tracked. Developers may listen to this event and use the commerce_google_tag_manager.event_tracker service to track a checkout option. The following example event listener creates a checkout option for the first checkout step which indicates if the checkout was being initiated as anonymous or authenticated user.

Note: This event listener could be improved by using dependency injection of the services instead of accessing them via Drupal::service.

Alter Event Data

The module offers the commerce_gtm_enhanced_ecommerce.alter_event_data event to alter any Enhanced Ecommerce data before it gets stored and sent to Google Analytics by the next page request. At this point, the data has already been converted to a plain PHP array. Altering therefore requires some knowledge about the internal array structure.

Consider the following example: We need to submit the shipping costs with the purchase event. Because the shipping cost is a constant, we do not use the Commerce Shipping module to handle shipping for us. However, the module only includes shipping costs if Commerce Shipping is active. In this case, we use an event listener to modify the purchase event data:

Known Problems

Here are some issues you should be aware of when using the module and Enhanced Ecommerce in general:

  • Users might block the Enhanced Ecommerce tracking by using a blocker software. Actually there is nothing we can do about this, and that is okay. Be aware that the Google Analytics reports might miss some data, never see them as the absolute truth.
  • When using an offsite payment gateway, the user usually gets redirected to the payment gateways’s website. After the payment, the user gets redirected back to the shop’s confirmation page. If the payment gateway does not perform this redirect or the user closes the browser window before the redirect is completed, the module fails to send the purchase request.

Community and Contributions

At the time we (urgently) needed the Enhanced Ecommerce tracking for a client project, the Commerce Google Tag Manager module did not exist for Drupal 8, only for Drupal 7. Given the fact that the Drupal 8 architecture differs largely from Drupal 7, we decided to write a new module from scratch. This module was initially released by Gridonic on GitHub under a different name, because we were not sure if it could be merged with the existing Commerce Google Tag Manager module. It turned out to be a no-brainer: The current maintainer of the 7.x version (parisek) welcomed the contribution and gave us access to the Drupal git repository very quickly. At the same time, Kevin Wenger joined the developer team. Kevin is a Drupal core contributor and very experienced in writing tests for Drupal modules. Thanks to Kevin, the module’s test coverage is nearly complete, including Unit, Kernel and Functional tests. He also integrated CI for Travis and Drupal Jenkins. 🎉

If you are interested to contribute to the module, please check out our developing guidelines. We prefer to collaborate on GitHub using Pull-Requests, but you might also send old-fashioned patches via Drupal issues. Wanna start now? Grab an open GitHub issue and submit your pull request.😀

Future of the Module

The module is currently released as alpha-1 and can be improved in many ways. Here are some ideas:

  • All supported tracking features are enabled by default. It would be preferable to activate or deactivate each feature separately via configuration interface.
  • Enhanced Ecommerce offers to track product impressions. This feature could be nicely mapped to Drupal Views showing product teasers. The configuration could offer to select the Views where the module should automatically track impressions. Note that it is already possible to implement this by hooking into the view rendering process and using the module’s event tracker service to track the impressions.
  • Enhanced Ecommerce is able to track refunds. The module could be extended to support this feature for any payment gateway offering to refund payments.

Do you have other ideas how to improve the module or did you find a bug? Do not hesitate to open an issue at the GitHub Repository or on the Drupal Project Page. Like to chat? The module has its own dedicated #commerce-gtm channel in Drupal Slack. Hear you soon!