Creating A Custom Pixel

A custom pixel is a block of JavaScript you add at Settings → Customer events → Add custom pixel. Give it a name, paste your code, and save. From then on it runs in the sandbox on storefront and checkout alike.

How the sandbox shapes your code

• You get an analytics object. You subscribe to events; you don't read the page.
• There is no access to the storefront DOM or the page's real window — no document.querySelector on store content.
• Data arrives in the event payload, e.g. event.data.checkout, not from scraping.
• You can subscribe to many standard events: page_viewed, product_viewed, product_added_to_cart, checkout_started, checkout_completed, and more.

The shape of every subscription

Each subscription is the same move: listen for an event, read what you need from its payload, do something with it.

analytics.subscribe("product_viewed", (event) => {
  // read from the payload Shopify hands you…
  const title = event.data?.productVariant?.title;
  // …then forward it (to a dataLayer, a fetch, an ad pixel, etc.)
  console.log("viewed", title);
});

That is the whole model. The interesting part — and what the rest of this course is about — is forwarding those events into Google Tag Manager so your existing GA4 and ad tags can use them.