1. Define bbKey variable
    This is the actual 'key' parameter used in the Tracking Pixel:

2. Create custom trigger for the checkout page

3. Create Tracking Pixel tag
This is the tag that will actually inject into the webshop scripts used for our Tracking Pixel:

<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 trackOrder=function(url){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(!0);jQuery191.get(url)})}else{jQuery.get(url)}};var checkOrder=function(){var linkURL="https://api.brandbassador.com/tracking/pixel.gif?tracking_link=true&ref=__bb-ref__&order_id="+dataLayer[0].orderId+"&total="+dataLayer[0].total+"&key={{bbKey}}&currency="+dataLayer[0].currency;var codeURL="https://api.brandbassador.com/tracking/pixel.gif?order_id="+dataLayer[0].orderId+"&total="+dataLayer[0].total+"&code="+dataLayer[0].code+"&key={{bbKey}}&currency="+dataLayer[0].currency;try{var ref=localStorage.getItem("bb-ref");var code=dataLayer[0].code;if(ref&&ref.length>0){localStorage.removeItem("bb-ref");linkURL=linkURL.replace("__bb-ref__",ref);trackOrder(linkURL)}else if(code&&code.length>0){trackOrder(codeURL)}}catch(e){}};checkOrder()})();</script>

4. Create Reference Link tag
This is the tag that will inject into the webshop the script that captures the reference link and saves it into local storage, so it can be used by the Tracking Pixel script later:

<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://staging.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>

5. Add the GTM script into the global theme page (for Shopify that is theme.liquid from Theme Settings)

6. Add the below script followed by GTM script to Checkout Success page

<script>
dataLayer = [{
    event: "checkout",
    orderId: "{{ order_number }}",
    total: "{{ total_price | money_without_currency || replace: ',', '.'}}",
    code: "{{ discounts[0].code }}",
    currency: "{{ shop.currency }}"
}];
</script>

Did this answer your question?