Enhanced Ecommerce

View Demo →

Overview

The Enhanced Ecommerce Demo Store is a sample ecommerce application with a complete implementation of Enhanced Ecommerce. Use this demo to understand how the Enhanced Ecommerce code works, and what is required to implement it on your own site.

A screenshot from the Enhanced Ecommerce demo.

Every action in this demo comes with code samples showing exactly how the feature is implemented. The samples include code for both Google Tag Manager and the Enhanced Ecommerce (ec.js) plugin for analytics.js.

Here's an example "Add to cart" code snippet for GTM:

// The GTM code.
dataLayer.push({
  "event": "addToCart",
  "ecommerce": {
    "currencyCode": "USD",
    "add": {
      "products": [{
        "id": "57b9d",
        "name": "Kiosk T-Shirt",
        "price": "55.00",
        "brand": "Kiosk",
        "category": "T-Shirts",
        "variant": "red",
        "dimension1": "M",
        "quantity": 1
      }]
    }
  }
});

And the corresponding ec.js version:

// The ec.js code.
ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
  "id": "57b9d",
  "name": "Kiosk T-Shirt",
  "price": "55.00",
  "brand": "Kiosk",
  "category": "T-Shirts",
  "variant": "red",
  "dimension1": "M",
  "quantity": 1
});
ga("ec:setAction", "add");
ga("send", "event", "detail view", "click", "addToCart");

The demo doesn't just show samples, it's actually sending real data to Google Analytics. If you'd like to inspect the hits, just open up the developer tools or use the Google Analytics Debugger to see what's going on.