Element Visibility

A click or pageview isn't the only thing worth measuring, sometimes you want to know an element was actually seen. GTM's Element Visibility trigger watches an element and fires when enough of it scrolls into the viewport.

Here a promo banner sits below the fold. You'll build a visibility trigger on #promo that fires once it's at least 50% on screen.

On a real page nobody hands you that identifier, here's how to find your own. The promo lives on this lesson's live page rather than here, so open that page (or any site) to follow along:

1. Right-click the element you want to track and choose Inspect. Your browser's DevTools open with that element highlighted in the HTML panel.
2. Look at its opening tag for an id attribute, e.g. <div id="promo">. If it has one, that's your identifier: set Selection Method to ID and enter just promo, with no #.
3. No id? Switch Selection Method to CSS Selector and build one from a stable class instead, like .promo-banner. (With the CSS method you keep the # for ids, so #promo works there too.)
4. Test it before you trust it. On a page that has the element, open the Console tab and run document.querySelector('#promo'), if it returns the element instead of null, GTM will find it too.

The most common mistake here is the #: the ID method wants the bare id (promo), while the CSS Selector method wants the hash (#promo). Prefer a stable id or class over an auto-generated selector, it survives redesigns far better.