Declencheur : DOM Ready

Ce qu'on va faire sur cette page

Observer quand le declencheur DOM Ready fire par rapport au Page View. Cette page contient des images lourdes et du contenu dynamique pour bien voir la difference.

  1. Ouvrir GTM Preview
  2. Comparer les timestamps de "Page View" et "DOM Ready" dans le Summary
  3. Creer un tag Custom HTML qui s'execute au DOM Ready (ex: modifier un texte)
  4. Observer que le tag fire APRES que le HTML soit parse

Cette page contient du contenu charge dynamiquement. Le DOM Ready fire quand le HTML est parse - AVANT que les images soient chargees.

Contenu statique (disponible au DOM Ready)

Ce texte est disponible des le DOM Ready. Un tag GTM peut le lire et le modifier a ce moment-la.

Images (chargees APRES le DOM Ready)

Image demo 1 Image demo 2 Image demo 3

Ces images se chargent apres le DOM Ready. Le Window Loaded fire une fois qu'elles sont toutes la.

Tag Custom HTML - Declencheur DOM Ready 
// Exemple de tag Custom HTML qui s'execute au DOM Ready
// Ce tag modifie le contenu d'un element APRES que le DOM soit parse

<script>
  (function() {
    var el = document.getElementById("dom-ready-text");
    if (el) {
      // Le DOM est pret, on peut manipuler les elements
      console.log("DOM Ready - element trouve :", el.textContent);
    }
  })();
</script>

Quand utiliser DOM Ready ?

Utilise DOM Ready quand ton tag a besoin de lire ou modifier des elements HTML de la page. Si tu utilises Page View a la place, l'element pourrait ne pas encore exister dans le DOM et ton script plantera.