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, data:{} })
  }
  if(type == 'order') {
    dataLayer.push({ event, data:{remoteId: params.remoteId, name: params.restaurant.name} })
  }
  if(type == 'item:view') {
    dataLayer.push({ event,  data:{name: params.name, id: params.id} })
  }
  if(type == 'item:added') {
    dataLayer.push({ event,  data:{name: params.name, id: params.dish_id, price: params.price, quantity: params.quantity} })
  }
  if(type == 'order:payment') {
    dataLayer.push({ event, data:{type: params.type} })
  }
  if(type == 'order-receipt') {
    dataLayer.push({ event, data:{orderId: params.orderId, total: params.details.totals.total} })
  }
}

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