Gestion des événements

Rappel. ー Lorsque le tag principal est chargé, notre outil va enregistrer et transmettre la plupart des interactions qui ont lieu sur la page : ces survols et ces clics seront ainsi traités pour vous donner des **indicateurs UX **sur les éléments qui composent la page.

Principes généraux

Mise en place

Les événements sont automatiquement et systématiquement enregistrés dès lors que :

le tag principal est chargé,
que l’internaute a été inclus dans l’analyse
et que le contenu est chargé (événement DOMContentLoaded).

Evénements enregistrés

Le tag Contentsquare enregistre les événements suivants :

Clics — click, pointerdown, pointerup sur tous les éléments
Survols — mouseover, mouseout sur les éléments <a>, <button>, <select>, <input>, <textarea>
Focus - focus, blur, change sur les éléments <input>, <textarea> et <select>
Redimensionnements - window.resize
Mouvements de souris — scroll, pointermove sur tous les éléments

Il associe chacun des événements à un horodatage et à un bloc de la page (c’est-à-dire une balise HTML).

Comment est identifié la balise

Pour cibler un bloc dans le DOM, notre outil remonte toute la chaîne des parents de l’élément jusqu’à trouver la première balise qui a un id (s’il n’a pas été ignoré, voir plus loin). Si aucun id n’est trouvé dans les éléments parents, il remonte jusqu’à la balise <html>. Il redescend ensuite en comptant à chaque fois la position du tag parmi les balises identiques.

Les éléments pris en compte pour le ciblage sont soulignés.

Sur ces 2 exemples, les deux blocs pointés seront identifiés comme étant identiques et les données d’interactions seront assimilées.

Les “id” ignorés

Plusieurs occurrences d’un même ID

Le Tracking Tag applique les specs du W3C : “un id doit être unique dans l’arbre du DOM d’une page web”. Si un ID n’est pas unique, le tag ignorera toutes ses occurrences.

Plusieurs IDs pour un même bloc

Certains sites utilisent des id dynamiques dont la valeur change selon les pages d’un même template. Cela nous empêche d’agréger les données sur ces éléments dans l’application.

Aussi, certaines balises dont on souhaite différencier l’analyse peuvent être placées sous un même “id”.

Pour répondre à ces 2 problématiques, nous excluons :

les ids qui ont 4 chiffres consécutifs,
les éléments qui ont un attribut data-cs-override-id vide (voir paragraphe suivant).

Les éléments pris en compte pour le ciblage sont soulignés.

Sur cet exemple, l’identifiant “product2134” est ignoré ; c’est son parent qui sera considéré.

Target d’origine : div#products2134>p>img => ne permet pas l’agrégation des données

Target avec id dynamique détecté : div#wrap>div>p>img => permet l’agrégation des données

Ignorer, remplacer ou ajouter un “id”

Si vous avez besoin de différencier un bloc dans la solution, vous pouvez définir un ID qui sera utilisé par notre mécanisme de collecte des événements présenté ci-dessus.

Vous devez juste utiliser l’attribut data-cs-override-id, avec une valeur d’ID valide (les caractères autorisés sont a à z, A à Z, 0 à 9, - et _). Assurez-vous que cette valeur est statique et ne change pas d’une URL à une autre (pas d’ID dynamique)

Cet attribut peut être ajouté à n’importe quelle balise HTML : <div>, <p>, <form>, <a> et ainsi de suite.

Il doit être ajouté au code HTML, soit dans le code original, soit après l’événement “DOM Ready” (DOMContentLoaded) en JavaScript.

<div class="cta"></div>
<div class="main_cta" data-cs-override-id="main_cta"></div>
<div class="cta"></div>
<div class="cta"></div>

Vous pouvez aussi indiquer qu’un ID doit être ignoré, par exemple parce que cet ID différencie des blocs qui sont cependant de même nature.

<div class="product"></div>
<div class="product" id="<IDENTIFIER_TO_IGNORE>" data-cs-override-id></div>
<div class="product"></div>
<div class="product"></div>

