Configuration du data layer

Un Data Layer Commanders Act 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" afin de le distinguer des "Internal Variables" scriptées générées au sein du Container JavaScript.

Installation

Pour installer un Data Layer Commanders Act, 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 du Data Layer requises sont définies lors du processus de configuration de Commanders Act, mais vous pouvez trouver une liste des propriétés courantes sur cette page.

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 Data Layer Commanders Act. Veuillez contacter un consultant Commanders Act pour mettre en œuvre la transformation.

L’approche pour alimenter le Data Layer en propriétés dépend du framework technologique utilisé sur le site web et peut aller du web scraping JavaScript au templating jusqu’au codage en dur.

<script>
    window.tc_vars = {
        env_template: "homepage",
        env_work: "prod",
        page_name: "Homepage",
        page_keywords: ["homepage", "home", "entrypage", "index"],
        product_name: "",
        (…)
    };

    window.tc_vars.user_name = "myuser";
</script>
<script src="{{ container_URL }}"></script>

Le Data Layer doit être alimenté en informations avant le chargement du fichier Web Container — sinon les informations pourraient ne pas être disponibles au moment où le Container JavaScript s’exécute.

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 !

Si plusieurs Containers sont utilisés sur la même page, il est possible d’alimenter 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 qui ne concernent qu’un certain Container (p. 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 <head> et un <body> Container sont utilisés sur un site web.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            window.tc_vars = Object.assign({}, window.tc_vars, {
                env_template: "homepage",
                env_work: "prod"
            });
        </script>
        <script src="{{ head_container_URL }}"></script>
        (…)
    <head>
    <body>
        (…)
        <script>
            window.tc_vars = Object.assign({}, window.tc_vars, {
                page_name: "Homepage",
                page_keywords: ["homepage", "home", "entrypage", "index"]
            });
        </script>
        <script src="{{ body_container_URL }}"></script>
    </body>
</html>

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 exemple : 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 (p. ex. product_name sur la page de politique de confidentialité), il est recommandé de la remplir avec une valeur vide (p. ex. "", 0, [] ou {}).

Test

Via la console JavaScript

Il est possible d’examiner le Data Layer dans la console JavaScript en enregistrant tc_vars.

Vous trouverez ci-dessous un exemple de sortie d’un tc_vars Data Layer dans la console JavaScript.

{
    env_template: "homepage",
    env_work: "prod",
    page_name: "Homepage",
    page_keywords: ["homepage", "home", "entrypage", "index"],
    product_name: "",
    (…)
}

Via le tag d’assurance qualité

Le modèle de tag Commanders Act - Data Layer QA dans la bibliothèque de tag 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.

PrécédentConfiguration du web container SuivantConfiguration des événements browser-side

Mis à jour il y a 1 an

Ce contenu vous a-t-il été utile ?