GTM and GA4 with real data
Two sites connected to a real backend: a landing page with forms and API endpoints, plus a shop with a full e-commerce checkout flow. Everything's pushed to the dataLayer. Your job is to catch it.
GTM in 90 seconds
If you've never set up tracking before, read this first. The four pieces below are everything GTM does.
Container
A small script you paste once on your site. It loads everything else: tags, triggers, variables. You manage it from tagmanager.google.com without touching code again.
dataLayer
A JavaScript array on every page. Your code pushes events into it (form submitted, item added to cart). GTM watches the array and reacts.
Trigger
The condition that fires a tag. Most useful kind: Custom Event. Set the event name to the one your dataLayer pushes (e.g. generate_lead) and you're done.
Tag
What runs when a trigger fires. Send a GA4 event, fire a Meta pixel, ping a webhook — whatever you need. One trigger can fire many tags.
The whole game: your code pushes to dataLayer → trigger spots the event → tag fires to GA4. Once that loop is in your head, the rest is just config.
How GTM actually works
The 90-second primer is the mental model. This is what's happening under the hood, and why GTM is built this way.
Think of GTM as a router sitting between your site and every analytics or ad platform you use. Without it, each platform needs its own snippet on every page, and every change ships through your dev team. With it, marketers configure tracking from a UI, dev gets out of the loop, and one event can fan out to ten destinations.
Here's the trick: GTM never invents data. It only routes what your site already broadcasts into the dataLayer. So the most important file in any tracking setup isn't the GTM container — it's the schema you push from your code. Get the schema right and GTM is mostly plumbing.
Practical loop you'll repeat all day: write a dataLayer.push that matches the GA4 schema, build a trigger that listens for it, attach a tag that forwards it. Verify in GTM Preview side-by-side with GA4 DebugView. That's it. Ten reps and you're a working analyst.
Six minutes from Google's own team. Watch it once before touching the sandboxes — it'll save you an hour of confusion later.
Two sites. Two use cases.
Each is built for a specific set of problems. Start with the landing page, then tackle the shop.
Landing
Lead gen sandbox: simple forms, multi-step forms, YouTube tracking, outbound links, promo banners, and newsletter signups. All wired up to real API responses.
E-Commerce Shop
The complete funnel: catalog, product pages, cart, multi-step checkout, payment, confirmation, and refunds. Textbook GA4 e-commerce.
Setup in five steps
Do these once. Then start the tasks on the landing or shop sandbox.
GTM-XXXXXXX ). Both sandbox sites already include placeholders for the snippet, so paste it once and refresh.G-XXXXXXX ). You'll feed this into your GA4 Configuration tag in the next step.F12 in the sandbox. Every dataLayer push gets logged with a [DL] prefix; every API call with [FETCH] . You can also type window.dataLayer to inspect the full array. This is your single source of truth for debugging.