Par défaut, notre tracker envoie de nombreuses informations utiles à notre plateforme, mais toutes ces informations sont standard. Tant qu’une donnée fait partie de la Web API, il y a de fortes chances que nous la suivions.

Mais que se passe-t-il si vous souhaitez également enrichir vos enregistrements de session avec des données spécifiques à votre application ?

Comme comprendre sous quel forfait payant se trouve votre utilisateur lorsque vous examinez son rejeu ? Ces informations peuvent fournir un contexte supplémentaire à vos développeurs, donc ce n’est pas parce qu’elles ne sont pas standard que nous devrions les ignorer, n’est-ce pas ?

C’est là que les métadonnées entrent en jeu.

Notez qu’il existe une version vidéo de ce tutoriel sur notre chaîne YouTube. N’hésitez donc pas à la consulter si vous êtes plutôt du genre à apprendre visuellement.

Dans le contexte d’un rejeu de session, les métadonnées correspondent à toutes les informations que votre utilisateur ne génère pas, mais qui se rapportent d’une manière ou d’une autre à cet utilisateur.

En d’autres termes, si l’utilisateur clique sur un lien spécifique ou effectue une action particulière, ce ne sont pas des métadonnées, c’est un événement personnalisé (consultez la documentation sur les Événements Personnalisés si vous souhaitez en savoir plus à leur sujet).

Mais s’il existe un indicateur qui vous dit qu’un utilisateur est sous le forfait gratuit ou le forfait payant. Ou peut-être un code de suivi vous montrant d’où vient cet utilisateur ? Ce sont toutes des métadonnées et vous pouvez facilement les ajouter à vos sessions.

La première chose à faire est de configurer les champs de métadonnées directement dans la plateforme.

Si vous sautez cette étape, vous ne pourrez enregistrer aucune information, alors ne la sautez pas !

Pour cela, vous allez accéder à la page de configuration de votre projet en cliquant sur la roue dentée en haut à droite du menu supérieur :

Une fois là, cliquez sur l’élément de menu Metadata à l’extrême gauche de votre écran :

Cela vous amènera à l’écran de configuration des métadonnées. Assurez-vous de sélectionner le bon projet dans la liste déroulante et créez autant de champs que nécessaire.

Pour cet exemple, nous avons créé 3 champs pour le projet « e-commerce test » :

• Le « plan » qui contiendra le forfait actuel de l’utilisateur.
• Le « utm_source » contenant un code identifiant d’où vient l’utilisateur.
• Et enfin, le « items_in_cart » contient le nombre total d’articles dans le panier de l’utilisateur.

Le dernier est une donnée qui dépend de l’action de l’utilisateur, ce qui est différent de ce que nous recommandons. Cependant, dans cet exemple, vous verrez les limites des champs de métadonnées et pourquoi cette information particulière aurait dû être un événement personnalisé à la place.

Une fois cette configuration prête, l’étape suivante consiste à ajouter le code nécessaire pour réellement envoyer les données dans le cadre de votre session.

Pour ajouter les métadonnées à la session, nous utiliserons la méthode setMetadata du tracker. Vous pouvez utiliser cette méthode à tout moment pendant la session de l’utilisateur, gardez simplement à l’esprit les deux considérations suivantes :

1. Si vous appliquez plusieurs valeurs au même champ de métadonnées, seule la dernière sera enregistrée dans le cadre de la session.
2. Toutes les valeurs doivent être des chaînes de caractères. Sinon, elles ne seront pas enregistrées. Le tracker ne convertira pas les valeurs en chaînes de caractères, alors faites attention à cela.

Les flèches rouges montrent où les mises à jour pertinentes ont été effectuées. Ce fournisseur de contexte exporte une fonction appelée setMetadata qui, à son tour, appelle la méthode setMetadata du tracker.

Si vous voulez un exemple fonctionnel, vous pouvez consulter ce dépôt.

Maintenant, tout ce que nous avons à faire, c’est d’utiliser la fonction exportée chaque fois que nous voulons configurer les champs de métadonnées.

Pour les besoins de cet exemple, nous allons décider de définir les champs utm_source et plan directement depuis la page d’accueil, puis chaque fois que l’utilisateur ajoute un article au panier, nous mettrons à jour le dernier champ restant.

Dans le fichier pages/index.tsx, nous allons ajouter le code suivant :

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition 
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

La majeure partie de ce hook était déjà présente, mais nous avons ajouté la référence à la fonction setMetadata puis les deux appels à celle-ci. Les deux fonctions, getPlan et getUTMSource, renvoient des données aléatoires pour cet exemple. Pour votre cas d’usage particulier, vous devrez les implémenter en conséquence.

Ce code définira ces valeurs de métadonnées au chargement de la page d’accueil.

Maintenant, nous devons ajouter la dernière valeur, le nombre d’articles dans le panier. Pour cela, nous allons accéder au composant ProductSidebar, qui est celui chargé de contrôler ce qui se passe lorsque nous cliquons sur « Add to cart », et nous ajouterons un autre hook pour réagir à un changement du nombre d’articles dans le panier.

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

Bien sûr, vous devez également obtenir la fonction setMetadata depuis le fournisseur de contexte comme précédemment, mais une fois que c’est fait, vous avez terminé.

Maintenant, les données sont enregistrées. Nous pouvons aussi le voir sur la plateforme via la liste des sessions.

Maintenant que vos métadonnées sont enregistrées dans tous les rejeux de session, que pouvez-vous en faire ?

Eh bien, pour commencer, vous pouvez les visualiser directement depuis le rejeu :

Vous devriez commencer à voir les champs de métadonnées dans le coin supérieur droit de l’écran de votre lecteur. Dans cet exemple, nous voyons que l’utilisateur a un forfait Enterprise Edition, qu’il vient de Reddit et qu’il n’a qu’un seul article ajouté au panier.

L’autre chose puissante que vous pouvez faire avec les métadonnées est de les utiliser comme paramètre de recherche. À l’aide de la barre omnisearch, vous pouvez sélectionner les champs de métadonnées personnalisés que vous avez créés comme paramètres de recherche :

Donc si vous souhaitez consulter uniquement les rejeux Enterprise Edition, il vous suffit de sélectionner le champ Plan et de le filtrer par « ee », comme ceci :

Vous pouvez également utiliser la même barre omnisearch lors de la création d’un widget pour votre dashboard. Donc pour continuer avec l’exemple EE, si vous vouliez créer un dashboard uniquement pour les clients Enterprise, vous pourriez filtrer chaque widget personnalisé en utilisant l’attribut « Plan ».

Par exemple, le widget suivant montre combien de clients Enterprise cliquent sur le bouton « Add to cart » :

Ce qui donne un widget qui ressemble à ceci :

Avec les champs de métadonnées, vous pouvez personnaliser et étendre les insights que vous tirez de vos rejeux de session autant que vous le souhaitez.

Les métadonnées peuvent considérablement enrichir les insights que vous pouvez tirer de vos rejeux de session, et les configurer est relativement facile.

N’oubliez pas que quelle que soit l’information que vous souhaitez enregistrer, elle doit toujours être sous forme de chaînes de caractères, sinon elle sera ignorée.

Le code source complet du projet d’exemple utilisant les métadonnées peut être consulté ici.

Si vous rencontrez des problèmes avec l’une des étapes de ce processus, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !