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 )