De trigger 'Zichtbaarheid van element' in Google Tag Manager

Met de trigger Zichtbaarheid van element (Element Visibility) in Google Tag Manager laat je een tag afgaan zodra een element in het kijkvenster (viewport) van de browser komt. Dat kan gebeuren door het laden van de pagina, door scrollen, doordat een tabblad naar de voorgrond komt of doordat code het element verplaatst of toont. Je selecteert het element op ID of met een CSS-kiezer en stelt in hoeveel procent zichtbaar moet zijn (standaard 50%).

Waar een kliktrigger reageert op een handeling, meet deze trigger wat er in beeld komt. Denk aan een succesmelding na een formulier zonder bedankpagina, of een CTA-blok dat echt gezien wordt.

Trigger Zichtbaarheid van element (Element Visibility) aanmaken in GTM

1. Ga naar Triggers → Nieuw → Triggerconfiguratie en kies Zichtbaarheid van element.
2. Kies bij Selectiemethode (Selection Method) ID of CSS-kiezer (CSS Selector) en vul de waarde in.
3. Kies hoe vaak de trigger mag afgaan.
4. Stel onder de geavanceerde opties het percentage, de schermduur en eventueel DOM-wijzigingen waarnemen in.
5. Beperk de trigger via Deze trigger wordt geactiveerd voor → Bepaalde … (Some …), bijvoorbeeld op Paginapad.

ID of CSS-kiezer

Met ID selecteer je één element op basis van het id-attribuut. Komt dezelfde ID meerdere keren voor, dan activeert alleen het eerste element de trigger. Een CSS-kiezer kan meerdere elementen selecteren, bijvoorbeeld .cta-blok of form .succesmelding.

Gebruik je een minimale schermduur of DOM-observatie, dan houdt GTM de status van elk geselecteerd element bij. Bij een kiezer die veel elementen matcht, kost dat paginaprestaties. Selecteer dus op ID of met een smalle kiezer.

Hoe vaak de trigger afgaat

• Eenmaal per pagina (Once per page): één keer per pagina. Bij meerdere matches gaat de trigger alleen af voor het eerste element dat zichtbaar wordt.
• Eenmaal per element (Once per element): één keer per geselecteerd element. Met een CSS-kiezer krijg je dus een event voor elk element dat voor het eerst in beeld komt.
• Elke keer dat een element op het scherm wordt weergegeven (Every time an element appears on-screen): telkens opnieuw, door scrollen of door code.

Bij herladen of navigatie naar een andere pagina wordt de trigger gereset.

Dubbele ID met DOM-observatie

Staat DOM-wijzigingen waarnemen aan en verwijdert een DOM-wijziging het eerste element met een dubbele ID, dan kan de trigger bij Eenmaal per element opnieuw afgaan op het volgende element.

Half in het kijkvenster (50%) activeert de trigger. Schermduur telt cumulatief: periodes in beeld worden opgeteld.

Percentage, schermduur en DOM-wijzigingen

Minimum percentage zichtbaar (Minimum Percent Visible) staat standaard op 50. Is een element hoger dan het viewport, dan haalt het die drempel mogelijk nooit; kies dan een lager percentage.

Met Minimum schermduur instellen (Set minimum on-screen duration) moet het element een bepaalde tijd zichtbaar zijn. Standaard staat dit uit. De duur is cumulatief per paginaweergave: 5.000 ms in beeld, even uit beeld en weer 5.000 ms in beeld telt als 10.000 ms.

Elementen die pas na het laden in de DOM komen, zoals een succesmelding die via JavaScript wordt ingevoegd, volgt de trigger alleen met DOM-wijzigingen waarnemen (Observe DOM changes).

Triggertype:               Zichtbaarheid van element
Selectiemethode:           CSS-kiezer → .cta-blok
Activeren:                 Eenmaal per element
Minimum % zichtbaar:       50
Minimum schermduur:        aan, 1000 ms
DOM-wijzigingen waarnemen: uit (alleen aan als .cta-blok later in de DOM komt)
Geactiveerd voor:          Bepaalde … → Paginapad bevat /diensten/

Variabelen bij de trigger

Als de trigger afgaat, vult GTM twee ingebouwde variabelen uit de categorie Zichtbaarheid. Die moet je eerst aanzetten:

Percentage zichtbaar (Percent Visible)  → gtm.visibleRatio  (0-100)
Schermduur (On-Screen Duration)         → gtm.visibleTime   (milliseconden)

Wil je meesturen welk element in beeld kwam, gebruik dan een Variabele voor automatische gebeurtenissen (Auto-Event Variable) van het type Element ID, Element Classes of Element Text.

De variabele Zichtbaarheid van element

Er bestaat ook een door de gebruiker gedefinieerde variabele met dezelfde naam. Die meet één element en geeft Waar/onwaar of een Percentage terug op het moment dat je hem uitleest. Handig als voorwaarde in een andere trigger, bijvoorbeeld een klik die alleen telt als een bepaald blok in beeld is.

Testen in de Preview-modus

Start de Preview-modus via Voorbeeld → URL invullen → Verbinding maken en scrol naar het element. In Tag Assistant zie je de zichtbaarheidsgebeurtenis in de tijdlijn, welke tags erop afgingen en de waarden van Percentage zichtbaar en Schermduur. Komt er geen gebeurtenis, controleer dan je kiezer in de console met document.querySelectorAll('.cta-blok').

De trigger vervangt geen scrolltracking. Hij vertelt dat een element in beeld was, niet dat iemand de inhoud heeft gelezen.