> 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/browser-side-events-setup.md).

# Configuration des événements côté navigateur

Les déclencheurs d’événements Commanders Act sont des événements sur site utilisés par les utilisateurs de Commanders Act pour exécuter dynamiquement des Tags.

### Définitions

| Métrique                      | Description                                                                                                       |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Libellé du déclencheur**    | Libellé d’un événement utilisé par les utilisateurs de Commanders Act pour exécuter des Tags. ex. add\_to\_basket |
| **Data Layer du déclencheur** | Un objet JavaScript accessible par les Tags exécutés sur le Trigger associé. ex. product\_id                      |

### Installation

Commanders Act permet de configurer automatiquement des déclencheurs courants sans l’intervention d’une équipe technique (p. ex. *Container loaded*, *DOM ready* ou *Vertical Scroll 25%*). Lorsque les déclencheurs par défaut ne suffisent pas, il est possible pour le personnel technique d’implémenter des déclencheurs personnalisés. Les déclencheurs nécessaires sont définis lors du processus de configuration de Commanders Act, mais vous pouvez trouver une liste des déclencheurs natifs sur [cette page](/fr/fonctionnalites/sources/sources-catalog/web/containers/user-guides-for-browser-side-platform/tags/rules/triggers.md).

Pour installer un déclencheur personnalisé sur le site web, il est nécessaire d’appeler une fonction JavaScript selon le modèle suivant :

```javascript
tC.event.{{ Trigger Label }}(this, {{ Trigger Data Layer }});
```

Un exemple typique est un *Add to basket* événement où l’ID du produit sélectionné est envoyé avec l’événement :

```javascript
tC.event.add_to_basket(this, { product_id: "12345" });
```

{% hint style="info" %}
**Propriétés du Data Layer du déclencheur**

Une approche courante pour le Data Layer du déclencheur consiste à toujours utiliser les mêmes propriétés, comme `event_label`, `event_type` et `event_value`— ainsi, dans le cas d’un `add_to_basket` Déclenche le `event_value` contiendrait l’ID du produit sélectionné et, dans le cas d’un `video_play` événement, le `event_value` contiendrait la position actuelle dans la chronologie de la vidéo. Cela permet d’éviter de créer plusieurs noms de variables personnalisées pour chaque événement individuel et rend donc le déclencheur plus générique.
{% endhint %}

{% hint style="warning" %}
**Gestion des erreurs des déclencheurs**

Dans certaines situations, il peut arriver qu’un utilisateur interagisse avec un déclencheur personnalisé avant que le fichier Commanders Act Web Container ne soit chargé. Dans ce cas, l’utilisation de la fonction Trigger provoquerait une erreur JavaScript `ReferenceError`. Il est donc recommandé de vérifier la disponibilité de la fonction Trigger avant de l’utiliser.

```javascript
if (tC && tC.event && typeof tC.event.add_to_basket === "function") {
    tC.event.add_to_basket(this, { product_id: "12345" });
}
```

{% endhint %}

### Test

#### Via le Tag d’assurance qualité

Le modèle de Tag *Commanders Act - Event QA* dans la bibliothèque de Tags Commanders Act, affiche automatiquement les informations du Data Layer de l’événement dans la console JavaScript lorsqu’il est exécuté. L’association de ce Tag avec le déclencheur permet d’enregistrer un instantané du Data Layer lorsque le déclencheur concerné est exécuté.\
\
Autre méthode, plus technique : vous pouvez saisir tc\_arrray\_events dans votre console lorsque l’événement est exécuté. Le Data Layer des variables de l’événement sera affiché.


---

# 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/browser-side-events-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.