Hands-on module
Variables that shape data
Pick how you'll read data, then reach into the dataLayer and the DOM and clean and map values with tables and custom JS.
Real data is rarely GA4-shaped. This module is about reading it wherever it lives, the dataLayer, the DOM, cookies and web storage, and then cleaning and mapping it with GTM's variable types so your tags get exactly the values they need.
You'll read nested dataLayer values with dot notation, scrape the DOM, normalise messy strings with Custom JavaScript, bucket values with Lookup and RegEx tables, read cookies and storage, and reshape a whole order into GA4's items array.
What you'll learn
- Read nested dataLayer values with dot-notation Data Layer Variables
- Scrape the DOM and clean messy values with Custom JavaScript
- Map and bucket values with Lookup Table and RegEx Table variables
- Read cookies and web storage, and reshape data into GA4's ecommerce shape
Lessons
- 1→
Too Many Ways To Track One Thing
Why beginners stall, and how a framework fixes it.
- 2→
The Reliability Ladder
Prefer methods in this order, top to bottom.
- 3→
The Four-Question Decision
Ask these in order and the method picks itself.
- 4→
Tie-Breakers & Trade-Offs
Speed now vs. durability later, and when to escalate.
- 5→
A Gallery Of Worked Examples
The framework run across eight everyday interactions.
- 6→
The One-Page Cheat Sheet
The whole framework, plus naming what you capture.
- 7→
Data Layer Variables
A rich, nested dataLayer, read it with dot-notation variables and a custom event.
- 8→
Scrape Data From The DOM
Product details live only in the markup, no dataLayer. Build variables that read them.
- 9→
Normalize DOM Data
Use a Custom JS variable to clean a messy price string into a number.
- 10→
Lookup Table Variable
Map a path to a page category with a Lookup Table variable.
- 11→
RegEx Table Variable
Bucket URLs into values with a RegEx Table variable.
- 12→
1St-Party Cookie Variable
Set a cookie and read it back with a 1st-Party Cookie variable.
- 13→
LocalStorage & SessionStorage
Persist client-side state in web storage and read it with a Custom JS variable.
- 14→
Reshape Data For GA4 (Custom JS)
Map a messy order dataLayer into GA4's ecommerce items array with a Custom JavaScript variable.
- 15→
Variables That Shape Data: Recap And Verify
Recap every variable, then check your whole container in one pass.