Obtenir la hauteur de la page et le taux de défilement sur un élément HTML spécifique

Le tracking Tag écoute les événements de scroll sur le document et obtient la hauteur du document pour calculer les mesures de Hauteur de la page, Taux de scroll et Taux d’exposition. Ces statistiques seront erronées sur les pages pour lesquelles :

la hauteur du document est égale à la hauteur de la fenêtre
et le défilement se produit dans un élément HTML d’une hauteur supérieure à celle du document.

Afin d’obtenir des métriques précises, ajoutez l’attribut data-cs-scroll-container sur l’élément HTML spécifique gérant les événements de défilement. Il peut être ajouté au code HTML d’origine ou après l’événement “DOM Ready” (DOMContentLoaded) en JavaScript.

Lors de la liaison des gestionnaires d’événements, le tracking Tag détectera la présence d’un élément avec l’attribut data-cs-scroll-container dans le DOM. Si un tel élément est trouvé, le tracking Tag n’écoutera plus les événements de défilement et la hauteur de page sur le document, mais sur cet élément HTML spécifique à la place. Il utilisera sa hauteur (et son padding-top) pour calculer la hauteur de la page, la vitesse de défilement et les mesures d’exposition.

<html>
  <head>...</head>
  <body>
    <div>...</div>
    <div class="main">
      <div class="scrollable" data-cs-scroll-container>...</div>
    </div>
  </body>
</html>

Quel code HTML est compatible ?

La solution est faite pour fonctionner sur tous les sites internet “normalement” développés. Voici quelques règles ; elles sont pour la plupart issues de normes de développements usuelles.

Commencer chaque page par le doctype <!DOCTYPE html>.
N’utiliser qu’un seul “id” par page, pour désigner un bloc fonctionnel.
Si un id ou une class contient plusieurs mots, utilisez des séparateurs valides (-, _) ou le camel case: utilisez addToCart ou add-to-cart au lieu d’addtocart et addtoCart.
Ne pas utiliser des “id” aléatoires ou qui changent suivant les contenus ou les sessions.
Utiliser des “id” valides : pas d’espace, pas de “quote”.

Utiliser une hiérarchie de l’information cohérente : au sein d’un même tag, ne mettre que des éléments de même nature.

Ne pas écrire	`<div class="category"> <div class="product"></div> <div class="product"></div> <div class="product"></div> <div class="paging"></div> </div>`
Écrire plutôt	`<div class="category"> <div class="list"> <div class="product"></div> <div class="product"></div> <div class="product"></div> </div> <div class="paging"></div> </div>`

Ne pas écrire

<div class="category">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="paging"></div>
</div>

Écrire plutôt

<div class="category">
  <div class="list">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
  </div>
  <div class="paging"></div>
</div>

Fermer toutes les balises ouvertes ; ne pas fermer la balise d’un élément parent avant d’avoir fermé tous ses enfants.
Pour faciliter l’envoi de “pageviews”, il est préférable d’avoir un changement d’URL à chaque changement majeur de l’interface.

Vérifier l’envoi des événements

Stockage et performance

Pour ne pas altérer les performances d’affichage, chaque interaction n’est pas envoyée au fur et à mesure. Nous stockons l’ensemble des interactions en local storage dans le navigateur de l’internaute puis envoyons régulièrement par paquet les événements collectés.

La requête envoyée

Vous constaterez régulièrement des requêtes GET vers //c.contentsquare.net/events qui seront envoyées avec une version encodée des derniers événements.

Les requêtes pour les événements sont envoyées quand :

le nombre d’événements en mémoire atteint 50
la page est rechargée
l’utilisateur quitte la page via une redirection vers une autre page, une fermeture ou basculement d’onglet, une fermeture du navigateur, un basculement vers une autre application, un verrouillage d’écran, etc. (les déclencheurs varient selon le type de navigateur et d’appareil)