Aperçu des déclencheurs

Configuration

Le déclencheur est défini à l'aide d'un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l'élément/s dont vous souhaitez détecter la visibilité et la fréquence à laquelle vous souhaitez le faire.

Comment cela fonctionne

Le déclencheur utilise l'API IntersectionObserver pour détecter quand les éléments deviennent visibles dans le viewport (la fenêtre de votre navigateur). Cela peut être le résultat du défilement de l'élément dans la vue, de l'apparition de l'élément sous forme de pop-up, ou d'une sélection parmi des éléments superposés (comme du contenu à onglets sur une page).

• Le déclencheur est exécuté au chargement de la page lorsque la balise 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/s pour détecter s'ils deviennent visibles.
• Le déclencheur ne se déclenchera PAS si l'élément/s en question est/sont déjà visible(s) lorsque la page se charge pour la première fois. 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 a 2 paramètres pour spécifier si le déclencheur doit se déclencher une fois ou plusieurs fois lors d'un chargement de page "naturel" 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 le viewport
     • Si vous souhaitez déclencher pour plusieurs éléments sur une page donnée, ou si la page en question est une application à page unique (SPA), il est recommandé de sélectionner ce paramètre.
  2. Déclencher au maximum une fois par vue de page lorsque qu'un élément correspondant au sélecteur devient visible dans le viewport.

Limitations

• L'élément devient visible ne vérifie pas la visibilité des éléments imbriqués (éléments enfants et descendants).
• Les éléments rendus visibles par la propriété CSS background-color ne sont pas considérés comme visibles : Si un élément a un texte invisible mais un fond visible, il est traité comme invisible.

Configuration

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

Comment ça fonctionne

• Le déclencheur est exécuté lorsque la balise Contentsquare se charge pendant le 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érencant l'élément cible est accessible depuis la fonctionnalité d'Interpolation.
  • Par exemple, vous pourriez récupérer son texte en utilisant ${element.textContent} dans le champ de valeur de certains extraits (Événement de Page, Variable Dynamique, etc.).

Configuration

Le déclencheur est défini à l'aide d'un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l'élément/s dont vous souhaitez détecter l'ajout/l'insertion et la fréquence à laquelle vous souhaitez le faire.

Comment ça 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 Élément Existe, celui-ci ne se déclenchera pas pour les éléments préexistants sur la page (au moment où la balise Contentsquare s'exécute pour la première fois lors du chargement de la page).
• Le déclencheur a 2 paramètres pour spécifier si le déclencheur doit se déclencher une fois ou plusieurs fois lors d'un "chargement" de page "naturel" donné (lorsqu'une nouvelle page est demandée au serveur) :
  
  1. Une fois par vue de page
  2. Chaque fois que l'élément est inséré dans une vue de page
     • Si vous souhaitez déclencher pour plusieurs éléments sur une page donnée, ou si la page en question est une application à page unique (SPA), il est recommandé de sélectionner ce paramètre.
• La variable ${element} référencant l'élément cible est accessible depuis la fonctionnalité d'Interpolation.
  • Par exemple, vous pourriez récupérer son texte en utilisant ${element.textContent} dans le champ value de certains extraits (Événement de Page, Variable Dynamique, etc.).

Configuration

Le déclencheur est défini à l'aide d'un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l'élément/s 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érencant l'élément cible est accessible depuis la fonctionnalité d'Interpolation.
  • Par exemple, vous pourriez récupérer son texte en utilisant ${element.textContent} dans le champ valeur de certains extraits (Événement de Page, Variable Dynamique, etc.).

Configuration

Le déclencheur est défini à l'aide d'un ou plusieurs sélecteurs CSS séparés par des virgules pour référencer l'élément/s sur lequel vous souhaitez détecter des clics ou des touches.

Comment ça fonctionne

• Le déclencheur repose sur l' Événement de Clic.
• La variable ${element} référencant l'élément cible est accessible depuis la fonctionnalité d'Interpolation.
  • Par exemple, vous pourriez récupérer son texte en utilisant ${element.textContent} dans le champ valeur de certains extraits (Événement de Page, Variable Dynamique, etc.).

Configuration

Contentsquare distingue entre 2 types de Pageviews et ce snippet vous permet de sélectionner si vous souhaitez qu'il s'exécute sur l'un d'eux ou les deux, en fonction du cas d'utilisation :

• Naturel - lorsque qu'une page est chargée "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, la balise Contentsquare est injectée sur chaque page que vous souhaitez suivre et déclenche le pageview lorsqu'elle est chargée et rendue.
• Artificiel - conçu pour "décomposer / diviser" les parcours des visiteurs sur des Applications à Page Unique (sites web entiers ou flux de visiteurs spécifiques) en pages/étapes individuelles. Peut également être utilisé pour désigner des pop-ups modaux ou toute autre expérience utilisateur comme une étape distincte pour une analyse de parcours plus granulaire et des rapports.

Comment cela fonctionne

• Il est déclenché immédiatement avant qu'un nouveau Pageview soit envoyé à Contentsquare.
• Ce déclencheur est particulièrement utile pour les Variables Personnalisées qui doivent être définies avant que le prochain pageview ne se déclenche afin d'être correctement associées à celui-ci.
• C'est également le seul déclencheur disponible pour tous les modèles de masquage/démasquage car ils doivent également être configurés avant le premier pageview "Naturel".

Directives sur les conditions de déclenchement

Lorsqu'il est utilisé à des fins de masquage, vous devez toujours définir ce déclencheur pour qu'il se déclenche sur "Toutes les Pages" afin de garantir que les sélecteurs CSS de masquage sont définis avant le chargement de la balise CS principale. Des conditions de déclenchement "Personnalisées" peuvent être utilisées pour des modèles non masquants, comme les Variables Personnalisées.

Configuration

Le déclencheur est défini à l'aide d'un sélecteur CSS pour référencer l'élément <form> dont vous souhaitez détecter les soumissions.

Comment cela fonctionne

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

Contentsquare distingue 3 types de vues de page :

• Vue de page naturelle - lorsque une page est chargée "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, la balise Contentsquare est injectée sur chaque page que vous souhaitez suivre et déclenche la vue de page lorsqu'elle est chargée et rendue.
• Vue de page artificielle - conçue pour "décomposer / diviser" les parcours des visiteurs sur des applications à page unique (sites Web entiers ou flux de visiteurs spécifiques) en pages/étapes individuelles. Peut également être utilisée pour désigner des pop-ups modaux ou toute autre expérience utilisateur comme une étape distincte pour une analyse de parcours plus granulaire et des rapports.
• Vue de page de renouvellement - lorsque une session se termine après plus de 30 minutes d'inactivité sur une page/onglet, mais est ensuite redémarrée lorsque la page est à nouveau interagie. Une nouvelle session de visiteur est créée avec une nouvelle vue de page envoyée avec 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 au sein d'applications à page unique tout en conservant l'URL précédente pour la navigation arrière.
  • replaceState - une méthode pour changer les URL au sein d'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 de 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 des déclenchements multiples dans les cas où plusieurs changements d'historique se produisent rapidement. Un déclencheur de changement d'historique avec debounce ne considérera 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 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 nouvelles et précédentes URL ne sont pas les mêmes.

Sélectionner des écouteurs

• La combinaison recommandée lorsqu'elle est utilisée pour des vues de page artificielles sur des sites Web à 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 vues de page artificielles supplémentaires.

Configuration

Le déclencheur est défini à l'aide d'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 ça 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.