Don't have one? Create one ↗
← All courses

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

  1. Trigger for modal_open

    Triggers → New → Custom Event, event name modal_open.
  2. Trigger for modal_close

    Repeat with a second Custom Event trigger, event name modal_close. Two events means two triggers.
  3. Capture the modal_id

    Variables → New → Data Layer Variable, Data Layer Variable Name modal_id. Now {{DLV - modal_id}} returns demo on each push.
  4. Fire a tag on both

    Add a tag (a GA4 Event tag, or the Custom HTML - Test stand-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.

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

What you should expect to see

Open and close the modal on the live page: 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

0 of 7 lessons complete