Client-Side Tracking with Shopify Custom Pixels

analytics.subscribe('page_viewed', (pageViewEvent) => {
  const pageUrl = pageViewEvent.context?.document?.location?.href;
  if (!pageUrl) return;

  const clickId = new URL(pageUrl).searchParams.get('moeclid');
  if (!clickId) return;

  browser.localStorage.setItem(
    'MOEBEL_CLICKOUT_ID',
    JSON.stringify({ date: new Date().toISOString(), clickId })
  );
});

// REPLACE ME: one row per host name of your shop, with the market of the
// portal your visitors come from and the partner key you received for it
const MOEBEL_ROUTES = [
  { hostName: 'www.your-shop.de', market: 'de', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
];

analytics.subscribe('checkout_completed', (checkoutEvent) => {
  const checkoutData = checkoutEvent.data?.checkout;
  if (!checkoutData) return;

  const pageUrl = checkoutEvent.context?.document?.location?.href;
  const hostName = pageUrl ? new URL(pageUrl).hostname : undefined;
  const routes = MOEBEL_ROUTES.filter((route) => route.hostName.toLowerCase() === hostName);
  if (routes.length === 0) {
    console.error(`moebel.de sales tracking: no row for host name ${hostName}, nothing was reported`);
    return;
  }

  const lineItems = checkoutData.lineItems.map((lineItem) => ({
    item_id       : lineItem.variant?.sku,
    quantity      : lineItem.quantity,
    price         : lineItem.variant?.price?.amount,
    item_category : lineItem.variant?.product?.type,
  }));

  const salePayload = {
    total      : checkoutData.subtotalPrice?.amount,
    shipping   : checkoutData.shippingLine?.price?.amount ?? 0,
    currency   : checkoutData.subtotalPrice?.currencyCode,
    orderId    : checkoutData.order?.id,
    items      : lineItems,
  };

  // The push script serves every market; data-market selects the endpoint.
  // One script per row, so each partner key only goes to its own market.
  routes.forEach(({ market, partnerKey }) => {
    if (!market?.trim() || !partnerKey?.trim()) {
      console.error(`moebel.de sales tracking: the row for ${hostName} needs a market and a partner key, nothing was reported for it`);
      return;
    }

    const pushScript = document.createElement('script');
    pushScript.src = 'https://www.moebel.de/partner/push.js';
    pushScript.dataset.partnerKey = partnerKey;
    pushScript.dataset.market = market;
    pushScript.onload = () => {
      if (window.MOEBEL_SALES) {
        window.MOEBEL_SALES.sale(salePayload);
      }
    };
    pushScript.onerror = () => {
      console.error('moebel.de sales tracking: push.js failed to load');
    };

    document.head.appendChild(pushScript);
  });
});

const MOEBEL_ROUTES = [
  { hostName: 'www.your-shop.de', market: 'de', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
  { hostName: 'www.your-shop.at', market: 'at', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
  { hostName: 'www.your-shop.ch', market: 'ch', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
];

const MOEBEL_ROUTES = [
  { hostName: 'www.your-shop.com', market: 'de', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
  { hostName: 'www.your-shop.com', market: 'at', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
  { hostName: 'www.your-shop.com', market: 'ch', partnerKey: 'INSERT-YOUR-PARTNER-KEY' },
];