# Stratégies courantes de Trigger

Vous trouverez ci-après les configurations courantes de Commanders Act Trigger.

## Trigger de Page View

Dans la plupart des cas, les événements de page view sont pris en charge par le *Container loaded* et *DOM ready* Trigger intégré à Commanders Act. Il suffit donc de configurer le Data Layer et le Container pour exécuter les Tags lors des page views. Dans le cas de pages web pilotées par JavaScript, il est parfois nécessaire de suivre davantage les « virtual page views », par exemple lorsque les étapes d’un tunnel de vente (connexion, saisie des informations d’expédition, saisie des informations de paiement, confirmation de commande, succès de commande) sont implémentées via une fonctionnalité JavaScript et non via des pages individuelles avec des URL distinctes.

Dans ce cas, il est courant de suivre la page view initiale avec le *Container loaded* ou *DOM ready* Trigger et les virtual page views suivantes via un Trigger personnalisé. Pour ce scénario, il serait nécessaire de suivre ces étapes à chaque virtual page view suivante.

#### **1. Mettre à jour `tc_vars` Data Layer**

Le Data Layer doit être mis à jour avec les nouvelles métadonnées de la virtual page view suivante.

```javascript
window.tc_vars = {
    env_template: "homepage",
    env_work: "prod",
    page_name: "Homepage",
    page_keywords: ["homepage", "home", "entrypage", "index"],
    product_name: "",
    (…)
};
```

**2. Recharger le Container**

Certaines fonctionnalités internes du Container (par exemple les Internal Variables) ne sont calculées que lorsque le Container a été chargé initialement. Pour les recharger avec le Data Layer mis à jour, il est nécessaire de recharger le Container via une fonction JavaScript.

```javascript
tC.container.reload();
```

**3. Exécuter les Triggers**

Après ces étapes, il est alors nécessaire de signaler un Trigger personnalisé pour exécuter les Tags associés.

```javascript
cact('emit', 'page_view', {});
```

Pour utiliser les attributs d’événement, vous pouvez spécifier l’événement ou l’élément comme premier argument.

```html
<a href="/home" onclick="cact('emit', 'pageview', { from: this, some_data: 'some_value' })">Home</a>
```

***Ancienne méthode***

```javascript
tC.event.pageview({}, {});
```

Pour utiliser les attributs d’événement, vous devez spécifier l’événement ou l’élément comme argument. `event` est une variable spéciale qui est toujours disponible à l’intérieur de `onclick` et `on*` attributs.

```html
<a href="/home" onclick="tC.event.pageview(event, {}))">Home</a>
```

{% hint style="info" %}
Les étapes 2 et 3 sont souvent utilisées conjointement ; il est donc possible de les combiner en un seul appel. par ex. `tC.container.reload({ events: { pageview: [{}, {}] } });`
{% endhint %}

## Click Trigger

L’implémentation du Click Trigger dépend du scénario. par ex. *L’utilisateur est-il redirigé vers un autre site lorsqu’il clique sur un élément ?* et *La page suivante s’ouvre-t-elle dans un nouvel onglet ?*.

Vous trouverez ci-après une liste de scénarios courants pour le Click Trigger.

### Scénarios

#### Le clic redirige vers une page interne

Les liens ou interactions qui redirigent l’utilisateur vers une autre page interne sont difficiles à suivre. La raison est que les Tags ont généralement besoin de plus de temps pour s’exécuter que le navigateur n’en a besoin pour naviguer vers la page suivante. Cela peut annuler accidentellement l’exécution des Tags et donc les capacités de suivi associées.

Pour suivre correctement ce type de scénario, il est important de s’aligner avec le fournisseur du Tag pour une solution. Les solutions typiques sont :

* Le Tag retarde la navigation de la page jusqu’à ce que le Tag ait terminé son exécution
* Le Tag utilise le Beacon Browser API, qui envoie les appels de tracking en arrière-plan

Ces options nécessitent généralement une configuration du code du Tag d’événement.

#### Le clic redirige vers une page externe

Les liens externes sont de préférence ouverts dans un autre onglet de navigateur en utilisant l’option `target="_blank"` sur les liens anchor. Cela permet aux Tags de terminer leur travail sur l’ancien onglet, tandis que les utilisateurs peuvent déjà naviguer vers la nouvelle page externe dans un nouvel onglet.

