Hands-on module
Events, forms & navigation
Capture the right events from messy real sites: virtual pageviews, async loads, UI state and multi-step form progress.
Beyond clicks and pageviews, real sites navigate without reloading and fire events asynchronously, with stateful UI like tabs, forms and video. This module captures all of it as events you can tag.
You'll turn single-page-app navigations into virtual pageviews with History Change, then trigger on async loads, tab changes, form submissions and progress, a native video, and the split between form_start and form_submit.
What you'll learn
- Catch in-app navigation with the History Change trigger
- Trigger on events pushed after asynchronous loads
- Capture UI state (tabs) and form progress as events
- Track a native HTML5 video, and split form_start from form_submit
Lessons
- 1→
The Site You Inherit, Not The One You Planned
Most real sites have no plan and no clean dataLayer. Your job shifts from design to investigation.
- 2→
See What's Actually In The DataLayer
Inventory the events and values a page really emits before you decide anything.
- 3→
Too Many Events — Which One Do I Pick?
Duplicate submits are normal. Choose on reliability, richness and whether you can target it.
- 4→
Targeting Exactly One Event
Find a value that distinguishes the case you want, and build the trigger condition on it.
- 5→
When The Data You Need Isn't In The Event
The event fires but the value is missing. Find where it lives and read it from there.
- 6→
Stitching Values Across Events & The Timing Traps
Race conditions, overwritten values and the navigation gotcha — and how to survive them.
- 7→
DOM Scraping, The Safe Way
When nothing is in the dataLayer, read the page — carefully, defensively, and as a last resort.
- 8→
Patch It Now, Or Fix The Source?
The judgment call between a quick capture and requesting a proper dataLayer push.
- 9→
A Field Playbook
A repeatable checklist for any 'just capture X' request on a site you don't control.
- 10→
SPA Virtual Pageviews
Navigation that changes the URL with no reload, capture it with History Change.
- 11→
AJAX / Async Events
Trigger on an event pushed after a simulated fetch resolves.
- 12→
Tabs & Accordions
Push tab_change events and read the active tab with a variable.
- 13→
Form Submission
A newsletter form that emits a form_submit event, capture the lead without losing it.
- 14→
Multi-Step Form Progress
Track step_view events across a 3-step wizard.
- 15→
HTML5 Video
Track a native <video> element, play, progress and complete.
- 16→
Form Start & Submit
Fire form_start on first interaction and form_submit on submit.
- 17→
Events, Forms & Navigation: Recap And Verify
Recap every lesson, then check your whole container in one pass.