AskSpot analytics on Shopify: storefront and checkout

This is a companion to the main guide, tracking the AskSpot chat in Google Analytics – read that first for the widget events, the dataLayer bridge, GTM and GA4 setup. Here we only cover what is specific to Shopify.

Storefront (home, categories, product pages)

The ordinary case. You load the widget through GTM or the theme (theme.liquid), and the bridge through GTM. Everything in the main GA4 guide works unchanged.

Checkout – three facts to know

• Fact 1: Custom Pixel runs in a sandbox. Shopify runs Custom Pixels in an isolated iframe (Web Pixels API), with no access to the checkout page DOM. Consequence: the script loads, but the widget won’t render. That’s not a bug – it’s how Shopify works.
• Fact 2: the analytics layer can work. Besides the chat window, our script loads analytics logic. In the sandbox the widget has nowhere to draw itself, but the analytics part has a chance to work – it can listen for Shopify events in the pixel environment (including checkout_completed) and send a conversion to our API.
• Fact 3: access to conversation memory needs testing. We keep conversation memory in a hidden chat frame (iframe). Because the checkout usually runs on a subdomain of the same parent domain as the shop, the browser treats it as the same site and a conversation started on the storefront should be visible there. But a strongly isolated Custom Pixel sandbox may cut that off.

Code for the Custom Pixel

const ASKSPOT_SCRIPT_SRC =
  'https://chat.askspot.io/api/v1/integration/{YOUR_INTEGRATION_ID}/embed-script';

let askSpotLoaded = false;

function loadAskSpot() {
  if (askSpotLoaded) return;
  askSpotLoaded = true;
  const script = document.createElement('script');
  script.async = true;
  script.crossOrigin = 'anonymous';
  script.src = ASKSPOT_SCRIPT_SRC;
  document.head.appendChild(script);
}

const getCookiebotConsent = async () => {
  try {
    const cookieString = await browser.cookie.get('CookieConsent');
    if (!cookieString) return null;
    return {
      marketing:   cookieString.includes('marketing:true'),
      statistics:  cookieString.includes('statistics:true'),
      preferences: cookieString.includes('preferences:true')
    };
  } catch (e) {
    return null;
  }
};

async function loadAskSpotIfAnalyticsConsentGranted() {
  const consent = await getCookiebotConsent();
  if (consent?.statistics) loadAskSpot();
}

analytics.subscribe('checkout_started', () => {
  loadAskSpotIfAnalyticsConsentGranted();
});

GTM or Custom Pixel on the checkout?

	GTM	Custom Pixel
Works on Shopify checkout	only with Checkout Extensibility (Shopify Plus / new checkout)	✓ always
Consent	✓ with Consent Mode, one place	manual, cookie parsing
Access to Shopify events (checkout_completed)	indirectly via the dataLayer	✓ natively via analytics.subscribe
Isolation	none	sandbox – no DOM, possible trouble accessing conversation memory
Adblockers	⚠ block gtm.js	less susceptible

Recommended order of action:

1. Storefront through GTM (consent, one place, the whole path). Remove the frontend script so you don’t duplicate.
2. Ask AskSpot to hide the bubble on the cart and checkout – don’t fiddle with conditional loading.
3. Checkout: first check whether you need a Custom Pixel at all. If conversions are meant to go to the AskSpot API, not your GA4 – check with us whether a server-side variant (attribution, level 3) is enough.
4. If a Custom Pixel is needed – deploy it on a test pixel / test shop first, verify the QA checklist items, and only then go to production.

For placement modes and the full integration picture, see the Shopify integration. To connect order data (order status in chat), see how to connect Shopify to AskSpot.