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

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

### Définitions

| Métrique               | Description                                                                                                       |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Libellé du Trigger** | Libellé d’un événement utilisé par les utilisateurs de Commanders Act pour exécuter des Tags. ex. add\_to\_basket |
| **Trigger Data Layer** | Un objet JavaScript auquel les Tags exécutés sur le Trigger مرتبط peuvent accéder. ex. product\_id                |

### Installation

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

Pour installer un Trigger personnalisé sur le site web, il est nécessaire d’appeler une fonction JavaScript avec le schéma suivant :

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

Un exemple typique est un *Add to basket* événement où l’identifiant 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 Trigger Data Layer**

Une approche courante pour le Trigger Data Layer 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` Trigger, le `event_value` contiendrait l’identifiant 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 les Trigger plus génériques.
{% endhint %}

{% hint style="warning" %}
**Gestion des erreurs de Trigger**

Dans certaines situations, il peut arriver qu’un utilisateur interagisse avec un Trigger personnalisé avant que le fichier du Commanders Act Web Container 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 de contrôle 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 lors de l’exécution. Associer ce Tag au Trigger permet d’enregistrer un instantané du Data Layer lorsque le Trigger correspondant est exécuté.\
\
Une autre façon, plus technique : vous pouvez saisir dans votre console tc\_arrray\_events lorsque l’événement est exécuté. Le Data Layer des variables de l’événement s’affichera.


---

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