GTM ecommerce implementation

Github logo Edit on GitHub

Development steps to implement ecommerce events in your application

Introduction

This chapter illustrates how to implement ecommerce tracking events. Note that this is a customized way, so not exactly following the official documentation.

Google documentation

The official doucumentation is to be found here: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

The ecommerce steps that GA is designed with

There is a specific line of thinking when it comes to working with ecommerce interactions. There are products (=items) that are presented in lists or solitary, these can be added to a basket (aka cart). When this process is finished, the basket with the set of products can be brought to the checkout These steps are nessesary to register the transaction. Think of:

  • personal data around the buyer (name, phone, address etc)
  • shipping address in case physical products are send
  • payment details (payment type, card nr. etc) When sticking to the standard ecommerce events, the ecommerce process is nicely analyzed out of the box in Google Analytics. All customizations to this process are invisible, unless they are used in custom reports etc.

The default process

There is a logic in the actions of shopping. First the products are offered and shown, we the potential buyer picks what (s)he wants to buy. After collecting the goods, there needs to be some compensation in the form of money, voucher or anything related to movable energy. After passing this barrier, the purchase is completed. Of course there is a chance that the sale needs be reversed in which case everything is undone.

  1. product lists and details
  2. promotions
  3. shopping cart interactions
  4. checkout funnel
  5. purchase and refunds

The javascript structure for ecommerce events

The ecommerce events have specificly named stages and accompanying event names. The coding structure of these events is:

dataLayer.push({
  event: '# name of the ecommerce event/stage #',
  ecommerce: {
    // the JSON object
    meta-variable-a: '# variable specifically for the type of event  #',
    meta-variable-b: '# variable specifically for the type of event  #',
    items: [
    // array with list of products (can also be just 1)
    {
      item-1-characteristic-a: '#value#',
      item-1-characteristic-b: '#value#'
    },
    {
      item-2-characteristic-a: '#value#',
      item-2-characteristic-b: '#value#'
    }
    ]
  }
});

In order to fix a design flaw of the GTM datalayer and event structure, it is a good habit to clear/erase the ecommerce object in the dataLayer. This is done every time prior to pushing new values to the ecommerce-object.

dataLayer.push({ ecommerce: null });

Product lists and details

Not yet described

Shopping cart interactions

The shopping cart or basket interactions are adding or removing products (items) to the cart and maybe viewing the actual contents of the cart.

  1. add to cart
  2. remove from cart
  3. view cart

1. add item(s) to the cart

When a product is added to the cart, the event 'add_to_cart' needs to be pushed to the dataLayer. Note that the calculation of value is done by the application (so the developer) and is calculated as the item prices times the quantity, minus any reduction or discount.

dataLayer.push({ ecommerce: null });


dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 8.88,
    items: [
    {
      item_id: '11001',
      item_name: 'Big Tasty Voordeelmenu',
      item_category: 'menu',
      item_variant: 'medium', // menusize: small, medium, large, obese
      item_variant2: 'salad', // instead of fries
      item_variant3: 'water', // instead of sugardrink
      price: 7.99,
      quantity: 1
    },
    {
      item_id: '123',
      item_name: 'ketchup',
      item_category: 'extras',
      price: 0.89,
      quantity: 1
    }
    ]
  }
});

2. remove item(s) from the cart

When a product is removed from the cart, the event 'remove_from_cart' needs to be pushed to the dataLayer. 

dataLayer.push({ ecommerce: null });


dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    items: [
    {
      item_id: '123',
      item_name: 'ketchup',
      item_category: 'extras',
      price: 0.89,
      quantity: 1
    }
    ]
  }
});

3. view the contents of the cart

When the contents of the cart is viewed, the event 'view_cart' needs to be pushed to the dataLayer.

dataLayer.push({ ecommerce: null });


dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 8.88,
    items: [
    {
      item_id: '11001',
      item_name: 'Big Tasty Voordeelmenu',
      item_category: 'menu',
      item_variant: 'medium', // menusize: small, medium, large, obese
      item_variant2: 'salad', // instead of fries
      item_variant3: 'water', // instead of sugardrink
      price: 7.99,
      quantity: 1
    },
    {
      item_id: '122',
      item_name: 'mayonaise',
      item_category: 'extras',
      price: 0.89,
      quantity: 1
    }
    ]
  }
});

Wishlist action

The wishlist is just a simple shopping list with product(s) that needs to remembered. There are no default events for removing items from the wishlist or viewing the contents of this list. It just adding stuff that will haunt the user 'till the end of days.

1. add to wishlist

dataLayer.push({ ecommerce: null });


dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    items: [
    {
      item_id: '',
      item_name: '',
      item_category: '',
      item_variant: '',
      price: 0,
      quantity: 1
    }
    ]
  }
});

Checkout funnel

Not yet described

Purchase and refunds

The purchase event completes the process and can only been undone by submitting a 'refund' event.

  1. purchase event
  2. refund event

1. Purchase the items in the cart

When the process of checkout-lane is done and the buyer is ready to confirm, the 'purchase'-event is triggered. In this example, the price is set to '0' and a seperate (custom) measure 'points' is introduced. With this hybrid solution, it becomes possible to pay with money or with saved/collected value points. Also a combination would fit.

dataLayer.push({ ecommerce: null });


dataLayer.push({
  event: 'purchase',
  ecommerce: {
      transaction_id: 'T12345',
      affiliation: 'Reward Shop',
      currency: 'EUR',
      value: 0,
      total_points: 700,
      items: [
       {
        item_id: 'SKU_12345',
        item_name: 'mcd_sokken',
        item_brand: 'McD',
        item_category: 'Apparel',
        item_variant: 'green',
        price: 0,
        points: 500,
        quantity: 1
      },
      {
        item_id: 'SKU_12346',
        item_name: 'mcd_muts',
        item_brand: 'McD',
        item_category: 'Apparel',
        item_variant: 'black',
        price: 0,
        points: 200,
        quantity: 1
      }]
  }
});

2. Refund one or more items

When the purchase is concluded, the buyer can undo the process. This is called a refund. The entrire purchase (all items) can be refunded or just one prduct.

Refund event is not yet described

Previous
GTM event implementation
Next
GTM setup