Événements

Les événements indiquent à d’autres scripts qu’un événement s’est produit sur la page, tel qu’une page vue, un clic ou un envoi de formulaire. Vous poussez un événement vers la couche de données client (ACDL) Adobe en tant qu’objet avec une clé event. Les scripts qui ont enregistré un écouteur d’événement pour ce nom d’événement sont appelés.

Objets d’événement event-objects

Un objet événement possède les clés suivantes :

window.adobeDataLayer = window.adobeDataLayer || [];

// An event with no data
window.adobeDataLayer.push({ event: "page loaded" });

// An event with extra information for listeners
window.adobeDataLayer.push({
  event: "click",
  eventInfo: { reference: "component.hero-1" }
});

// An event that also updates the computed state
window.adobeDataLayer.push({
  event: "cart add",
  eventInfo: { sku: "a-100" },
  cart: { itemCount: 3 }
});

Après ces notifications push, l’état calculé est { cart: { itemCount: 3 } }. Les clés event et eventInfo ne font pas partie de l’état calculé, mais les objets d’événement restent dans le tableau de la couche de données en tant que historique.

Si la clé event est manquante, vide ou n’est pas une chaîne, ACDL traite l’objet comme un push de données. Aucun écouteur d’événement n’est appelé et l’état calculé n’inclut pas les clés event ou eventInfo.

Événements intégrés built-in-events

Outre l’événement nommé, l’ACDL déclenche deux événements intégrés :

Le tableau suivant indique les événements déclenchés par chaque type de notification push :

Lorsqu’une notification push déclenche plusieurs événements, l’ACDL appelle les écouteurs dans l’ordre suivant : adobeDataLayer:event, puis adobeDataLayer:change, puis l’événement nommé.

Ce que les auditeurs reçoivent listener-arguments

L’ACDL appelle chaque écouteur avec un argument : une copie de l’objet complet qui a été envoyé, y compris event, eventInfo et toutes les données.

window.adobeDataLayer.push(function(dl) {
  dl.addEventListener("cart add", function(event) {
    console.log(event.eventInfo.sku);       // "a-100"
    console.log(event.cart.itemCount);      // 3
    console.log(dl.getState("cart"));       // { itemCount: 3 }
  });
});

Les détails suivants s’appliquent à chaque écouteur :

Écouter les événements passés et futurs scope

Par défaut, un nouveau listener s’exécute pour faire correspondre les événements qui se trouvent déjà dans le tableau de couche de données et pour faire correspondre les événements qui sont transmis ultérieurement. Cela signifie qu’un script peut ajouter son écouteur à tout moment sans ignorer d’événements qui se sont produits précédemment, comme une page vue qui a été envoyée avant le chargement de votre bibliothèque de balises.

Vous pouvez modifier ce comportement à l’aide de l’option scope pour n’écouter que les événements passés ou futurs. Pour savoir comment ACDL conserve les événements passés, consultez File d’attente et historique.

Éviter les boucles sans fin loops

Un écouteur peut envoyer des notifications push à la couche de données. Processus ACDL qui effectuent une notification push immédiatement, avant le retour du listener. Si un écouteur envoie quelque chose qui déclenche à nouveau le même écouteur, les appels ne se terminent jamais tant que le navigateur ne renvoie pas une erreur de dépassement de capacité de la pile, telle que RangeError: Maximum call stack size exceeded. Par exemple, un écouteur adobeDataLayer:change qui transmet des données se déclenche lui-même.

Envoi depuis un listener uniquement lorsque le nouveau push ne peut pas déclencher le même listener.