Data layer
A shared, structured queue where the app publishes tracking facts once, so analytics tags stop scraping the page or inventing their own values.
See it
What it is
A data layer is a structured interface between the site and its analytics tags. The app publishes facts such as page type, product id, order value, and named events in one agreed shape. Google Tag Manager commonly receives them through window.dataLayer.push(...), then maps those values into GA4, ad pixels, or other tools.
Reach for it when several tags need the same business facts or when DOM scraping has made tracking brittle. The app owns what happened and what the values mean; the tag manager owns which approved destinations receive them. That seam keeps a redesign from silently changing analytics.
Gotcha: a data layer is an event stream, not a magical source of truth. Push order matters, names drift without a schema, and assigning a new array to window.dataLayer after Google Tag Manager loads destroys its existing queue. Never push passwords, card data, or raw personal information just because another tag might want it later.
Ask AI for it
Create a typed Google Tag Manager data layer in this TypeScript app. Declare window.dataLayer safely, initialize it without overwriting an existing queue, and expose typed helpers for page_view, signup_completed, and GA4 purchase events. The purchase shape must require transaction_id, value, currency, and items, and reject email, phone, password, and card fields. Use dataLayer.push({ event: ... }) for every emission, add runtime schema validation at the application boundary, and write tests for event order, missing required values, and initialization before and after the GTM container loads.