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 mise en place.

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 en fonction de leur utilisation et de 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 de </body >

L'emplacement du container dans <head> est généralement utilisé pour l'AB test et doit être chargé de manière synchrone, pour empêcher l'effet de clignotement.

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 les appels à vos 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 les Tags d'A/B-testing et de personnalisation qui impactent généralement le contenu visuel d'un site web 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 manière synchrone afin d'éviter d'éventuels effets de clignotement 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 sur le onload événement de la page ou il est possible d'utiliser le async attribut dans l' <script> élément.

Installation via JavaScript Loaders

Il est possible d'implémenter les fichiers JavaScript Container avec des JavaScript loaders comme RequireJS ou HeadJS. En revanche, 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 les Commanders Act Web Container par eux-mêmes.

Test

Via la console du navigateur

Il est possible de consigner 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 exemple d'objet 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 recherchez la première valeur numérique dans votre barre d'adresse. ex. avec "https://app.commandersact.com/en/1234/", votre identifiant de compte est "1234".

Container ID

ID unique du Container dans votre compte. ex. "15".

Container Name

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

Container Filename

Nom du fichier JavaScript du Container, peut être configuré dans les "container settings" du TMS. ex. "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. ex. "//cdn.tagcommander.com/1234/tc_footer_main_20.js".

Container Version

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

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

Mis à jour il y a 7 mois

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