Logo
  • Getting Started
  • Brands
  • Partners
Help Center
Help Center
Custom Pixels for Checkout Extensibility

Custom Pixels for Checkout Extensibility

Getting started

New to SquaredanceNew to SquaredanceGuidesGuidesFAQsFAQs

Brands

Brand Quick StartBrand Quick StartCampaignsCampaignsPartnershipsPartnershipsBrand ReportingBrand ReportingManaging CreativesManaging CreativesBillingBilling

Partners

Partner Quick StartPartner Quick StartTracking & IntegrationsTracking & IntegrationsPartner ReportingPartner ReportingSubmitting CreativesSubmitting CreativesPayoutsPayoutsReferralsReferrals

Technical Docs

Tracking ChangelogTracking Changelog
icon
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

image

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

image
image

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/
      • image
  • 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~
      • image

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

  • *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.
image

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

image
  • Press connect if its the first time creating the pixel
    • image
  • Press save after you pasted the pixel (top right)
    • image

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
@Squaredance
// 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
  });
});