Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
Le Configurateur de Tag Contentsquare (CSTC) est un outil pour gérer vos fonctionnalités liées aux Tags, vous fournissant des extraits de code personnalisables, afin que vous puissiez adapter le suivi à vos besoins.
Vous, ou votre équipe impliquée dans la mise en œuvre de Contentsquare, utiliserez généralement le CSTC lors de la mise en œuvre initiale et par la suite pour effectuer des mises à jour à mesure que les besoins de votre entreprise évoluent.
- Cas d'utilisation
- Bon à savoir
- Comment ça fonctionne
- Comment créer, gérer et déployer des extraits
- FAQs
Cas d'utilisation
- Masquage des données personnelles : masquer et démasquer sélectivement certains éléments de page dans la Relecture de Session pour améliorer votre expérience de relecture, en veillant à ne masquer que ce qui est nécessaire.
- Vues de page artificielles : envoyer et suivre des « vues de page » supplémentaires dans les cas où l'interaction d'un utilisateur avec une page ne l'enregistre pas comme une autre vue de page unique (par exemple, pop-up, SPA, etc.).
- Erreurs personnalisées : collecter les erreurs rencontrées par vos visiteurs, telles que les messages de validation de formulaire ou les avertissements de produit indisponible (avec jusqu'à 5 paires clé/valeur pour catégoriser les erreurs).
- Variable personnalisée (CVAR) : collecter des informations supplémentaires sur la page, l'utilisateur ou la session, envoyées dans les vues de page.
- Variable dynamique (DVAR) : collecter des informations supplémentaires au niveau de la session qui peuvent être utilisées pour la segmentation.
- Événement de page : collecter des informations supplémentaires au niveau de la session qui peuvent être utilisées pour la segmentation.
- Requêtes réseau - Masquer les URL : enregistrer des modèles pour masquer les URL collectées pour les erreurs API et les détails réseau.
Vous trouverez des modèles spécifiques listés et liés ci-dessous, disponibles pour chacun des cas d'utilisation.
Bon à savoir
Propriété du CSTC
Vous devez identifier le ou les membres de l'équipe appropriés pour mettre à jour et gérer le CSTC, car des connaissances techniques sont requises. Notez que le CSTC ne peut être accédé et géré que par des utilisateurs ayant des autorisations d'administrateur de console.
CSTC et autres gestionnaires de Tags tiers
Il est important de revoir et de suivre vos configurations lorsque vous utilisez plusieurs plateformes de tagging pour éviter les conflits.
SRI et projets Contentsquare auto-hébergés
Après avoir apporté des modifications aux extraits CSTC et publié, vous devrez :
-
SRI : générer manuellement un nouvel instantané
-
Auto-hébergement : récupérer le nouveau Tag
Comment ça fonctionne
Extraits, modèles et déclencheurs
Le CSTC utilise des Extraits qui exécutent une Commande de Tag. Vous créez et configurez des Extraits individuels en utilisant deux composants : un modèle et un Déclencheur.
-
Étape 1 - Créer un Extrait : Exécute la Commande de Tag
- Étape 2 - Sélectionner et configurer le modèle : L'action qui sera effectuée
- Étape 3 - Sélectionner et configurer un déclencheur : L'événement qui exécutera l'action
Voir la liste des modèles
Une fois que vous avez créé un Extrait, les modèles suivants sont disponibles :
Cas d'utilisation : Masquage de données
- Masquage d'élément : masquer sélectivement des éléments ciblés, tels que des données sensibles, personnelles ou d'autres données spécifiques, tout en laissant d'autres éléments non masqués
- Démasquage d'élément : démasquer sélectivement des éléments ciblés, ou des sections d'une page, tout en laissant d'autres éléments masqués.
- Requêtes réseau - Masquer les URL (nécessite le Suivi d'Expérience) : enregistrer des modèles pour masquer les URL collectées pour les erreurs API et les détails du réseau.
Cas d'utilisation : Collecte de pages vues artificielles
- Page vue artificielle : suivre des “pages vues” supplémentaires dans les cas où l'interaction d'un utilisateur avec une page ne l'enregistre pas comme une page vue unique distincte.
Cas d'utilisation : Collecte d'événements personnalisés
- Variable personnalisée : collecter des informations supplémentaires sur la page, l'utilisateur ou la session envoyées dans les pages vues
- Variable dynamique : collecter des informations supplémentaires sur la session qui peuvent être utilisées pour segmenter
- Événement de page : une interaction d'un visiteur à utiliser ensuite comme filtre pour segmenter dans Contentsquare
Cas d'utilisation : Analyse des erreurs
- Erreur personnalisée (nécessite le Suivi d'Expérience) : collecter les messages d'erreur présents dans la page web consultée (visibles par l'utilisateur ou non)
Voir la liste des déclencheurs
Selon le modèle que vous sélectionnez, un ou plusieurs des Déclencheurs suivants sont disponibles :
- Avant la page vue
- Soumission de formulaire
- Clic ou tapotement sur un élément
- Changement d'historique
- Après la page vue
- Élément existe
- Changement de hachage
- Élément devient visible
- Élément supprimé
- Survol de souris
- Insertion d'élément
Consultez la liste complète des déclencheurs, comment utiliser chacun d'eux et les modèles sur lesquels ils sont disponibles.
Utilisation de la syntaxe : entrées de sélecteur CSS, interpolation et contexte itérable
Vous pouvez utiliser les conseils suivants pour vous aider à configurer les champs d'entrée disponibles pour différents modèles et déclencheurs.
Entrées de sélecteur CSS
Dans certains modèles de CSTC, tels que le Masquage d'Éléments, nous utilisons des sélecteurs CSS pour cibler des éléments spécifiques.
Les extraits qui s'appuient sur des sélecteurs CSS (y compris dans leurs déclencheurs) prennent en charge une syntaxe similaire à celle de votre navigateur lors de l'utilisation de la méthode document.querySelectorAll.
Utilisation des sélecteurs CSS
Syntaxe
Vous pouvez utiliser la syntaxe couramment utilisée pour CSS, séparée par des virgules :
.classname,#indexname,div[attr=value]
Utilisation de contenu dynamique avec interpolation
Pour tirer parti à la fois des textes simples à envoyer en tant que valeurs, ainsi que du contenu dynamique récupéré d'un dataLayer (par exemple), CSTC utilise un mécanisme appelé interpolation.
Utilisation de l'interpolation
L'interpolation vous permet de spécifier une variable à utiliser dans l'un des inputs de la configuration de la page.
Disponibilité des modèles
- Événement de Page
- Variables Personnalisées
-
Variables Dynamiques
- Vues de Page Artificielles
- Erreur Personnalisée
Syntaxe
Syntaxe d'interpolation : ${javascriptHere}
Le contenu à l'intérieur des accolades sera traité comme des variables Javascript.
Directives
Notez que les appels de fonction ne sont pas pris en charge, sauf ceux listés dans les ‘Exceptions’ ci-dessous.
Pour utiliser l'interpolation, vous devez baser les variables Javascript sur des variables racines spécifiques, y compris :
- Window
- Document
- Location
- cookies : Carte clé-valeur des cookies accessibles et leur valeur correspondante
Vous pouvez utiliser l'interpolation dans les modèles et les inputs de déclencheurs, ce qui permet de concaténer l'interpolation avec du texte commun, ou d'interpoler plusieurs variables dans le même input.
Si les valeurs interpolées sont indéfinies, l'exécution du modèle sera interrompue.
Exemples
Valide ✅ | Invalide ❌ |
${window.dataLayer[0].pageName} | ${dataLayer[0].pageName} |
${location.href.pathname} | ${document.querySelectorAll("#selector")[0].textContent} |
Nous sommes situés ici : ${location.href.pathname} |
|
${cookies._cs_id}${cookies._cs_s} | |
${cookies._cs_id} |
Exceptions
Bien que l'interpolation n'ait pas pour but de permettre des appels de fonction, certaines fonctions peuvent être utilisées dans la fonctionnalité d'interpolation :
-
window.location.hash.replace()
- Permet de remplacer le caractère # sur le modèle de Vues de Page Artificielles
-
window.sessionStorage.getItem()
- Autorisé pour des raisons historiques
-
document.querySelector("<valid-css-selector>").textContent
-
document.querySelector("<valid-css-selector>").value
-
new Date().getTime()
Contexte itérable
Il permet de récupérer des valeurs à partir de tableaux, tels que des variables Javascript. Le contexte itérable doit être utilisé lorsque la position de la valeur que vous souhaitez récupérer d'un tableau n'est pas connue.
Il peut vous aider à filtrer des valeurs d'un tableau pour extraire la charge utile utile et ensuite les utiliser dans vos modèles.
Utilisation du contexte itérable
Le contexte itérable peut vous aider à filtrer des valeurs d'un tableau pour extraire la charge utile utile et ensuite les utiliser dans vos modèles.
Disponibilité
Le contexte itérable peut être utilisé sur les modèles suivants :
Syntaxe
Le champ d'entrée du contexte itérable nécessite une syntaxe spécifique pour atteindre cet objectif :
values(<objet ou tableau>)[?<nomDuChamp>] [| [<min>:<max>]]
Spécifiquement, la syntaxe est un sous-ensemble des expressions JMesPath.
Détails et description de la syntaxe :
OBLIGATOIRE values(<objet ou tableau>) |
Définit l'objet ou le tableau sur lequel vous souhaitez itérer. |
OBLIGATOIRE [?<nomDuChamp>] |
Filtre : Itère sur les valeurs et sélectionne uniquement celle(s) qui répondent à l'expression de filtre |
OPTIONNEL [<min>:<max>] |
Définit une plage d'index à itérer. |
Cette syntaxe permet d'extraire des valeurs qui correspondent à un filtre spécifique, dont le résultat sera un tableau de valeurs.
Le principal objectif du contexte itérable est de nous permettre d'utiliser le résultat de l'évaluation ci-dessus. Le modèle sera exécuté autant de fois qu'il y a d'éléments dans notre sous-ensemble filtré.
Important à noter
<objet ou tableau> est référencé depuis le contexte d'interpolation. Pour chaque exécution, le contexte d'interpolation sera injecté avec une variable “$" qui résout à la valeur sur laquelle on itère.
Exemple : modèle Événement de Page
En supposant qu'un modèle PageEvent soit créé avec les entrées suivantes :
Contexte Iterable |
values(window.example)[?key] | [1:2]
|
NomÉvénement
|
Valeur : ${$.value}
|
values(window.example)
|
[ |
[?key]
|
[ |
[1:2]
|
[ |
Le modèle Page Event sera exécuté une seule fois, et $.value sera interpolé à 3.
Exemple : Google Tag Manager (GTM) DataLayer
Dans ce cas, nous voulons capturer la valeur window.dataLayer[i].google_tag_params.make trouvée à l'intérieur d'un DataLayer GTM (qui est un tableau d'objets).
C'est un exemple classique où nous pouvons récupérer les données que nous recherchons en utilisant le Contexte Iterable.
Le dataLayer est un tableau d'objets, chacun contenant différents points de données et informations.
En y regardant de plus près, les éléments aux index 11 et 12 semblent posséder un champ google_tag_params.
Étape 1 : La première étape consiste à filtrer le dataLayer pour ne conserver que les objets contenant les clés google_tag_params, ce qui se fait en utilisant l'expression suivante
values(window.dataLayer)[?google_tag_params]
___
Étape 2 : Après l'application du filtrage, 2 objets sont retournés ; Cependant, nous sommes intéressés par la valeur du second. Par conséquent, pour le réduire à un seul objet, nous ajouterions la partie | [1:2]
à la fin de notre expression.
values(window.dataLayer)[?google_tag_params] | [1:2]
___
Étape 3 : Finalement, après avoir isolé l'objet qui contient la clé/l'objet dont nous voulons collecter la valeur/propriété, nous pouvons y accéder en utilisant la syntaxe d'interpolation suivante (dans le champ de valeur du snippet) :
${$.google_tag_params.make}
___
Comme vous pouvez le voir dans l'exemple ci-dessus, le Contexte Iterable est peuplé avec la syntaxe appropriée et le texte d'entrée de valeur utilise l'interpolation pour collecter la valeur mise à disposition par le Contexte Iterable.
Comment créer, gérer et déployer des Snippets
Tout d'abord, vous devez naviguer vers le Configurateur de Tag en cliquant sur votre icône de profil (en haut à droite), puis sur 'Configurateur de Tag'.
Le flux de travail pour créer et gérer des Snippets dans le CSTC est le suivant :
Étape 1 : Créer (ou modifier) un Snippet
1. Sélectionnez ‘+ Nouveau snippet’.
2. Donnez un nom à votre snippet (quelque chose de descriptif qui indique ce qu'il fait).
3. Sélectionnez votre modèle choisi.
4. Sélectionnez l'un des déclencheurs disponibles (les déclencheurs diffèrent selon le modèle).
5. Cliquez sur ‘Enregistrer’.
Étape 2 : Déployer vos Snippets
Pour déployer votre/vos Snippet/s, vous devrez publier la nouvelle version du Tag, y compris tous les changements apportés aux Snippets nouveaux ou existants.
1. Vérifiez et mettez à jour le ‘statut de publication’ de vos Snippets si nécessaire.
- ‘Activé’ : Ceux-ci seront déployés sur le Tag lors de la publication. Les Snippets nouvellement créés sont définis sur ‘Activé’ par défaut.
- ‘Désactivé’ : Ceux-ci seront désactivés du Tag lors de la publication.
2. Cliquez sur le bouton ‘Publier [x] changement(s)’. Pour approuver et publier vos changements, un e-mail sera envoyé à votre adresse e-mail enregistrée contenant un code à quatre chiffres.
3. Dans la nouvelle fenêtre qui apparaît, entrez le code que vous avez reçu par e-mail pour approuver les changements.
4. Cliquez sur ‘Publier tous les extraits’ et le nouveau Tag sera déployé, y compris tous vos extraits et les modifications apportées.
Étape 3 : Testez votre implémentation
1. Téléchargez l’extension Chrome de l'Assistant de configuration de suivi Contentsquare.
2. Laissez passer 5 minutes, videz le cache de votre navigateur et ouvrez (ou rechargez) la page où votre extrait nouvellement créé est censé se déclencher.
3. Allez sur votre site web (ou la page spécifique de votre site web) où l'extrait publié est censé se déclencher et effectuez l'action sur laquelle votre extrait publié est censé se déclencher.
4. Cliquez pour ouvrir l'extension de l'Assistant de configuration de suivi Contentsquare et vérifiez sous la dernière section "Nouvelle vue de page envoyée" si votre Variable Personnalisée/Dynamique ou Événement de Page a été collecté avec succès.
Notez que le masquage/démasquage des extraits doit être vérifié à l'intérieur de la plateforme Contentsquare elle-même.
Activer/Désactiver les extraits
Vous pouvez activer et désactiver les extraits en utilisant les interrupteurs sous le statut de publication :
‘Activé’ : pour activer un extrait.
‘Désactivé’ : pour désactiver un extrait. Utilisez ceci si vous souhaitez désactiver temporairement un extrait sans le supprimer complètement du projet (ce qui nécessiterait de supprimer un extrait).
Vous devrez toujours publier les modifications pour les déployer sur le Tag.
Supprimer un extrait
Important : Vous devez faire preuve de prudence avant de supprimer des extraits, en particulier ceux liés au masquage, pour valider l'impact de cette action (comme l'exposition de données personnelles dans le cas du masquage).
Pour supprimer définitivement un extrait et l'enlever du CSTC (y compris votre projet Contentsquare), cliquez sur le menu à trois points à côté d'un extrait et cliquez sur ‘Supprimer’. Notez que cela ne peut pas être annulé.
FAQs
Le CSTC est-il disponible pour les applications mobiles ?
Le CSTC est actuellement disponible pour les WebViews, tant que le Tag est également chargé sur les Webviews.
Types de tags et code personnalisé : M2P et "Standard"
Si vous avez déjà un code personnalisé en place, sachez que les extraits CSTC ne le remplaceront pas. Cela signifie que, par exemple, si vous avez configuré des vues de page artificielles dans votre code personnalisé, et que vous créez un extrait de vue de page artificielle dans le CSTC, vous aurez des vues de page dupliquées.
Puis-je vérifier les changements de version, ou annuler les changements effectués via le CSTC ?
Comme il n'y a actuellement pas de journal de version, ni de fonction d'annulation, vous devrez reconfigurer les extraits si nécessaire et les déployer à nouveau sur le Tag, en publiant vos modifications.
Que faire si j'ai créé un problème sur mon site, ou si j'ai des inquiétudes concernant une fuite de données personnelles ?
Vous devez désactiver et dépublier le snippet qui a causé le problème et, en cas de fuite de données personnelles, vous devez contacter notre équipe d'assistance.
Puis-je utiliser du Javascipt personnalisé ?
Seules les méthodes et fonctions autorisées peuvent être utilisées dans un contexte d'interpolation.