Les Collecteurs - Extraire la Donnée

Qu'est-ce qu'un collecteur et à quoi sert-il ?

Un collecteur est un outil dont la fonction est d'aller chercher et d'extraire une information précise sur une page web. Cette information peut se trouver n'importe où : dans l'URL, dans le code HTML (via un sélecteur CSS), dans un cookie, dans le DataLayer, ou même être le résultat d'un script Javascript.

Les collecteurs sont la base de toute la configuration dans Netvigie Tracking. Ils sont indispensables pour :

• Définir des règles de contexte : "Une page est une 'Fiche Produit' si le collecteur {{URL}} contient /produit/".
• Vérifier des valeurs dans le plan de marquage : "Le paramètre product.price du dataLayer doit être égal à la valeur du collecteur {{Prix Affiché}}".
• Identifier des données sensibles : "Le collecteur {{User Email}} récupère une donnée sensible".
• Conditionner des règles (contraintes) : "Ne vérifier ce paramètre que si le collecteur {{User Status}} retourne 'connecté'".

Les différents types de Collecteurs

• CSS

  • Objectif : Récupérer le contenu textuel d'un élément HTML ciblé par un sélecteur CSS.
  • Exemple : Pour récupérer le prix "18,99 €" contenu dans <span class="price">18,99 €</span>, le sélecteur sera .price.
  • Options avancées :
    • Attribut : Récupérer la valeur d'un attribut de la balise (ex: récupérer la valeur de src dans une balise <img>).
    • Regex / Remplacement : Extraire une partie du texte ou le reformater (ex: garder uniquement la partie numérique 18.99).
    • Retourner le nombre d'éléments : Compter combien d'éléments correspondent au sélecteur.
    • Retourner un tableau : Si le sélecteur correspond à plusieurs éléments, récupérer toutes leurs valeurs dans une liste.

• DataLayer

  • Objectif : Récupérer l'intégralité de l'objet DataLayer tel qu'il est constitué sur la page. C'est un pré-requis pour toute vérification du plan de marquage du DataLayer.
  • Configuration : Il suffit généralement d'indiquer le nom de la variable JavaScript du dataLayer (ex: dataLayer pour GTM, tc_vars pour TagCommander).
  • Options avancées (pour GTM) : Vous pouvez choisir de ne pas fusionner les événements du dataLayer ou de figer son état à un moment précis du chargement de la page (ex: au gtm.dom), ce qui est utile pour un débogage avancé.

• DataLayer Element

  • Objectif : Récupérer la valeur d'une variable spécifique à l'intérieur du DataLayer.
  • Exemple : Pour un dataLayer { page: { name: 'product_detail' } }, vous pouvez créer un collecteur pour extraire la valeur de page.name. Le résultat sera product_detail.

• URL

  • Objectif : Extraire une partie de l'URL d'une page.
  • Configuration : Vous choisissez quelle propriété de l'URL vous intéresse (href, pathname, hostname, etc.) et pouvez appliquer une expression régulière (REGEX) pour en extraire une sous-partie.
  • Exemple : Pour extraire l'ID produit 52 de l'URL .../p/52-121-t-shirt.html, vous pouvez utiliser une REGEX comme \\/p\\/([0-9]+)-.

• URL Parameter

  • Objectif : Récupérer la valeur d'un paramètre spécifique dans la query string de l'URL (la partie après le ?).
  • Exemple : Dans l'URL .../recherche?controller=search&s=webcam, pour récupérer le terme recherché, le nom du paramètre à renseigner est s. Le collecteur retournera la valeur webcam.

  Note importante : Le nom du paramètre est la chaîne de caractères située avant le signe = (ici, s), et sa valeur est ce qui suit (ici, webcam).

• Cookie

  • Objectif : Récupérer la valeur d'un cookie, ou d'un élément du localStorage ou sessionStorage.
  • Configuration : Vous spécifiez le type de stockage (Cookie, Local, Session) et le nom de l'élément à récupérer.
  • Exemple : Récupérer la valeur du cookie _ga de Google Analytics.

• Javascript

  • Objectif : Exécuter une fonction JavaScript personnalisée et en retourner le résultat. C'est le collecteur le plus puissant et flexible.

  • Exemple : Un script qui vérifie la présence d'un élément de connexion et retourne "connecté" ou "déconnecté".

    if (document.querySelector("#logout-button")) {
      return "connecté";
    } else {
      return "déconnecté";
    }
    

• Tablemap

  • Objectif : Créer une table de correspondance pour traduire la valeur d'un autre collecteur.
  • Exemple : Si un collecteur retourne index, product, cart, vous pouvez utiliser un Tablemap pour les traduire en homepage, fiche produit, panier.

• Data Set (Jeu de Données)

  • Objectif : Importer un fichier CSV (comme un plan de marquage externe) et l'utiliser comme une source de données.
  • Fonctionnement : Vous importez un CSV. Le collecteur peut alors, pour la page en cours, trouver la ligne correspondante dans le CSV (en se basant sur une colonne clé, comme l'URL) et retourner toutes les valeurs de cette ligne. Cela permet de vérifier des plans de marquage complexes gérés en externe.

Options communes aux collecteurs

• Sortie numérique : Force la valeur retournée à être un nombre (en supprimant les lettres, symboles, etc.). Très utile pour comparer des prix.
• Collecteur temporaire : Indique que la valeur du collecteur n'a pas besoin d'être stockée après le crawl. Utile pour les collecteurs qui ne servent qu'à définir des contextes.
• Donnée sensible : Marque la donnée extraite comme étant potentiellement personnelle (email, nom, etc.). Cela active des vérifications spécifiques dans la section RGPD pour s'assurer qu'elle n'est pas envoyée à des tiers non autorisés.