GTM and GA4 —
using real data
Two sites connected to a real backend. You've got a landing page with forms and API endpoints, plus a shop with a full e-commerce checkout flow. We've pushed everything to the dataLayer — your job is to catch it.
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.
Five steps to your first event
Take these in order. Each step unlocks the next one.
Spin up a new container in tagmanager.google.com. Copy the snippet and paste it into both pages — search for the TRAINING TASK #1 comment in the HTML.
Set up a standalone GA4 property, or just use DebugView in an existing one. Add your G-XXXXXXX config tag.
F12 → Console. We log every event with a [DL] prefix, and fetch requests with [FETCH]. This is your primary debugging tool.
Hit Preview and enter the sandbox URL. Map what you see in the console to what shows up in the Preview panel.
Start at ★ (basic page_view) and work your way up to ★★★★ (custom dimensions, e-commerce funnels). Every task represents a real-world analytics problem.