A Gallery Of Worked Examples

The four questions only click once you've watched them resolve a few times. Here's the decision applied to interactions you'll actually meet, with the rung it lands on and why.

Interaction              Q that wins   Method                         Rung
-----------------------  -----------   ----------------------------   ----------------
Add to cart (Shopify)    Q1 yes        dataLayer push + CE trigger    1 dataLayer
"Book a demo" button     Q2 yes        Click trigger + CSS selector   2 built-in
Newsletter (HTML form)   Q2 yes        Form Submission trigger        2 built-in
Price shown on PDP       Q3 yes        DOM Element variable (patch)   3 DOM scrape
Calendly booking         Q4 yes        postMessage listener           4 listener
Intercom chat opened     Q4 yes        onShow callback listener       4 listener
Scroll to 75%            Q2 yes        Scroll Depth trigger           2 built-in
Logged-in user_id        Q1 yes        dataLayer push (dev-set)       1 dataLayer

What the gallery teaches

• Most everyday tracking lands on rungs 1 and 2, the durable ones. Listeners are the exception, not the norm.
• Embeds (Calendly, Intercom, a video player) almost always force rung 4, because their interaction happens inside an iframe or a vendor script GTM can't observe.
• A DOM scrape shows up for values that are displayed but never pushed, like a price rendered server-side. Capture it now, ticket the dataLayer push for later.

The same interaction, two sites

"Add to cart" lands on rung 1 for a Shopify store that emits a clean add_to_cart push, but on rung 2 (a Click trigger) for a custom store that doesn't. The interaction didn't change, the available data did. Always choose for the site in front of you, not the textbook.