# Configuration des événements browser-side

Les Commanders Act Events Triggers 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 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 pouvant être accédé par les tags exécutés sur le Trigger concerné. ex. product\_id            |

### Installation

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

Pour installer un Trigger personnalisé sur le site web, il est nécessaire d'appeler une fonction JavaScript avec 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 Trigger Data Layer**

Une approche courante pour le Trigger Data Layer est d'utiliser toujours 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'ID du produit sélectionné et dans le cas d'un `video_play` événement, le `event_value` contiendrait la position actuelle dans la timeline de la vidéo. Ceci permet d'éviter de créer plusieurs noms de variables personnalisées pour chaque événement individuel et rend ainsi les Triggers 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 Commanders Act Web Container ne soit chargé. Dans ce cas, l'utilisation de la fonction Trigger provoquerait une erreur JavaScript `ReferenceError`. Par conséquent, il est 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 %}

### Tests

#### Via le Tag de Quality Assurance

Le template 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 son exécution. L'affectation de ce tag avec le Trigger permet d'enregistrer une capture instantanée du Data Layer lorsque le Trigger correspondant est exécuté.\
\
Autre méthode, plus technique : vous pouvez taper dans votre console tc\_arrray\_events lorsque l'événement est exécuté. Le Data Layer des variables de l'événement sera affiché.