Our Checkout Javascript API enables you to track conversions on third-party platform like Facebook or Google Ads (for example: use Google's Ecommerce Measurement to collect ecommerce related data).
How to track conversions
Once you've installed VaocherApp checkout form onto your website, (see instruction at https://vaocher.app/settings/installation/), you can add extra code to track the new orders (e.g. conversions).
When an order is placed successfully, we will fire an event called conversion
that contains all the necessary data you need. You can simply register the event handler like below:
vaocherapp('conversion', function (payload) {
console.log(payload);
});
Transaction Data
Following are the available attributes when an order has been placed successfully (the "payload" example above):
Key | Type | Description |
---|---|---|
transaction_id |
String | The transaction ID |
amount |
Number | The total paid for the order in smallest unit(1) |
currency |
String | The payment currency |
test_mode |
Boolean | Whether or not this is a test order |
gift_vouchers |
Array | List of generated gift voucher(s) |
A single gift_vouchers
has these following attributes:
Key | Type | Description |
---|---|---|
id |
String | The gift voucher ID |
code |
String | The gift voucher unique reference code |
item |
String | The purchased menu item name |
balance |
Number | The remaining balance in smallest unit(1) |
Note (1): Currencies in VaocherApp are always in smallest unit. That means 100
is equivalent to $1
, whereas 10000
is equivalent to $100
Example
Below is the full example to track version:
<!-- Make sure to load VaocherApp latest embed script -->
<script type="text/javascript">(function(e,c,a,s){e[s]=e[s]||function(){(e[s].callbacks=e[s].callbacks||[]).push(arguments)};var t=c.createElement("script");t.async=1,t.defer=1,t.src=a,c.head.appendChild(t)})(window,document,"https://vaocher.app/resources/embed/embed.js?2.7.2","vaocherapp")</script>
<script type="text/javascript">
vaocherapp('conversion', function(payload) {
// Make sure you have loaded the Google Analytics embed code
// Then load the Google Analytics Ecommerce plugin (see https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce)
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': payload.transaction_id,
'revenue': (payload.amount / 100).toString(), // You should format this to "dollars" string (see the note above)
'currency': payload.currency.toUpperCase(),
'shipping': '0',
'tax': '0',
'affiliation': 'VaocherApp',
});
for (var i = 0; i < payload.gift_vouchers.length; i++) {
let giftVoucher = payload.gift_vouchers[i];
ga('ecommerce:addItem', {
'id': payload.transaction_id,
'name': giftVoucher.code + ' - ' + giftVoucher.item,
'sku': giftVoucher.code, // This needs to be unique in order to track all items https://stackoverflow.com/questions/19954083/google-analytics-ecommerce-sends-only-last-item-in-transaction
'category': giftVoucher.item,
'price': (giftVoucher.balance / 100).toString(), // You should format this to "dollars" string (see the note above)
'quantity': '1',
'currency': payload.currency.toUpperCase(),
});
}
ga('ecommerce:send');
});
</script>