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, voire la même page.

L’URL de chaque fichier JavaScript Web Container sera fournie, avec les Container IDs et les Container Names, par un consultant Commanders Act pendant le processus de configuration.

Implémentation des containers sur la page

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

Les containers peuvent être placés à différents endroits dans le code source de la page, selon leur utilisation 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 <head> est généralement utilisé pour l’AB test et doit être chargé de manière synchrone afin d’éviter un effet de scintillement.

Nous recommandons d’implémenter tous les containers <body> de manière asynchrone. Utilisez simplement l’attribut async dans l’élément <script>.

Important : le data layer doit être déclaré avant les appels à vos containers. Sinon, les tags du 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 web avant qu’il ne soit présenté à l’utilisateur. Il est donc important de les placer aussi haut que 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 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 aient un impact minimal sur le temps de chargement du contenu du site web.

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

Contrairement au <head> Container, il est possible d’implémenter des <body> containers 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’attribut async 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 d’assembler 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 le Commanders Act Web Container.

Test

Via la console du navigateur

Il est possible d’enregistrer 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é.

Voici ci-dessous un exemple d’objet incluant ses informations les plus pertinentes :

{
    1234 : { // ID du compte Commanders Act
        1 : { // ID du 1er Container chargé
            g : 15,
            v : "5.15" // Version du 1er Container chargé
        },
        5 : { // ID du 2e Container chargé
            g : 20,
            v : "55.16" // Version du 2e Container chargé
        }
}

Définitions

Account ID

ID de compte unique de votre workspace sur notre plateforme. Aussi appelé "Site ID". Connectez-vous à votre compte Commanders Act et repérez 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 dans votre compte. Par exemple, "15".

Container Name

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

Container Filename

Nom du fichier JavaScript du Container, configurable dans les "container settings" de TMS. Par exemple, "tc_header_21.js".

Container URL

URL complète du Container utilisé 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

Instantané d’un fichier JavaScript Container. par exemple, "55.16".

PrécédentGuides de configuration pour les développeurs SuivantConfiguration du data layer

Mis à jour il y a 1 an

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