Custom Pixels for Checkout Extensibility

Getting started

New to Squaredance

Brands

Partners

Tracking & Integrations

Technical Docs

This article is a guide for Shopify users who have adopted Checkout Extensibility for their storefront.

For brands on Shopify who have migrated to Checkout Extensibility, we have created a custom purchase pixel that you can directly inject into your Customer Events settings. Follow the steps below to add the purchase pixel, and start tracking conversions. Please note, even with a Squaredance App integrated campaign, you will need perform the steps below, if you have migrated to Checkout Extensibility.

Step 1: Go to Customer Events within your Shopify Settings

Step 2: Create a Customer Event pixel dedicated for the Squaredance Purchase Pixel

Step 3: Grab your Pixel Tracking Domain and Init Value

For this step, you will first need to retrieve the following information from Step 9 of your campaign setup

The tracking domain within the pixel (should be on line 16)

Please get the whole url between the brackets, for example it should look like: https://example.com/

Init value within the pixel (should be on line 18)

Please get the whole string between the brackets, for example it should look like: stzKXbRyHKI1gkUQYz2nPlk8zgY3HKkPdjXsdOFcvv6_9g9B5avpuKFfl_lZQ4cM2zNaHZt_JdLTPMGq-xVeiIQgweYf2CeuG9wFsfmZQ8~

Step 4: Copy the pixel below, and replace the placeholders with the information you retrieved above

// Purchase
analytics.subscribe("checkout_completed", function(event) {
  try{squaredanceCart=JSON.parse(decodeURIComponent("{{cart.items|json|url_encode}}"))}catch(e){} !function(j,u,m,b,l,e){var n="jumbleberry",i="3.2.3",o=function(){o.v==i&&o.e?o.e.apply(o,arguments):o.q.push(arguments)} ,a=encodeURIComponent,t=decodeURIComponent,d=j.location;(o.push=o).l=!1,o.q=[],o.v=i,o.duid=function(n){return( n=n&&u.cookie.match(RegExp(t("%5Cs*")+n.substr(0,21)+"id=([^;]+)")))?t(n[1].split(".")[0]):""},o.g=function(n,i){return!!( i=RegExp("^[^#]*[?&]"+n+"=([^&#]+)").exec(i||d.href))&&t(i[1].replace(/\+/g," "))},o.s=function(n){for(var i=Math.round(( new Date).getTime()/1e3),t=d.hostname.split("."),r=t.length-1;0<r--&&/^(([a-z0-9]{4}-?){8}|[0-9]+)$/i.test(n)&&n!=o.duid( o.p);)u.cookie=o.p.substr(0,21)+"id="+a(n)+"."+i+".0."+i+".; path=/; max-age=63072000; domain=."+t.slice(r,t.length ).join(".")},o.i=function(n,i,t){if("init"==n)return[o.u=o.duid(o.p=i),o.s(o.h=t||o.u)];t=t||{},(n=u.createElement( "iframe")).src=o.d+o.p+"?hid="+a(o.h)+"&uid="+a(o.u)+"&event="+a(i||"")+"&transid="+a(t.transaction_id||"")+"&oi="+a( t.order_index||"")+"&ctx="+a(JSON.stringify(t)),n.height=n.width=0,n.style="display:none;visibility:hidden", n.sandbox="allow-forms allow-same-origin allow-scripts",n.referrerPolicy="unsafe-url",(u.body||u.head).appendChild(n)}, o.m=o.e=function(){var n,i;!j._RNGSeed&&o.i.apply(o,arguments)&&(n=u.createElement(m),i=u.getElementsByTagName(m)[0], n.src=o.d+o.p+"?hid="+a(o.h)+"&uid="+a(o.u)+"&v="+o.v,n.async=!!o.h,o.e=!1,o.q.unshift(arguments),j.addEventListener( "beforeunload",n.onerror=function(){o.e=o.i;for(var n=0;n<o.q.length;++n)o.apply(o,o.q[n]);o.q=[]}), i.parentNode.insertBefore(n,i))},j[n]=j[n]||o,j[n].d=b}(window,document,"script","CAMPAIGN_DOMAIN_HERE");

  jumbleberry("init", "CAMPAIGN_INIT_VALUE_HERE", jumbleberry.g("sqdid") || jumbleberry.g("click_id"));

  var checkout = event.data.checkout;
  var firstItem = checkout.lineItems[0];
  var content_ids = checkout.lineItems.map(function(item) {
    if (item.variant && item.variant.product && item.variant.product.id) return item.variant.product.id;
    if (item.variant && item.variant.id) return item.variant.id;
    return item.id;
  });
  var contents = checkout.lineItems.map(function(item) {
    let contentId = item.variant && item.variant.product && item.variant.product.id ? item.variant.product.id : item.variant && item.variant.id ? item.variant.id : item.id;
    return { id: contentId, quantity: item.quantity, item_price: item.variant.price.amount };
  });
  var coupons = checkout.discountApplications
    .map(function(discount) { return discount.type === 'DISCOUNT_CODE' ? discount.title: null; })
    .filter(Boolean);

  jumbleberry('track', 'Purchase', {
    order_value: checkout.totalPrice.amount,
    currency: checkout.totalPrice.currencyCode,
    content_name: firstItem.title,
    content_type: firstItem.variant.product.type,
    content_ids: content_ids,
    contents: contents,
    num_items: checkout.lineItems.length,
    transaction_id: checkout.order.id,
    coupons: coupons
  });
});

*Zoomed in view to highlight the placeholders that need to be replaced. Please make sure to copy the retrieved values in step 3, and paste between the quotation marks.

Step 5: Paste and Save the pixel in the newly created Customer Event

Press connect if its the first time creating the pixel

Press save after you pasted the pixel (top right)

Step 6: Test your funnel

Now please grab your test link on platform, open up an incognito window and test again! After a successful test, your campaign should be ready to launch!

On this page

Step 1: Go to Customer Events within your Shopify Settings
Step 2: Create a Customer Event pixel dedicated for the Squaredance Purchase Pixel
Step 3: Grab your Pixel Tracking Domain and Init Value
Step 4: Copy the pixel below, and replace the placeholders with the information you retrieved above
Step 5: Paste and Save the pixel in the newly created Customer Event
Step 6: Test your funnel