Lesson 2 of 7
Modal Open / Close
① 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 modal opening and closing is pure UI state, invisible to GTM unless the page says something. Here the dialog pushes modal_open when it appears and modal_close when it's dismissed, and each push carries a modal_id so you know which dialog.
That gives you the standard event toolkit in miniature: a Custom Event trigger per event, and a Data Layer Variable to lift the modal_id out of the push so it can ride along on your tag. Open rate versus close rate per modal is a genuinely useful signal.
Goal
Build Custom Event triggers for modal_open and modal_close, and a Data Layer Variable for modal_id.
Build it in GTM
Trigger for modal_open
Triggers → New → Custom Event, event namemodal_open.Trigger for modal_close
Repeat with a second Custom Event trigger, event namemodal_close. Two events means two triggers.Capture the modal_id
Variables → New → Data Layer Variable, Data Layer Variable Namemodal_id. Now{{DLV - modal_id}}returnsdemoon each push.Fire a tag on both
Add a tag (a GA4 Event tag, or theCustom HTML - Teststand-in) and set both triggers as its firing triggers, sending{{DLV - modal_id}}as a parameter.
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
modal_open then modal_close appear in Tag Assistant, each with modal_id = demo, and your tag fires on both.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