For the Brandbassador system to be notified of any sales made, we need all brands to hit our tracking pixel once a sale is made with a discount code / tracking link that originates from our system. 

For full integration we recommend to set up discount code creation through API, check out this article for that part of the integration

If you want to set up tracking through Google Tag Manager please follow this article

The tracking links looking something like this: https://www.yoururl.com/?ref=bb-abc - That way, we validate that the link contains bb and should be associated with user with ID abc (unique for each user) so we can track the sale to the right user. This link is static and will be fixed per user - and the link is generated on Brandbassador’s side and could be bb- followed by any value.

The integrated webshop shall have scripts on the checkout page that can either be a server-side GET request according to the specifications below (recommended) or an actual tracking pixel (transparent image). For security reasons and to prevent abuse, we do encourage that the tracking pixel / endpoint gets hit directly from the server side upon order completion, but it is also possible to just add the tracking pixel directly in the HTML as a regular tracking pixel. 

The custom scripts must send the following information*:

So the script could look something like:

{% if landing_site_ref contains ‘bb’ %}

<img src="https://api.brandbassador.com/tracking/pixel.gif?tracking_link=true&ref=[REF]&order_id=[ORDER_NUMBER]&total=[TOTAL_SALE_VALUE]&key=[BRAND_KEY]&currency=[CURRENCY]" height="1" width="1" />

{% else %}

<img src="https://api.brandbassador.com/tracking/pixel.gif?order_id=[ORDER_NUMBER]&total=[TOTAL_SALE_VALUE]&code=[DISCOUNT_CODE]&key=[BRAND_KEY]&currency=[CURRENCY]" height="1" width="1" />

{% endif %}

So if your Brand Key is ZYX and a customer enters your webshop through yoururl.com/?ref=bb-abc and purchases something for 100 USD that creates order number 987 the pixel firing on the yoururl.com checkout page should look like this:

https://api.brandbassador.com/tracking/pixel.gif?tracking_link=true&ref=bb-abc&order_id=987&total=100&key=ZYX&currency=USD

The user associated with the ref abc from brand key ZYX will then be rewarded the sale with order id 987 by Brandbassador

If the customer does not enter through a URL including ref=bb, but instead is using the discount code 456 generated through Brandbassador (see documentation) the pixel firing on the yoururl.com checkout page should look like this:

https://api.brandbassador.com/tracking/pixel.gif?order_id=987&total=100&code=456&key=ZYX&currency=USD

The user associated with the ref discount code 456 from brand key ABC will then be rewarded the sale with order id 987 by Brandbassador.

When you have completed the full integration with tracking and discount code creation through API we recommend you to test your integration.

EXAMPLE SCRIPT FOR USE WITH GOOGLE TAG MANAGER ETC:

When a customer arrives in the webshop through a tracking link link yoururl.com/?ref=bb-abc the reference needs to be added to the tracking script on checkout success. The script below will save the ‘ref’ from the URL when customer enters the site in localStorage, so that information can be sent to api.brandbassador.com when the customer does a purchase. This script should be placed on all pages to ensure full tracking.

<script> (function() {
    var BBV = '1.0.1';
    var loadScript = function(url, callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    callback()
                }
            }
        } else {
            script.onload = function() {
                callback()
            }
        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script)
    };
    var getUrlParameter = function(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName, i;
        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1]
            }
        }
    };
    var logError = function(e) {
        var url = 'https://api.brandbassador.com/tracking/log?ref' + getUrlParameter('ref') + '&host=' + encodeURIComponent(window.location.host) + '&error=' + encodeURIComponent(e);
        if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
            loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
                jQuery191 = jQuery.noConflict(true);
                jQuery191.get(url)
            })
        } else {
            jQuery.get(url)
        }
    };
    var setRef = function() {
        try {
            var ref = getUrlParameter('ref');
            if (ref && ref.length > 0 && ref.substring(0, 3) === 'bb-') {
                localStorage.setItem('bb-ref', ref)
            }
        } catch (e) {
            logError(e)
        }
    };
    setRef()
})();
</script>


JAVASCRIPT EXAMPLE SCRIPT


You can add the <script> tag inside the <head> tags, so that the script is loaded. Once that is done, you will need to call the function with the necessary parameters, in order to call the tracking pixel. Please note that by following this approach, the authentication key will be exposed for the client.

<script>
    function generateTrackingPixel(orderId, total, currency, key, code, ref) {
        const BASE_URL = 'https://api.brandbassador.com/tracking/pixel.gif?';
        let queryString = order_id=${orderId}&total=${total}&currency=${currency}&key=${key};
        let now = new Date().getTime();
        let random = Math.random() * 99999999999;
        let cacheBuster = &t=${now}&r=${random};
        if(code) {
            queryString += &code=${code};
        } else if(ref) {
            queryString += &ref=${ref};
        }
        let imgtag = document.createElement('img');
        imgtag.height = '1';
        imgtag.width = '1';
        imgtag.style = 'border-style:none;';
        imgtag.alt = '';
        imgtag.src = BASE_URL + queryString + cacheBuster;
    }
</script>


Did this answer your question?