Gestion des événements d’affichage dans le SDK Web

Les événements d’affichage indiquent aux services de personnalisation ou d’analyse qu’un élément spécifique de contenu personnalisé a été affiché pour l’utilisateur. L’envoi d’événements d’affichage améliore la précision des rapports en aidant les systèmes en aval à faire la distinction entre le contenu demandé et le contenu réellement affiché.

Envoyer automatiquement des événements d’affichage

Les événements d’affichage automatique sont généralement l’option la plus simple. Elles sont envoyées immédiatement après que Web SDK a terminé le rendu du contenu éligible à partir de la réponse sendEvent, ce qui peut améliorer la précision des rapports.

Pour envoyer automatiquement des événements d’affichage, utilisez un appel sendEvent qui définit renderDecisions sur true et personalization.sendDisplayEvent sur true (ou omettez-le, car true est la valeur par défaut) :

alloy("sendEvent", {
  renderDecisions: true,
  personalization: { }, // sendDisplayEvent defaults to true
  xdm: {
    web: {
      webPageDetails: {
        name: "home"
      }
    }
  }
});

Envoi d’événements d’affichage dans les appels de sendEvent suivants

L’inclusion d’événements d’affichage dans un appel de sendEvent ultérieur est utile lorsque vous souhaitez joindre des données de chargement de page supplémentaires qui ne sont pas disponibles lors de la demande de personnalisation. Elle est généralement utilisée lors de l’implémentation d’événements de page supérieure et inférieure. Cette implémentation correcte des événements d’affichage permet d’éviter les problèmes liés au Taux de rebond dans Adobe Analytics.

Envoi d’événements d’affichage pour les propositions générées manuellement

Si vous effectuez le rendu du contenu vous-même (rendu entièrement manuel ou à l’aide de applyPropositions), vous devez envoyer explicitement les événements d’affichage à l’aide de la commande sendEvent . Appelez sendEvent avec une payload XDM qui inclut les propriétés suivantes :

Les deux exemples suivants utilisent cette fonction d’assistance pour créer la payload XDM de l’événement d’affichage :

function buildDisplayEventXdm(renderedPropositions) {
  return {
    eventType: "decisioning.propositionDisplay",
    _experience: {
      decisioning: {
        propositions: renderedPropositions.map(({ id, scope, scopeDetails }) => ({
          id,
          scope,
          scopeDetails
        })),
        propositionEventType: { display: 1 }
      }
    }
  };
}

L’exemple suivant utilise le rendu manuel avec des événements d’affichage :

function renderExample(propositions) {
  // Your custom logic here. Return ONLY the propositions that were actually rendered.
  // For example: return [propositions[0]];
  return [];
}

alloy("sendEvent", {
  personalization: { decisionScopes: ["discount"] },
  xdm: { }
}).then(({ propositions = [] }) => {
  const renderedPropositions = renderExample(propositions);
  if (!renderedPropositions.length) { return; }
  return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});

L’exemple suivant utilise la commande applyPropositions avec des événements d’affichage. Il enchaîne sendEvent, applyPropositions, puis un autre sendEvent :

alloy("sendEvent", {
  personalization: { decisionScopes: ["discount", "salutation"] },
  xdm: { }
}).then(({ propositions = [] }) => {
  return alloy("applyPropositions", {
    propositions,
    metadata: {
      salutation: { selector: "#salutation", actionType: "setHtml" },
      discount: { selector: "#daily-special", actionType: "replaceHtml" }
    }
  });
}).then(({ propositions: renderedPropositions = [] }) => {
  if (!renderedPropositions.length) { return; }
  return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});

Erreurs courantes à éviter