Checkout Extensibility Upgrade AMA: Custom Web Pixels with Domaine

Community Events

Topic summary

Domaine’s Director of Engineering, Connor Munro, hosted an AMA (July 22-26) on Shopify’s custom web pixels for checkout extensibility upgrades. The discussion covered technical implementation challenges and solutions:

Key Technical Issues Addressed:

  • Missing checkout_completed events for some clients, with reports of 30% missing orders in stores running multiple pixels
  • Pixel firing delays (3-7 seconds) causing tracking gaps when users quickly navigate away
  • Custom pixels run in sandboxed iframes, preventing DOM manipulation and external script loading
  • Order count endpoint (init.data.customer.OrdersCount) incorrectly returning zero
  • Sandbox URL parameters polluting analytics tracking
  • Google Tag Manager preview mode incompatibility with Shopify’s sandbox environment

Important Clarifications:

  • Web pixels are for tracking only, not DOM manipulation—UI extensions needed for functionality changes
  • App pixels (web workers, off main-thread) offer better performance than custom pixels (iframes, main-thread)
  • Pixels don’t fire on new customer account order status pages (support in development)
  • checkout_completed fires only once regardless of page reloads
  • Product data accessible via data.checkout.lineItems
  • Customer order count available through init object
  • Shopify developing runtime error reporting for custom pixels
  • Google migrating native app to web pixels with consent mode v2 support by end of August

Migration Guidance:

  • checkout.liquid deprecated by August 13th deadline
  • Recommended: implement pixels through Customer Events area for security and privacy compliance
  • Can revert to checkout.liquid anytime before deadline
  • Custom pixels can access cookies and local storage on top-level frame

Several participants reported ongoing debugging challenges without proper preview tools.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
19

Hi Team, thanks for the answers,
regarding the google GTM pixel or any other custom pixel,
reference gtm - https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

when I add the example below code and test the pixel, it raise an error in console and pixel fails to send data.

error : Uncaught TypeError: Failed to construct ‘URL’: Invalid URL
kindly help me to mitigate the same .

(function(w,d,s,l,i){w[l]=w[l]||;w[l].push({‘gtm.start’:
new Date().getTime(),event:‘gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=‘dataLayer’?‘&l=’+l:‘’;j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f;
})(window,document,‘script’,‘dataLayer’, ‘GTM-XXX’)

Thank you.
balaji