Track Disappearing Elements with Google Tag Manager

CSS selectors are one of the most flexible methods for creating triggers in Google Tag Manager. You can usually view the CSS selector for an element by opening the developer console (F12 on Windows/Linux or option + ⌘ + J on OSX) and clicking the inspect elements icon, or just hovering over the element and right-clicking Inspect.

In some cases, however, this method hits a block because the element immediately disappears when you remove focus from it. This happens on items like pop-up modals, drop-down menus, and so on, preventing you from knowing what CSS selectors will access the menu options in their active, selected  state.

STEP 1: PAUSE SCRIPT EXECUTION

For this example, there's a site with a drop-down menu that immediately disappears when you try to inspect it.

To resolve this you can delay JavaScript execution and view the source code by doing the following:

1. Open your page
2. Open the dev console (F12 on Windows/Linux or option + ⌘ + J on OSX)
3. Select the Console tab in Chrome Developer Tools
4. Enter this into the Console and press return:

   setTimeout(function(){debugger;}, 5000)

5. In the web browser window, click or hover over the desired element to initiate the drop-down action
6. Wait 5 seconds without doing anything and the script will automatically pause.
7. Go to the Elements tab in Developer Tools
8. Look for your element there or click the inspect elements icon to directly access your drop-down menu elements within the HTML

STEP 2: CREATE THE CSS SELECTOR-BASED TRIGGER IN GTM

So now we can create a CSS-selector based trigger using the elements you see here as well as useful elements further up the DOM (while the script is paused, the whole structure can be viewed in the Elements tab). A good strategy is to use a selector for the entire industry block as well as the selector for the specific clicked element, leading to something like this:

Trigger = Click Element matches CSS selector .filter-industry.Select-option, .filter-industry.Select-option *

(adding the wildcard to capture elements nested inside the .Select-option class)