logo
Shopify Builds>Primitives>dataLayer

dataLayer

Definition

The dataLayer is a global array that page code pushes events and context into and a tag manager reads from. It's a convention rather than a browser API, defined by Google Tag Manager, and it exists so that page code and marketing tags can be deployed and changed independently of one another.

Documented at Google's tag platform, the data layer.

How We've Used It

The rule we work to is that the theme owns the events and the tag manager owns the tags. Page context, meaning template, market, locale, signed-in state and loyalty tier, is seeded from Liquid in the head before any script, so the first push isn't a guess. Commerce events come from one place rather than every button: where six components each call the cart API directly, we've wrapped fetch once and reported the add from there, which is the only way to catch the ones rendered after a section re-render. Sign-in and sign-up events are read from redirect parameters and then stripped from the address, so a refresh can't fire them twice.

Builds Using It

One further gated build uses it; its page follows.

Related Entities

Builds

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Server-rendered page-context dataLayer, declared in the head and pushed at browser idle

`theme.liquid` declares `window.dataLayer` ahead of the platform's head content, then pushes a context object assembled in Liquid — locale, shop country, page type and, for signed-in customers, subscriber, loyalty and login state — when the browser is idle, so every tag in the container reads the same server-side facts.

Three Ships

Homepage hero carousel v2 - video and split-image slides with per-slide typography control

The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.

Nudestix

Swell VIP tier and email-subscriber segmentation resolved in Liquid

Two Liquid variables in `theme.liquid`: `loyalty_status`, resolved from the tags the loyalty vendor writes onto the customer record, and `subscriber_status`, resolved from email-marketing consent — both assigned before `content_for_header` and emitted only for signed-in customers.

Three Ships

Title-matched mega menu with a full-depth link-list fallback

Shopify gives a navigation item no settings of its own. This menu joins each top-level link to a theme-editor block by matching their titles, and renders a full link-list panel for every item that has no block behind it.

Nudestix

Grouped shade swatch picker with shade-finder dialog and GA4 shade-finder events

Finish became a variant metafield instead of a second product option, which is what lets forty shades group into Matte, Matte Lux and Bloom without touching the SKU matrix — and the shade quiz beside them is bought, wrapped in a native dialog and measured on our side of the boundary.

Nudestix