Conversion tracking via Google Tag Manager

If you use Google Tag Manager (GTM) you can use our Custom Conversion Tracking API to track conversions via GTM instead of directly in code. Here's how:

1) Add a Trigger in your GTM account with the type "Custom event" and give it a name like "GiftUpConversion" (you'll need this in the next step):

2) Change your Gift Up! installation code to trigger this new GTM event. If you need to, you can pass in extra properties into your GTM custom event, like we are in the example below: 

<script type="text/javascript"> 
(function(g, i, f, t, u, p, s) {
    g[u] = g[u] || function() {
        (g[u].q = g[u].q || []).push(arguments)
    };
    p = i.createElement(f);
    p.async = 1;
    p.src = t;
    s = i.getElementsByTagName(f)[0];
    s.parentNode.insertBefore(p, s);
})(window, document, 'script', 'https://cdn.giftup.app/dist/gift-up.js', 'giftup');

// Track conversions: 
giftup("conversion", function(payload) {
    var event = {};

    // Specify your Google Tag Manager custom event name here: 
    event.event = 'GiftUpConversion';

    // Add any properties that you want from the Gift Up! conversion payload: 
    event.GiftUpRevenue = payload.revenue;
    event.GiftUpCodes = payload.giftCards.map(e => e.code).join(",");

    // Fire the Google Tag Manager custom event: 
    dataLayer.push(event);
});
</script>

3) Create a new User-Defined Variable in your GTM account ("Data Layer Variable" type, Version 2) for each and every property you wish to read from our custom tracking payload. In the example above we passed in 2 properties: GiftUpRevenue and GiftUpCodes.

Repeat this for all the other variables you've passed into your Custom GTM event above

4) Create a Tag in your GTM account that triggers only when the "GiftUpConversion" custom event is fired. 

Here is where you will need to fire your third-party code provided, passing in any parameters to the that they require. In the example below, we're just popping up a browser alert window showing the Gift Up! conversion value that codes we issued to the recipient - you should not do this in real life, it's an example only!

5) Publish (or preview) your GTM container.

6) Place a test order and you'll see this in your browser window once an order has been placed: (please note, this only works on our Drop-In checkout on your website and assumes you already have GTM installed!)

Of course, you do not want to be showing a popup whenever a real customer buys a gift card, so your code needs to be different inside GTM.