Configuration du conteneur Web

Un web container est un fichier JavaScript qui a deux objectifs :

· Pouvoir utiliser les fonctions et méthodes natives du TMS

· Exécuter les solutions partenaires (tags) contenues à l'intérieur

Il est possible, comme c'est souvent le cas, d'avoir plusieurs containers pour le même site ou même la même page.

L'URL de chaque fichier JavaScript Web Container sera fournie ainsi que les Container IDs et Container Names par un consultant Commanders Act lors du processus de configuration.

Implémentation des containers sur la page

Les web container sont généralement installés en implémentant un <script> nœud html sur chaque page de votre site qui contient un src attribut qui pointe vers l'URL du Container.

Les containers peuvent être placés à différents endroits dans le code source de la page selon leur usage et votre type d'activité.

Voici un exemple courant avec 3 containers :

A/B-test (optionnel)

Dans le <head>

Analytics

Au début du <body>

Marketing

À la fin du </body >

L'emplacement du container dans le <head> est généralement utilisé pour les AB tests et doit être chargé de façon synchrone, pour éviter un effet de scintillement.

Nous recommandons d'implémenter tous les containers <body> de manière asynchrone. Il suffit d'utiliser l'attribut async dans l'élément <script>.

Important : le datalayer doit être déclaré avant vos appels aux containers. Sinon, les tags dans le container ne pourront pas utiliser les variables

Installation de `<head>` Container

<head> Les containers sont utilisés pour implémenter des Tags d'A/B-testing et de personnalisation qui impactent généralement le contenu visuel d'un site avant qu'il ne soit présenté à l'utilisateur. Il est donc important de les placer le plus haut possible dans la <head> section de votre site web.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="{{ head_container_URL }}"></script>
        (...)
    </head>
    (...)
</html>

Veuillez vous assurer que le <head> fichier Container est chargé de façon synchrone pour éviter d'éventuels effets de scintillement du contenu.

Installation de `<body>` Container

<body> Les containers sont utilisés pour implémenter des Tags qui mesurent des informations. Ces Containers sont donc placés à la fin de la <body> section afin de s'assurer qu'ils ont un impact minimal sur le temps de chargement du contenu du site.

<!DOCTYPE html>
<html>
    (...)
    <body>
        (...)
        <script src="{{ body_container_URL }}"></script>
    </body>
</html>

Contrairement au <head> Container il est possible d'implémenter <body> Container de manière asynchrone. Par exemple, il est possible de les charger via JavaScript lors de l' événement onload de la page ou il est possible d'utiliser l' async attribut dans l'élément <script> .

Installation via des JavaScript Loaders

Il est possible d'implémenter des fichiers JavaScript Container avec des JavaScript loaders comme RequireJS ou HeadJS. À l'inverse, il n'est pas possible de regrouper les fichiers JavaScript Container avec des bundlers comme Webpack ou ParcelJS afin de s'assurer que les fichiers Container sont chargés dynamiquement depuis le CDN ou le serveur à chaque requête de page. Sinon, les utilisateurs ne pourront pas gérer eux-mêmes les Commanders Act Web Container.

Tests

Via la console du navigateur

Il est possible de lister tous les fichiers Container chargés sur un site via la console JavaScript du navigateur. L'objet JavaScript tC.containersLaunched fournit des informations sur chaque Web Container chargé.

Vous trouverez ci-dessous un objet exemple incluant ses informations les plus pertinentes :

{
    1234: { // Commanders Act Account ID
        1: { // ID of the 1st loaded Container
            g: 15,
            v: "5.15" // Version of the 1st loaded Container
        },
        5: { // ID of the 2nd loaded Container
            g: 20,
            v: "55.16" // Version of the 2nd loaded Container
        }
}

Définitions

Account ID

ID unique du compte de votre espace de travail sur notre plateforme. Aussi appelé "Site ID". Connectez-vous à votre compte Commanders Act et cherchez la première valeur numérique dans la barre d'adresse. Par exemple avec "https://app.commandersact.com/en/1234/", votre identifiant de compte est "1234".

Container ID

ID unique du Container au sein de votre compte. Par exemple "15".

Container Name

Libellé du Container. Peut être configuré dans les "container settings" du TMS. Par exemple "Header Container".

Container Filename

Nom du fichier JavaScript du Container, peut être configuré dans les "container settings" du TMS. Par exemple "tc_header_21.js".

Container URL

URL complète du Container utilisée pour l'installation. Dépend de la méthode d'hébergement. Par exemple "//cdn.tagcommander.com/1234/tc_footer_main_20.js".

Container Version

Snapshot d'un fichier JavaScript du Container. par ex. "55.16".

PrécédentGuides d'installation pour développeurs SuivantConfiguration du Datalayer

Mis à jour il y a 9 mois

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