# Configuration du Data layer Un Commanders Act Data Layer est un objet JavaScript qui contient les métadonnées d’un site web sous forme de propriétés afin de les rendre disponibles aux Tags. Dans la plateforme, ce Data Layer est nommé « External Variables » pour le distinguer des « Internal Variables » scriptées, générées au sein du Container JavaScript. ### Installation Pour installer un Commanders Act Data Layer, il est nécessaire d’implémenter un objet JavaScript global `tc_vars` qui contient les métadonnées de la page sous forme de propriétés directes. Les propriétés requises du Data Layer sont définies pendant le processus de configuration de Commanders Act, mais vous pouvez trouver une liste de propriétés courantes sur [cette page](/fr/fonctionnalites/sources/sources-catalog/web/containers/user-guides-for-browser-side-platform/data-layer-and-data-types/external-variables.md). {% hint style="info" %} **Réutiliser un Data Layer existant** Si un site web dispose déjà d’un Data Layer installé, il est possible de le transformer en un Commanders Act Data Layer. Veuillez contacter un consultant Commanders Act pour mettre en œuvre la transformation. {% endhint %} L’approche pour remplir le Data Layer avec des propriétés dépend du framework technologique utilisé sur le site web et peut aller du web scraping JavaScript au templating en passant par le hardcoding. ```markup ``` Le Data Layer doit être rempli avec des informations avant le chargement du fichier Web Container — sinon, les informations risquent de ne pas être disponibles au moment où le Container JavaScript s’exécute. {% hint style="warning" %} **Conditions de concurrence** Les conditions de concurrence entre les propriétés du Data Layer et le Container JavaScript peuvent être difficiles à identifier et à déboguer pour les utilisateurs de Commanders Act. Il est donc important de les éviter lors de l’installation ! {% endhint %} Si plusieurs Containers sont utilisés sur la même page, il est possible de remplir le Data Layer en plusieurs étapes. Les informations globales comme le type de page doivent être rendues disponibles avant le chargement du premier Container. Les informations pertinentes uniquement pour un certain Container (par ex. les informations produit) peuvent être ajoutées avant le Container correspondant. L’exemple suivant montre comment un Data Layer peut être installé dans le cas où à la fois un `` et un `` Container sont utilisés sur un site web. ```markup (…) (…) ``` {% hint style="info" %} **Convention de nommage du Data Layer** Comme indiqué dans l’exemple ci-dessus, les propriétés du Data Layer sont généralement regroupées avec une notation par préfixe. Par ex. `env_` est utilisé pour regrouper les informations d’environnement et `user_` est utilisé pour regrouper les informations utilisateur. Si une propriété n’est pas pertinente pour une certaine page (par ex. `product_name` sur la page de politique de confidentialité), il est recommandé de la renseigner avec une valeur vide (par ex. `""`, `0`, `[]` ou `{}`). {% endhint %} ### Test #### Via la console JavaScript Il est possible d’examiner le Data Layer dans la console JavaScript en journalisant `tc_vars`. Ci-dessous, vous trouverez un exemple de sortie d’un `tc_vars` Data Layer dans la console JavaScript. ```javascript { env_template: "homepage", env_work: "prod", page_name: "Homepage", page_keywords: ["homepage", "home", "entrypage", "index"], product_name: "", (…) } ``` #### Via le tag de contrôle qualité Le modèle de Tag *Commanders Act - Data Layer QA* dans la bibliothèque de Tags Commanders Act affiche automatiquement les informations du Data Layer dans la console JavaScript sur chaque page. Cette approche a l’avantage d’enregistrer un instantané du Data Layer au moment exact où le Container JavaScript a été exécuté. Cela permet d’identifier les conditions de concurrence entre les propriétés du Data Layer et le Container JavaScript afin de s’assurer que toutes les propriétés nécessaires sont disponibles à temps. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/datalayer-setup.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.