# 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>.

{% hint style="info" %}
Important : le data layer doit être déclaré avant les appels à vos containers. Sinon, les tags du container ne pourront pas utiliser les variables
{% endhint %}

#### 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.

```markup
<!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.

```markup
<!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>` .

{% hint style="info" %}
**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.
{% endhint %}

### 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 :

```javascript
{
    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**  | <p>Instantané d’un fichier JavaScript Container.<br>par exemple, "55.16".</p>                                                                                                                                                                                                                            |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/web-container-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
