Shopify custom pixel — reading cart attributes from init and event payloads, dataLayer enrichment

shopify-custom-pixel-attribute-reader.js

// Customer events > Add custom pixel
analytics.subscribe("page_viewed", (event) => {
  const initAttrs =
    (init && init.data && init.data.cart && init.data.cart.attributes) || [];
  const b2b = getAttr(initAttrs, "_b2b") === "true";
  const customerId = getAttr(initAttrs, "_customer_id");

  // GA4 user_property olarak dataLayer'a push
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "customer_context",
    b2b_status: b2b ? "b2b" : "b2c",
    internal_customer_id: customerId || null,
  });
});

analytics.subscribe("checkout_started", (event) => {
  const attrs = (event.data.checkout && event.data.checkout.attributes) || [];
  const b2b = getAttr(attrs, "_b2b") === "true";

  if (b2b) {
    // Event-level enrichment
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "begin_checkout_b2b",
      value: event.data.checkout.totalPrice.amount,
      currency: event.data.checkout.currencyCode,
    });
  }
});

function getAttr(attrs, key) {
  if (Array.isArray(attrs)) {
    const hit = attrs.find((a) => a.key === key);
    return hit ? hit.value : undefined;
  }
  return attrs && attrs[key];
}