Si les liens externes ne peuvent pas être ouverts dans un nouvel onglet, ce scénario doit suivre les mêmes recommandations que le scénario précédent.

#### Le clic ne redirige pas vers une autre page

Certains événements de clic ne redirigent pas vers une nouvelle page. Des exemples typiques sont les commandes de transport vidéo ou les interactions avec des carrousels d’images.

Ces événements de clic peuvent généralement être suivis avec moins de risque, car les Tags disposent de suffisamment de temps pour s’exécuter sur la même page.

### Configuration

#### Avec l’interface Commanders Act

Les utilisateurs de Commanders Act peuvent configurer des Click Triggers courants avec un effort minimal via l’interface Web Containers en les sélectionnant à l’aide d’un chemin de sélecteur CSS.

Ce Trigger fonctionne dans de nombreux scénarios, mais présente deux inconvénients :

1. L’utilisation d’un chemin de sélecteur CSS générique pour configurer un Trigger est instable et peut casser lors de futures versions du code du site lorsque le CSS est mis à jour.
2. Commanders Act ne peut identifier que les éléments chargés de manière synchrone sur le site. Les éléments chargés de manière asynchrone ne peuvent pas être surveillés par le Trigger Commanders Act prédéfini.

Les bons scénarios pour configurer des Commanders ActTriggers avec l’interface sont :

1. Campagne onsite qui doit être mesurée sur une courte période (quelques semaines)
2. Tracking général des clics jusqu’à ce que l’équipe de développement web puisse implémenter un Trigger personnalisé.

#### Avec un Trigger personnalisé

Le personnel technique peut implémenter des Triggers personnalisés pour suivre les clics sur un site web. Cette approche est plus stable que la configuration d’un click Trigger avec l’interface, mais nécessite généralement un certain temps avant que l’équipe de développement web puisse les implémenter. Il est donc recommandé d’implémenter des Triggers intermédiaires avec l’interface jusqu’à leur mise en place sur le site.

Les Triggers personnalisés ne doivent pas être implémentés pour des campagnes à court terme, mais doivent être privilégiés pour des fonctionnalités critiques pour l’entreprise telles que *Add to basket* ou *Inscription réussie*.

Une manière courante de configurer un click Trigger consiste à mettre en place `data-attributes` sur tous les éléments dont les clics doivent être suivis. Ces attributs peuvent ensuite être renseignés par le CMS du site avec des valeurs, afin que, par exemple, l’équipe marketing puisse configurer elle-même un « Click Trigger » pour un nouveau Teaser. En HTML, cela pourrait ressembler à ceci :

```markup
<a href="..." class="btn btn--cta" data-tracking-action="click" data-tracking-label="My CTA" data-tracking-value="campaign-1234">Buy now!</a>
```

Dans la Commanders Act Platform, il est alors possible de capter les clics sur ces éléments pour exécuter un Trigger personnalisé. Avec jQuery, cela pourrait ressembler à ceci :

```javascript
(function(){

    if (!$) {
        console.log("Commanders Act | Error | jQuery not available in Commanders Act Click Trigger!");
        return;
    }

    var eventActionSelector = '[data-tracking-action="click"]';
    var eventLabelAttribute = 'data-tracking-label';
    var eventValueAttribute = 'data-tracking-value';

    var eventHandler = function(event) {

        var eventData = {};
        eventData.event_action = "click";
        eventData.event_label = $(this).attr("data-tracking-label");
        eventData.event_value = $(this).attr("data-tracking-value");

      	if (tC.event && typeof tC.event[triggerName] === "function"){
            // ancienne méthode
            // tC.event["my_click_trigger"](event, eventData);

            eventData.from = event; // nécessaire pour utiliser les attributs d’événement à l’intérieur du tag
            cact('emit', 'my_click_trigger', eventData);
      	}

    }

    // Configurer le gestionnaire d’événements sur body via la délégation d’événements pour inclure les éléments asynchrones
    $("body").on("click", eventElementSelector, eventHandler);

}());
```

{% hint style="info" %}
Cette approche aboutit à une bonne séparation des responsabilités entre le code du site web et Commanders Act. Le site web est responsable de fournir les données de tracking et d’indiquer quels éléments doivent être trackables. Commanders Act est responsable de l’amorçage du code de tracking des clics et de l’exécution des Tags associés.
{% endhint %}


---

# 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/best-practices/common-trigger-strategies.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.