CSTC : Aperçu des déclencheurs

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l’élément ou les éléments dont vous souhaitez détecter la visibilité ainsi que la fréquence à laquelle vous souhaitez le faire.

Comment cela fonctionne

Le déclencheur utilise l’API IntersectionObserver pour détecter quand des éléments deviennent visibles dans la fenêtre d’affichage (votre navigateur). Cela peut être le résultat du scroll qui amène l’élément dans la vue, de l’apparition de l’élément en tant que pop-up, ou de sa sélection parmi des éléments qui se chevauchent (comme du contenu à onglets sur une page).

• Le déclencheur s’exécute au chargement de la page lorsque le tag de Contentsquare se charge pour la première fois, et vérifie si l’élément en question est présent. S’il est trouvé, il commence à observer l’élément ou les éléments pour détecter s’ils deviennent visibles.
• Le déclencheur NE se déclenchera PAS si l’élément ou les éléments en question sont déjà visibles lorsque la page se charge initialement. Ceux-ci seront ignorés.
• Le déclencheur est abonné à MutationObserver, il détecte donc également la visibilité des nœuds nouvellement ajoutés qui correspondent aux sélecteurs.
• Le déclencheur dispose de 2 paramètres pour spécifier si le déclencheur doit se déclencher une seule fois ou plusieurs fois lors d’un chargement « naturel » de page donné (lorsqu’une nouvelle page est demandée au serveur) :
  1. Déclencher à chaque fois qu’un élément correspondant au sélecteur devient visible dans la fenêtre d’affichage
     • Si vous souhaitez déclencher pour plusieurs éléments sur une page donnée, ou si la page en question est une Page unique (SPA), il est recommandé de sélectionner ce paramètre.
  2. Déclencher au maximum une fois par pages vues lorsqu’un élément correspondant au sélecteur devient visible dans la fenêtre d’affichage.

Limitations

• Element Becomes Visible ne vérifie pas la visibilité des éléments imbriqués (enfants et descendants).
• Les éléments rendus visibles via la propriété CSS background-color ne sont pas considérés comme visibles : si un élément a un texte invisible mais un arrière-plan visible, il est traité comme invisible.

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l'élément ou les éléments dont vous souhaitez détecter la présence.

Comment cela fonctionne

• Le déclencheur s'exécute lorsque le tag de Contentsquare se charge lors du chargement de la page.
• Le déclencheur vérifie la présence des éléments spécifiés en utilisant la méthode document.querySelector().
• La variable ${element} référant l'élément cible est accessible depuis la fonctionnalité d'Interpolation.
  • Par exemple, vous pouvez récupérer son texte en utilisant ${element.textContent} dans le champ de valeur de certains snippets (Événement de page, Variable dynamique, etc.).

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l’élément ou les éléments dont vous souhaitez détecter l’ajout/insertion ainsi que la fréquence à laquelle vous souhaitez le faire.

Comment cela fonctionne

• Le déclencheur est abonné à MutationObserver et vérifie si les nœuds insérés correspondent au sélecteur fourni.
• Contrairement au déclencheur Element Exists, celui-ci ne se déclenchera pas pour les éléments préexistants sur la page (au moment où le tag de Contentsquare s’exécute pour la première fois lors du chargement de la page).
• Le déclencheur dispose de 2 paramètres pour spécifier si le déclencheur doit se déclencher une seule fois ou plusieurs fois lors d’un chargement « naturel » de page donné (lorsqu’une nouvelle page est demandée au serveur) :
  1. Une fois par pageview
  2. Chaque fois que l’élément est inséré dans une pageview
     • Si vous souhaitez déclencher pour plusieurs éléments sur une page donnée, ou si la page en question est une Page unique (SPA), il est recommandé de sélectionner ce paramètre.
• La variable ${element} référant l’élément cible est accessible depuis la fonctionnalité d’Interpolation.
  • Par exemple, vous pouvez récupérer son texte en utilisant ${element.textContent} dans le champ value de certains snippets (Événement de page, Variable dynamique, etc.).

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l’élément ou les éléments dont vous souhaitez détecter la suppression.

Comment ça fonctionne

• Le déclencheur est abonné à MutationObserver et vérifie si les nœuds supprimés correspondent au sélecteur fourni.
• La variable ${element} référant l’élément cible est accessible depuis la fonctionnalité d’Interpolation.
  • Par exemple, vous pouvez récupérer son texte en utilisant ${element.textContent} dans le champ valeur de certains snippets (Page Event, Variable dynamique, etc.).

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l’élément ou les éléments sur lesquels vous souhaitez détecter les clics ou taps.

Comment ça fonctionne

• Le déclencheur s’appuie sur le Click Event.
• La variable ${element} référant l’élément cible est accessible depuis la fonctionnalité d’Interpolation.
  • Par exemple, vous pouvez récupérer son texte en utilisant ${element.textContent} dans le champ valeur de certains snippets (Page Event, Variable dynamique, etc.).

Configuration

