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 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 du </body>

L’emplacement du container dans le <head> est généralement utilisé pour les AB test et doit être chargé de façon synchrone, afin d’éviter l’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 de containers. Sinon, les tags dans le container ne pourront pas utiliser les variables

Installation de `<head>` Container

<head> Les Container 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 sa présentation à 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 Container 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 web.

<!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 des 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 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

Identifiant unique du compte de votre workspace 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. ex. avec "https://app.commandersact.com/en/1234/", votre identifiant de compte est "1234".

Container ID

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

Container Name

Étiquette du Container. Peut être configurée 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 de Container. ex. "55.16".

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

Mis à jour il y a 8 mois

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