With Shopify's recent update to Checkout Extensibility, your existing purchase tracking with Talkable may stop working. To ensure continued tracking of purchases, you need to add a Shopify Custom Pixel with an updated code.

Follow the instructions below to implement the new tracking code:


Step 1: Obtain Your Talkable Site ID

  1. Log in to your Talkable account https://www.talkable.com/login

  2. Navigate to Site Settings.

  3. Locate the Name of your site; this is your Talkable Site ID (screenshot).

    • Alternatively, your site ID is part of the URL when editing site settings:

https://referrals.talkable.com/sites/your-site-id/edit/settings

  • Replace your-site-id with the actual ID displayed in your URL.

Step 2: Prepare the Tracking Code

Copy the code below and replace "your-site-id" with your actual Talkable Site ID from Step 1.

analytics.subscribe("checkout_completed", async ({ data: { checkout } }) => {
  // change this to your site id
  const TALKABLE_SITE_ID = "your-site-id"

  const getCookie = (n) => (document.cookie.match(`(^|; )${n}=([^;]*)`) || 0)[2] || '';
  const params = {
    v: "shopify-pixel-0.1.0",
    "o[email]": btoa(checkout.email),
    "o[first_name]": checkout.shippingAddress?.firstName || '',
    "o[last_name]": checkout.shippingAddress?.lastName || '',
    "o[customer_id]": checkout.order.customer.id,
    "o[order_number]": checkout.order.id,
    "o[subtotal]": checkout.subtotalPrice.amount,
    "o[tax_amount]": checkout.totalTax.amount,
    "o[discount_amount]": checkout.discountsAmount.amount || 0,
    "o[shipping_amount]": checkout.shippingLine.price.amount || 0,
    "o[coupon_code]": checkout.discountApplications[0]?.code || '',
    "o[currency_iso_code]": checkout.currencyCode,
    "o[shipping_address]": [checkout.shippingAddress?.address1, checkout.shippingAddress?.address2, checkout.shippingAddress?.city, checkout.shippingAddress?.province, checkout.shippingAddress?.zip, checkout.shippingAddress?.country].filter(Boolean).join(', '),
    "o[shipping_zip]": checkout.shippingAddress?.zip || '',
    "o[language]": checkout.localization.language.isoCode || 'en',
    "o[country]": checkout.shippingAddress?.country || '',
    ts: Date.now() / 1000 | 0,
    ii: TALKABLE_SITE_ID,
    cvuuid: getCookie('tkbl_session') || getCookie('tkbl_session_id') || ''
  };
  checkout.lineItems.forEach((item, i) => {
    params[`o[items][${i}][product_id]`] = item.variant.id;
    params[`o[items][${i}][price]`] = item.finalLinePrice.amount;
    params[`o[items][${i}][quantity]`] = item.quantity;
    params[`o[items][${i}][title]`] = item.title || item.variant.product.title;
  });
  await fetch(`https://www.talkable.com/public/${TALKABLE_SITE_ID}/purchases/create.json?${new URLSearchParams(params)}`, {
    method: "GET",
    mode: "no-cors"
  });
});


Gist file with code here


Step 3: Add the Custom Pixel to Your Shopify Store

  1. Log in to your Shopify admin panel.

  2. Navigate to Settings in the lower-left corner.

  3. Click on Customer events

  4. Click on Add custom pixel.

    • For detailed instructions, refer to Shopify's documentation on Custom Pixels.

  5. Name your pixel: Enter a recognizable name, such as "Talkable Purchase Tracking".

  6. Paste the code: In the code editor, paste the modified code from Step 2.

  7. Save: Click Save to apply the changes.

Why Is This Necessary?

  • Shopify Update: Shopify's transition to Checkout Extensibility may disrupt existing third-party integrations that rely on older checkout scripts.

  • Continued Tracking: Adding this custom pixel ensures that Talkable continues to receive purchase data from your store.

  • Referral Attribution: By tracking purchases, Talkable can accurately attribute sales to the correct referral sources, ensuring that your affiliates and marketing campaigns are rewarded appropriately.