In August, Shopify officially deprecated the additional script fields in its Checkout settings and replaced them with its new Customer Events Pixels. While the additional scripts will still continue to function until August 28th 2025, here at Wonder we have decided to move all of our scripts into customer events now, so we aren’t in a rush next August!
To show how easy it is to set up tracking in a customer event web pixel, here is a step-by-step guide on setting up Microsoft Bing Ads as a web pixel.
How to Create a Bing Ads UET Tag
Firstly, you need to create a UET tag in Microsoft Advertising. If you don’t know how to do this, you can follow the instructions here.
Once you have created your UET tag, you should have a code snippet similar to the one below.
(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"your_id_here", 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");Setting Up A Shopify Customer Events Pixel
Using this code, we will create a new web pixel. To do this follow these steps.
- To do this login to the admin of your Shopify store and click Settings on the bottom left hand side and then click on Customer events. On this page you will see a list of the pixels that have been added to your store, whether these are custom or added by an app.
- Click the Add custom pixel button at the top of the page.
- Enter a name for your pixel, in our example, we will use Bing Ads Purchase.
- Initially, you will be presented with an empty Code field. This is where we add the code to track purchases in Bing Ads.
- On line 2 of the Code field, add the UET tag that you created earlier. (Or copy the code above and update to include your ID)
Once this pixel is connected, the UET tag will fire on every page, which does general page view tracking on all pages of your store, including the checkout.
However, this won’t track the purchase event data and we have to add some more code to do this.
Adding Purchase Event Tracking
If you have created a new pixel, you will see on lines 4-7 some example code. analytics.subscribe is how we are able to fire certain snippets of code when certain events happen. There are several different standard events you can subscribe to, but we will be subscribing to checkout_completed for the purchase event.
- On line 8, paste the following code. This code subscribes to the
checkout_completedevent, meaning the code will be fired when the user completes their purchase. We send overrevenue_valueandcurrencyvalues using event data.
analytics.subscribe("checkout_completed", (event) => {
window.uetq = window.uetq || [];
window.uetq.push('event', 'purchase', {
'revenue_value': event.data.checkout.totalPrice.amount,
'currency': event.data.checkout.currencyCode
});
});It is also possible to send more detailed information about the specific products that the customer has purchased.
- Once you have added the code, click the Save button at the top of the page.
- Once it has been saved, you can click the Connect button at either the top or bottom of the page. Once you have clicked Connect, the pixel will be present on your store and start tracking immediately.
If you make changes to the pixel, you can update the code and then click Save and this will be updated straight away.
If you want to disable the pixel, you can click the Disconnect button and it will be removed from your store.
If you need any help with your advertising, tracking and analytics requirements or want to discuss how you can get the most out of your data then get in touch – we’d love to hear from you.
