Declencheur : Element Visibility

Ce qu'on va faire sur cette page

Le declencheur Element Visibility fire quand un element specifique entre dans le viewport (devient visible a l'ecran). Ideal pour tracker si un utilisateur a VU une section importante.

  1. Ouvrir GTM Preview
  2. Scroller doucement - des elements cibles apparaitront au scroll
  3. Observer les events "Element Visibility" dans le Summary
  4. Creer un trigger Element Visibility avec selecteur CSS

Scrolle vers le bas pour faire apparaitre les elements cibles

Le trigger Element Visibility se base sur un selecteur CSS (ID ou classe) pour identifier l'element a surveiller. Quand l'element entre dans le viewport, le trigger fire.

Section Pricing (element surveille #1)

Cet element a l'ID pricing-section. Le trigger Element Visibility avec le selecteur #pricing-section fire quand il devient visible.

Cas d'usage : Savoir combien de visiteurs voient la section prix sur une page de vente.

CTA en bas de page (element surveille #2)

Cet element a l'ID cta-bottom. Tracker la visibilite d'un CTA permet de savoir s'il est vu mais pas clique (probleme de copywriting) ou s'il n'est tout simplement jamais vu (probleme de position).

S'inscrire maintenant

Temoignages (element surveille #3)

ID: social-proof. Savoir si les visiteurs voient les temoignages aide a determiner si la preuve sociale est bien positionnee sur la page.

Configuration GTM du Element Visibility 
// Configuration du trigger Element Visibility dans GTM :
//
// Type : Element Visibility
// Selection Method : ID (plus fiable) ou CSS Selector
// Element ID : "pricing-section"
//
// Options :
// - "Observe DOM changes" : cocher si l'element est charge dynamiquement (AJAX, SPA)
// - "Fire this trigger" : "Once per page" (pour eviter les doublons si l'user scrolle up/down)
// - "Minimum Percent Visible" : 50 (l'element doit etre visible a 50% minimum)
//
// Variables automatiques :
// - Percent Visible : pourcentage de l'element visible
// - On-Screen Duration : temps de visibilite

// Pour tracker plusieurs elements avec UN seul trigger :
// Selection Method : CSS Selector
// CSS Selector : ".tracked-section"
// -> Fire pour chaque element avec la classe "tracked-section"

Cas d'usage courants

E-commerce : l'utilisateur a-t-il vu les avis clients ? La section garantie ?
Lead gen : le formulaire en bas de page est-il vu ? Le CTA principal ?
Content : les lecteurs voient-ils la fin de l'article ? L'encart newsletter ?