> For the complete documentation index, see [llms.txt](https://doc.commandersact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/web-container-setup.md).

# Configuration du conteneur web

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

· Permettre d'utiliser les fonctions et méthodes natives du TMS

· Exécuter les solutions des 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, avec les ID des Container et les noms des Container, par un consultant Commanders Act pendant le 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 web 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 utilisation et votre type d'activité.

Voici un exemple courant avec 3 containers :

| Test A/B (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 le test A/B et doit être chargé de manière synchrone, afin d'éviter un effet de clignotement.

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 datalayer doit être déclaré avant les appels de vos containers. Sinon, les tags dans le container ne pourront pas utiliser les variables
{% endhint %}

#### Installation de `<head>` Container

`<head>` Les Container sont utilisés pour implémenter des Tags de test A/B 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 clignotement du contenu.

#### Installation de `<body>` Container

`<body>` Les Container sont utilisés pour implémenter des Tags qui mesurent des informations. Ces Container 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.

```markup
<!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 le `async` attribut dans l' `<script>` élément.

{% hint style="info" %}
**Installation via des loaders JavaScript**

Il est possible d'implémenter des fichiers JavaScript Container avec des loaders JavaScript comme RequireJS ou HeadJS. En revanche, il n'est pas possible de bundler 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é.

Ci-dessous, vous trouverez 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

| **ID du compte**             | ID unique du compte de votre espace de travail sur notre plateforme. Aussi appelé « ID du site ». Connectez-vous à votre compte Commanders Act et cherchez la première valeur numérique dans votre barre d'adresse. par ex. avec « <https://app.commandersact.com/en/1234/> », votre identifiant de compte est « 1234 ». |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **ID du Container**          | ID unique du Container au sein de votre compte. par ex. « 15 ».                                                                                                                                                                                                                                                          |
| **Nom du Container**         | Libellé du Container. Peut être configuré dans les « paramètres du container » du TMS. par ex. « Header Container ».                                                                                                                                                                                                     |
| **Nom du fichier Container** | Nom du fichier JavaScript du Container, peut être configuré dans les « paramètres du container » du TMS. par ex. « tc\_header\_21.js ».                                                                                                                                                                                  |
| **URL du Container**         | URL complète du Container utilisé pour l'installation. Dépend de la méthode d'hébergement. par ex. « //cdn.tagcommander.com/1234/tc\_footer\_main\_20.js ».                                                                                                                                                              |
| **Version du Container**     | <p>Instantané d'un fichier JavaScript du Container.<br>par ex. « 55.16 ».</p>                                                                                                                                                                                                                                            |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
