Migrating to Enhanced E-Commerce in “5 Easy Steps”

If you are anything like me, you will have seen the fandangled new “enhanced” e-commerce reports that are starting to become available in Google Analytics accounts (N.B. – Universal web properties only) and thought “yes, I’ll have some of that”.

The reports allow for much deeper analysis of shopping behaviour – to understand things like influence of product impressions on conversion – as well as providing much anticipated refund and voucher/ affiliate code support.

Shopping behaviour funnel report

In the spirit of catchy blog titles, I’m describing five “easy” steps to setting this all up but, as we well know, things are never that straightforward! But with the steps outlined below you will be well on your way to using the new reports. It also has to be said that, at the time of writing, this feature is still in “beta”.

Step 1) Universal Analytics / Google Tag Manager / dataLayer

Okay, so this isn’t strictly the first step – it’s more of a prerequisite check to ensure your setup is as intended to align with the following steps.

You will need to be running Universal Analytics – inserted via Google Tag Manager – with the values for your existing e-commerce transactions being populated by values set in a dataLayer, according to the documentation for GTM and e-commerce. These steps detailed assume that you are already running things in this way and takes you through the process of migrating from this particular setup. As each setup is likely to be different, please check how this relates to you before stepping through the process.

Step 2) Enable “Enhanced Ecommerce Settings”

Enabling the reports is a simple matter of toggling a switch in the appropriate View:

Leave the options to label your funnel steps for now – these will depend on what code you can place on the site for particular steps in the funnel and will be populated with the default values of “Step 1”, “Step 2”, etc.

Enabling these reports hides the “old” style e-commerce reports and reveals the “enhanced” (beta) e-commerce reports in the left-hand navigation, under “Conversions”:

If you have already been collecting e-commerce data under this particular View, with the old style reports, then you will see that same data appear within the reports for Overview, Product Performance, and Sales Performance instead – with no values (yet) populated for things like refunds, and shopping behaviour:

Enhanced Ecommerce Report – Overview

Enhanced Ecommerce Report – Product Performance

Step 3) Switch out e-commerce transaction code

To be able to send additional data to Analytics about a particular action, like a transaction, the call to Analytics needs to use the new Universal data model and e-commerce tracking API. This means that there’s an entirely new way of sending data to Analytics – that relies on a plugin called ec.js. Google Tag Manager makes it straightforward to enable this part of things – it is a check box provided to send such “actions” alongside events or pageviews:

This effectively writes the following code – after the initialisation of the tracker object but before any e-commerce specific code:

ga('require','ec','ec.js');

Note that your existing Universal Analytics e-commerce code (that will rely on a plugin called ecommerce.js) will still work with the new reports but will not allow you to add any of the extra data now available to be added alongside transactions etc.If you send transactions to Analytics with the new ec.js methods, you should not be doing so with ecommerce.js as well as it will create duplicate transactions in the reports.

With the new model, you will be sending single “actions” (for impression data, product data, promotion data, and action data) to Analytics alongside pageviews or events. You will therefore need to remove the existing e-commerce transaction tag template in Google Tag Manager – that would previously have been using a dataLayer to populate the values for product items, revenue etc, and firing based on a rule for your thank-you page, for example.

When you enable the “Enhanced Ecommerce Features” in Google Tag Manager, a checkbox is available to “Use data layer”.

However, the syntax of the expected dataLayer values are completely different to the previous format required when implementing a tag with type of “transaction” in Google Tag Manager.

If you, like we have recommended for many of our clients, have recently migrated to Universal Analytics and Google Tag Manager – you will have added a dataLayer on your thank-you pages that is now no longer going to work with these new features when implementing with Google Tag Manager!

If you cannot update your dataLayer on the server-side, you will need to create a macro that “maps” the data from the previous dataLayer format into the new.

Here’s the code for such a macro that is retrieving just the required fields and mapping them into an object in the format required by Google Tag Manager (thanks to +PhilPearce and +AlWightman for various flavours of code that contributed towards this):

// A custom JavaScript macro that uses ecommerce dataLayer to return an ecommerceData object 
// in format required by enhanced ecommerce integration in GTM

function() {

  var eCommProducts = [];
  var transProducts = {{dataLayer.transactionProducts}};
  for (var i=0;i<transProducts.length;i++) { 
    eCommProducts.push({
      'id': transProducts[i].sku,
      'name': transProducts[i].name, 
      'price': transProducts[i].price,
      'quantity': transProducts[i].quantity
    });
  }
  
  var ecommerceData = {
    'ecommerce': {
        'currencyCode': {{dataLayer.transactionCurrency}},
        'purchase': {
            'actionField': {
                'id': {{dataLayer.transactionId}},
                'revenue': {{dataLayer.transactionTotal}}
            },
            'products': eCommProducts
        }
    }
  };

  return ecommerceData;
}

Note that this macro itself references other macros, used to retrieve specific dataLayer values. You will need to create these too. Hopefully it is obvious from the names used within the code what they should be!

In the debug console, you should see now the transaction data being sent as part of your pageview – instead of a separate transaction / item level hit:

Step 4) Add funnel steps, refunds etc

Here’s where things get interesting… Obviously this will depend on your exact setup but let’s look at adding Funnel Steps, as an example.

We will create another pageview tag, check the “use data layer” but have the pageview tag fire on the gtm.load event – so that we can run a little script before hand to create our required dataLayer (assuming we can’t create it server-side). And the script to run is a custom HTML tag that contains a piece of Javascript to push to the dataLayer the appropriate values (in this case just a number for the funnel step – which is actually determined by a Lookup Table macro that uses URL path):

And then look out for this in the debug console:

Now go back and add the labels for these steps.

This is the simplest example I could think of to demonstrate how to send data alongside a pageview / event call to Analytics, within Google Tag Manager. I’m imagining all sorts of uses and implementations – please don’t take anything in this step as prescriptive. It is merely intended as an example to get you thinking.

Step 5) Start using reports

Need I say more? Start using these fancy new reports to better understand how your users are behaving for the complete e-commerce purchase cycle – and help your clients sell more stuff 🙂

I’d love to hear your feedback on how you are finding implementing the new enhanced e-commerce code and reports. Add your comments below!