Tab & Window Visibility

Track when a visitor leaves the page and returns — both when they switch tabs (Page Visibility API) and when they click another window or app (window focus). Push visibility_change with the source and new state.

• Click another window or app and come back (window focus)

Two different APIs: visibilitychange tracks the tab, while window focus/blur tracks the window. The listener covers both, but you can't exercise the tab path here — Tag Assistant opens this lesson in its own tab, so there's no second tab to switch to. Test with the window focus method below; the tab path still fires normally on a real site.

1. Add the visibility listener

   GTM has no built-in trigger for this, so a small Custom HTML tag does the listening and pushes its own event. This one script covers two different signals:

   • Tab visibility — the Page Visibility API (visibilitychange / document.visibilityState) fires when the tab is switched away or the window is minimized.
   • Window focus — the window's focus and blur events fire when another window or app comes forward, even while this page stays on screen.

   1. Go to Tags → New and choose Custom HTML.
   2. Paste the script below into the HTML field. It pushes visibility_change with a visibility_source(tab or window) plus the current state.
   3. Set its firing trigger to All Pages, name it Listener - Visibility, and Save.

   <script>
     (function () {
       window.dataLayer = window.dataLayer || [];
       function pushVisibility(source) {
         window.dataLayer.push({
           event: 'visibility_change',
           visibility_source: source,                          // 'tab' or 'window'
           page_visible: document.visibilityState === 'visible', // tab on screen?
           window_focused: document.hasFocus()                  // window in front?
         });
       }
       // Tab visibility: switching tabs or minimizing the window.
       document.addEventListener('visibilitychange', function () {
         pushVisibility('tab');
       });
       // Window focus: clicking another window or app, even if this page
       // stays visible. Lets you test without opening a second tab.
       window.addEventListener('focus', function () { pushVisibility('window'); });
       window.addEventListener('blur',  function () { pushVisibility('window'); });
     })();
   </script>

2. Create the Custom Event trigger

   1. Go to Triggers → New and choose Custom Event.
   2. Set Event name to visibility_change (it must match the event you pushed).
   3. Name it Event - visibility_change and Save.

3. Capture the state in variables

   Add a Data Layer Variable (a User-Defined variable) for each field you pushed so your tag can report which signal changed and its new state:

   1. Go to Variables → New (under User-Defined Variables) and choose Data Layer Variable.
   2. Create DLV - visibility_source (name visibility_source), DLV - page_visible (name page_visible), and DLV - window_focused (name window_focused).
   3. Save each one.

4. Attach a tag

   1. Go to Tags → New and choose Custom HTML with <script></script> (or your GA4 Event tag). Name it Custom HTML - Test.
   2. Under Triggering, add Event - visibility_change. If it's a GA4 tag, send DLV - visibility_source, DLV - page_visible, and DLV - window_focused as parameters. Then Save.

Open the live version of this lesson, that is the page you point Tag Assistant at. It has the clickable elements next to a live dataLayer, so this page stays clean for reading.

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