Enhanced Ecommerce

This module captures GTM Enhanced Ecommerce events and turns them into Miso user interactions automatically.

Basic Usage

For example, if you start ecommerce tracking with default settings:

const client = new MisoClient('...');

client.gtm.ecommerce.start();

A push of such event to dataLayer:

window.dataLayer.push({
  ecommerce: {
    add: {
      actionField: { /*...*/ },
      products: [
        {
          id: 'a001',
          quantity: 3
          //...
        },
        {
          id: 'a002',
          quantity: 4
          //...
        }
      ]
    }
  }
});

Will result in this interaction sent to Miso API:

client.api.interactions.upload({
  type: 'add_to_cart',
  product_ids: ['a001', 'a002'],
  quantities: [3, 4]
});

Default mapping

Ecommerce Event Key	Miso Interaction Type	Payload Properties
`detail`	`product_detail_page_view`	product IDs
`add`	`add_to_cart`	product IDs, quantities
`remove`	`remove_from_cart`	product IDs
`purchase`	`checkout`	product IDs, quantities, revenue (if available)
(anything else)	`custom`	custom action name (using event key)

Select events to track

You can specify a set of events to track inclusively:

client.gtm.ecommerce
  .accept('add', 'remove')
  .start();

Or exclusively:

client.gtm.ecommerce
  .accept('*', '-checkout')
  .start();

Custom event mapping

You can customize how events are mapped to Miso's interaction payloads:

client.gtm.ecommerce
  .mapping((eventKey, eventData) => {
    if (eventKey === 'add') {
      // some custom handling...
      return [
        {
          type: 'add_to_cart',
          product_ids: [/* ...*/],
          quantities: [/* ...*/],
        }
      ];
    }
    // fallback to default mapping
    return client.gtm.ecommerce.helper.defaultMapping(eventKey, eventData);
  })
  .start();

Stop tracking

Tracking can be stopped and resumed anytime:

client.gtm.ecommerce.stop();

client.gtm.ecommerce.start();