Zuppler Events Tracking via Google Tag Manager

This guide assumes that you have already integrated GTM tag on the page:

<script async src="https://www.googletagmanager.com/gtag/js?id=#######"></script>

zuppler-gtm.js

window.dataLayer = window.dataLayer || [];

function initZupplerBridge(api) {
  api.addIntegrationStateListener(onIntegrationChanged)
  return Promise.resolve(true)
}

function onIntegrationChanged(type, params) {
  event = "ordering:" + type;

  if(type == 'portal' || type == 'order:cart' || type == 'dashboard') {
    dataLayer.push({ event: event, data:{} })
  }
  if(type == 'order') {
    dataLayer.push({ event: event, data:{remoteId: params.remoteId, name: params.restaurant.name} })
  }
  if(type == 'item:view') {
    dataLayer.push({ event: event, data:{name: params.name, id: params.id} })
  }
  if(type == 'item:added') {
    dataLayer.push({ event: event, data:{name: params.name, id: params.dish_id, price: params.price, quantity: params.quantity} })
  }
  if(type == 'order:payment') {
    dataLayer.push({ event: event, data:{type: params.type} })
  }
  if(type == 'order-receipt') {
    dataLayer.push({ event: event, data:{orderId: params.orderId, total: params.details.totals.total} })

    try {
      measurePurchase(params.details)
    } catch {
      console.warn("Can't measure purchase")
    }
  }
}

function measurePurchase(order) {
  // https://developers.google.com/tag-manager/enhanced-ecommerce#purchases
  purchase = {
    actionField: {
      id: order.uuid, 
      affiliation: 'Online Store',
      revenue: order.totals.total / 100,
      tax:order.totals.tax / 100,
      service: order.totals.service / 100
    },
    products: order.carts.items.map(function(item) {
      return {
        name: item.name,
        id: item.id,
        price: item.item_total / 100,
        quantity: item.quantity,
        category: item.category,
      }
    })
  }

  console.log("Measure Purchase", purchase)
  dataLayer.push({ 
    ecommerce: { 
      purchase: purchase
    }
  });
}

Important note

The initZupplerBridge function must be declared in a single place. So, if you already have this function declared somewhere else, integrate the tracker with the existing code and don't duplicate this function.

Method 1

Add the script on the integration page, before the 2 scripts that initialize Zuppler Online Ordering:

<script src='zuppler-gtm.js'></script>
<script src='//web5.zuppler.com/common.js'></script>
<script src='//web5.zuppler.com/portal.js'></script>

Method 2

Alternatively, you can add the contents of the file as an inline script on the integration page:

<script>
... paste contents here ...
</script>
<script src='//web5.zuppler.com/common.js'></script>
<script src='//web5.zuppler.com/portal.js'></script>

Method 3

Another method is to create a Custom HTML Tag in the GTM Dashboard, using the content of zuppler-gtm script

<script>
... paste contents here ...
</script>

Output

You will receive the following events in your GTM console. Each event comes associated with its more verbose information inside Data Layer:

ordering:portal ( portal listing page )
ordering:order ( client opened a restaurant )
ordering:item:view ( client opened an item page )
ordering:item:added ( item has been added to bag )
ordering:order:cart ( client opened the checkout page )
ordering:order:payment ( client opened the payment page )
ordering:order-receipt ( payment successful, order placed )
ordering:dashboard ( client opened the dashboard page )

Analytics