Contentsquare distingue 2 types de pages vues et ce snippet vous permet de choisir si vous souhaitez qu’il s’exécute sur l’un d’eux ou sur les deux, selon le cas d’usage :

• Naturelle - lorsqu’une page est chargée « à partir de zéro » après une requête GET/POST et une réponse du serveur. C’est ainsi que la plupart des sites web sont construits. En général, le tag de Contentsquare est injecté sur chaque page que vous souhaitez suivre et déclenche la page vue lorsqu’elle est chargée et rendue.
• Artificielle - conçue pour « décomposer / diviser » les parcours visiteurs sur les Single Page Applications (sites web entiers ou flux visiteurs spécifiques) en pages/étapes individuelles. Peut également être utilisée pour désigner les pop-ups modaux ou toute autre expérience utilisateur comme une étape distincte pour une analyse Journey Analysis et un reporting plus granulaires.

Comment cela fonctionne

• Il est déclenché immédiatement avant qu’une nouvelle page vue soit envoyée à Contentsquare.
• Ce déclencheur est particulièrement utile pour les variables custom qui doivent être définies avant que la page vue suivante ne soit déclenchée afin d’être correctement associées à celle-ci.
• C’est également le seul déclencheur disponible pour tous les templates de masquage/démasquage car ils doivent aussi être configurés avant la page vue « Naturelle » initiale.

Directives pour les conditions de déclenchement

Lorsqu’il est utilisé à des fins de masquage, vous devez toujours configurer ce déclencheur pour qu’il se déclenche sur « Toutes les Pages » afin de garantir que les sélecteurs CSS de masquage soient définis avant le chargement du tag CS principal. Les conditions de déclenchement « Personnalisées » peuvent être utilisées pour les templates non liés au masquage, comme les variables custom.

Configuration

Le déclencheur est défini en utilisant un sélecteur CSS pour référencer l’élément <form> dont vous souhaitez détecter les envois.

Comment cela fonctionne

Le déclencheur écoute l’événement submit déclenché lorsqu’un <form> est envoyé.

Contentsquare distingue 3 types de pages vues :

• Pages vues naturelles - lorsqu'une page est chargée « à partir de zéro » après une requête GET/POST et une réponse du serveur. C'est ainsi que la plupart des sites web sont construits. En général, le tag de Contentsquare est injecté sur chaque page que vous souhaitez suivre et déclenche la page vue lorsqu'elle est chargée et rendue.
• Pages vues artificielles - conçues pour « décomposer / diviser » les parcours des visiteurs sur les Pages uniques (sites web entiers ou flux spécifiques de visiteurs) en pages/étapes individuelles. Peut également être utilisé pour désigner les pop-ups modaux ou toute autre expérience utilisateur comme une étape distincte pour une analyse de parcours et un rapport plus granulaires.
• Pages vues de renouvellement - lorsqu'une session se termine après plus de 30 minutes d'inactivité sur une page/onglet, mais est ensuite relancée lorsque la page est à nouveau utilisée. Une nouvelle session visiteur est créée avec une nouvelle page vue envoyée de ce type.

Configuration

• Le déclencheur permet de sélectionner quelles combinaisons de changements d’historique vous souhaitez que le snippet déclenche :
  • pushState - une méthode pour changer les URL dans les applications à page unique tout en conservant l’URL précédente pour la navigation arrière.
  • replaceState - une méthode pour changer les URL dans les applications à page unique tout en écrasant l’URL précédente pour empêcher la navigation arrière.
  • popstate - un événement déclenché lors de l’utilisation du bouton retour du navigateur.
  • hashchange - un événement déclenché lorsque l’identifiant de fragment de l’URL change.
• De plus, vous pouvez définir une fenêtre de debounce (jusqu’à 400 ms) pour éviter plusieurs déclenchements dans les cas où plusieurs changements d’historique se produisent en succession rapide. Un déclencheur de changement d’historique avec debounce ne prendra en compte que le dernier événement et ignorera les premiers, ce qui signifie qu’un événement avec debounce se déclenchera jusqu’à 400 ms après que l’événement ait réellement eu lieu.

Comment cela fonctionne

Avant de déclencher, il vérifie si la nouvelle URL vers laquelle vous vous déplacez est différente de celle d’où vous venez et ne se déclenchera que si les URL nouvelle et précédente ne sont pas identiques.

Sélection des écouteurs

• La combinaison recommandée lorsqu’elle est utilisée pour les Artificial Pageviews sur les sites à page unique (ou leurs sections) avec des changements d’URL est pushState + popstate.
• Inclure replaceState peut entraîner des déclenchements indésirables, provoquant des Artificial Pageviews supplémentaires.

Configuration

Le déclencheur est défini en utilisant un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l’élément ou les éléments sur lesquels vous souhaitez détecter les survols.

Comment cela fonctionne

• Le déclencheur repose sur l’événement mouseover.
• Nous utilisons également la méthode element.closest pour vérifier si l’élément survolé est imbriqué à l’intérieur de l’élément sélectionné afin d’éviter qu’il ne se déclenche plusieurs fois lors d’un seul survol.