Lesson 12 of 17

Tabs & Accordions

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

A lot of what users do on a page never changes the URL and never reloads anything. Switching tabs, opening an accordion or flipping a toggle are pure UI state, invisible to a Page View trigger. Yet knowing which tab people actually open, Features versus Reviews, is real behavioural insight.

The page turns that UI state into an event you can measure. Each tab switch pushes tab_change along with a tab_name, and you catch it with a Custom Event trigger, capturing the name so your tag knows which tab won.

Goal

Fire a tag on each tab switch by listening for the tab_change event.

Build it in GTM

Know what the page pushes
Switching tabs runs dataLayer.push({ event: "tab_change", tab_name: "Reviews" }). GTM sees the event name tab_change and a tab_name value carrying the chosen tab.
Create the Custom Event trigger
Go to Triggers → New and choose Custom Event. Set Event name to tab_change, matching the pushed string exactly.
Capture the tab name
Add a Data Layer Variable with Data Layer Variable Name tab_name so you can send it as a parameter and report on which tabs get the most attention.
Fire a tag on it
Set the trigger as your tag's firing trigger and map your tab_name variable in. On a real site this is a GA4 Event tag; here a Custom HTML tag named Custom HTML - Test containing <script></script> stands in.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

In your GTM, click Preview.
Paste the live URL above and click Connect.
Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Click through the tabs and watch Tag Assistant: a tab_change event appears for each switch, your tag shows under Tags Fired, and the tab_name value updates to the tab you opened.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 17 lessons complete