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)
purchaser	Object	The purchaser info, including name and email
recipient	Object	The recipient info, including name and email

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)

Example payload:

{
    "transaction_id": "tran_0123456789",
    "amount": 10000,
    "amount_with_currency": "$100.00",
    "currency": "AUD",
    "test_mode": false,
    "gift_vouchers": [
        {
            "id": "abcxzy-1234-5678-0000-123456789",
            "code": "UNIQUE-CODE",
            "item": "$100 Gift Voucher",
            "balance": 10000,
            "balance_with_currency": "$100.00"
        }
    ],
    "order_download_url": "https://vaocher.app/...",
    "purchaser": {
        "name": "Purchase name",
        "email": "purchaser@mail.com"
    },
    "recipient": {
        "name": "Recipient name",
        "email": "recipient@mail.com"
    }
}

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?v=latest","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_with_currency,
        '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,
            'category': giftVoucher.item,
            'price': giftVoucher.balance_with_currency,
            'quantity': '1',
            'currency': payload.currency.toUpperCase(),
        });
    }

    ga('ecommerce:send');
});
</script>