> 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 conteneur web est un fichier JavaScript qui a deux objectifs :

· Pouvoir utiliser les fonctions et méthodes natives du TMS

· Exécuter les solutions des partenaires (tags) qu'il contient

Il est possible, comme c'est souvent le cas, d'avoir plusieurs conteneurs pour le même site, voire la même page.

L'URL de chaque fichier JavaScript de conteneur web sera fournie, ainsi que les IDs et les noms des conteneurs, par un consultant Commanders Act pendant le processus de configuration.

### Implémentation des conteneurs sur la page

Les conteneurs web 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 conteneur.

Les conteneurs peuvent être placés à différents emplacements dans le code source de la page, selon leur usage et votre type d'activité.

Voici un exemple courant avec 3 conteneurs :

| test A/B (facultatif) | Dans le \<head>       |
| --------------------- | --------------------- |
| Analytics             | Au début de \<body>   |
| Marketing             | À la fin de \</body > |

\<head> est généralement utilisé pour les tests AB et doit être chargé de manière synchrone afin d'éviter un effet de scintillement.

Nous recommandons d'implémenter tous les conteneurs \<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 à vos conteneurs. Sinon, les tags du conteneur ne pourront pas utiliser les variables
{% endhint %}

#### Installation de `<head>` Conteneur

`<head>` Les conteneurs sont utilisés pour implémenter des Tags d'A/B-testing et de personnalisation qui ont généralement un impact sur le contenu visuel d'un site web avant sa présentation à 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 conteneur est chargé de manière synchrone afin d'éviter d'éventuels effets de scintillement du contenu.

#### Installation de `<body>` Conteneur

`<body>` Les conteneurs sont utilisés pour implémenter des Tags qui mesurent les informations. Ces conteneurs 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>` conteneur, il est possible d'implémenter `<body>` des conteneurs 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' `<script>` élément.

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

Il est possible d'implémenter des fichiers JavaScript de conteneur avec des chargeurs JavaScript comme RequireJS ou HeadJS. En revanche, il n'est pas possible de regrouper les fichiers JavaScript de conteneur avec des bundlers comme Webpack ou ParcelJS afin de s'assurer que les fichiers de conteneur soient 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 conteneur web Commanders Act.
{% endhint %}

### Test

#### Via la console du navigateur

Il est possible de journaliser tous les fichiers de conteneur chargés sur un site via la console JavaScript du navigateur. L'objet JavaScript `tC.containersLaunched` fournit des informations sur chaque conteneur web chargé.

Vous trouverez ci-dessous un exemple d'objet contenant ses informations les plus pertinentes :

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

### Définitions

| **ID du compte**                | ID unique 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. Par exemple, avec "<https://app.commandersact.com/en/1234/>", votre identifiant de compte est "1234". |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **ID du conteneur**             | ID unique du conteneur au sein de votre compte. ex. "15".                                                                                                                                                                                                                                                    |
| **Nom du conteneur**            | Libellé du conteneur. Peut être configuré dans les "container settings" de TMS. ex. "Header Container".                                                                                                                                                                                                      |
| **Nom de fichier du conteneur** | Nom du fichier JavaScript du conteneur, peut être configuré dans les "container settings" de TMS. ex. "tc\_header\_21.js".                                                                                                                                                                                   |
| **URL du conteneur**            | URL complète du conteneur utilisée pour l'installation. Dépend de la méthode d'hébergement. ex. "//cdn.tagcommander.com/1234/tc\_footer\_main\_20.js".                                                                                                                                                       |
| **Version du conteneur**        | <p>Instantané d'un fichier JavaScript de conteneur.<br>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.
