Configuration du Datalayer
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" pour le distinguer des "Internal Variables" scriptées qui sont 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 en tant que propriétés directes. Les propriétés requises du Data Layer sont définies lors du processus de configuration de Commanders Act, mais vous pouvez trouver une liste de propriétés courantes sur cette page.
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.
<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 rempli avec des 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 course
Les conditions de course entre les propriétés du Data Layer et le Container JavaScript peuvent être difficiles à identifier et à déboguer par les utilisateurs de Commanders Act. Il est donc important de les éviter lors de l'installation !
Dans le cas où 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 qui ne sont pertinentes que pour un certain Container (par ex. les informations produit) peuvent être ajoutées avant le Container respectif.
L'exemple suivant décrit 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>Tests
Via la console JavaScript
Il est possible d'examiner le Data Layer dans la console JavaScript en loggant 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 de Quality Assurance
Le template 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 qu'elle enregistre un instantané du Data Layer au moment exact où le Container JavaScript a été exécuté. Cela permet d'identifier les conditions de course 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.
Mis à jour
Ce contenu vous a-t-il été utile ?