How can I install Microsoft ads tracking on a checkout page?

How can I install Microsoft ads tracking on a checkout page?

KieranDibor
Excursionist
15 2 3

Hi all, 

I'm trying to install the Microsoft advertising tracking on shopify, I've followed their guide and added the script to the theme.liquid. 

The next step is to add the script to the checkout page, by going to settings > Checkout> Order status page, however we are using the Checkout extensibility, and it does not allow me to add scripts in there.

Can anyone point me in the right direction to track conversions with Microsoft ads?  

Replies 2 (2)

bambi-solutions
Visitor
1 0 0

Hi Kieran, 
Let me know if the following is of help, or if you found a working, better solution already, it would be great to hear about it.
In case you or anybody else have not figured it out yet, without any other intermediary like Tag Managers:

With checkout extensibility you can not use the scripts in themes as you used to (now that exclamation raises doubts 😉 but continue reading). I have it running following the official documentation for several clients with Google Tag Manager but I will translate it for using without GTM:

  1. you can subscribe to the events and then execute the scripts.
    • You get there by hitting the "Settings" button on the bottom left of the screen and then select "Custom Events" from the menu on the left
    • You then create a custom event/pixel
  2. For the the checkout_completion you probably want to then leverage the same event and the following value:
    • the value or revenue of the conversion. That you find nested in the following object structure: event.data.checkout.totalPrice.amount
    • For Bing Ads that would add the following script (first part is your standard UET tag, then follows by event subscription to execute a purchase tag) to your custom pixel (mind the placeholders <> as you define it in your Bing Ads environment):

 

 

(function(w,d,t,r,u)
    {
        var f,n,i;
        w[u]=w[u]||[],f=function()
        {
            var o={ti:"<your_bing_ads_id>", enableAutoSpaTracking: true};
            o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")
        },
        n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function()
        {
            var s=this.readyState;
            s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)
        },
        i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
    })
    (window,document,"script","//bat.bing.com/bat.js","uetq");

analytics.subscribe("checkout_completed", (event) => {
    let checkout = event.data.checkout;
function uet_report_conversion() {
         window.uetq = window.uetq || [];
         window.uetq.push('event', '', {"event_label":"<optional label value>","event_category":"<category value>","revenue_value":checkout.totalPrice.amount,"currency":checkout.totalPrice.currencyCode});
    }
  });

 

 

Zobaer
Shopify Partner
1 0 0

How did you configure this with GTM?

I have done this with GTM and enabling a datalayer. The datalayer works fine for every other platforms and the Add to cart and begin checkout tags are also working for Microsoft ads. But the purchase event is not getting any conversion. It shows some events under the UET tag report, but no conversions in conversion goals. I suspect this is an issue with the MSCLICK ID.

So it would help a lot if you can give me a quick walthrough on how you do this with GTM?