Vorschläge manuell rendern

Verwenden Sie dieses Muster, wenn Sie die Anwendung der Vorschlagselemente vollständig steuern müssen. Sie erstellen beispielsweise eine komplexe Benutzeroberfläche aus JSON-Inhalten oder Sie möchten benutzerdefinierte Geschäftsregeln vor dem Rendern anwenden.

​1. Anfragevorschläge

alloy("sendEvent", {
  personalization: {
    decisionScopes: ["salutation", "discount"]
  },
  xdm: { }
}).then(({ propositions = [] }) => {
  // Render in the next step
});

Weitere Informationen finden Sie unter dem personalization-Objekt im sendEvent.

​2. Vorschlagselemente rendern (Beispiel)

Beim manuellen Rendern von Vorschlägen können sie viele verschiedene Formen oder Formen annehmen. Im Folgenden finden Sie ein minimales Beispiel, das einen Vorschlag nach Umfang sucht und dann das erste HTML-Inhaltselement anwendet, das er findet.

function findPropositionByScope(propositions, scope) {
  return propositions.find((p) => p.scope === scope);
}

function renderHtmlInto(selector, html) {
  const el = document.querySelector(selector);
  if (!el) return;
  el.innerHTML = html;
}

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

  const htmlItem = discount.items?.find(
    (i) => i.schema === "https://ns.adobe.com/personalization/html-content-item"
  );

  if (!htmlItem) return { propositions, rendered: [] };

  renderHtmlInto("#daily-special", htmlItem.data.content);
  return { propositions, rendered: [discount] };
});
IMPORTANT
Wenn Sie HTML rendern, stellen Sie sicher, dass es für Ihre Umgebung sicher ist. Behandeln Sie das Rendern von Inhalten als Sicherheitsgrenze (Bereinigung, vertrauenswürdige Quellen und Überlegungen zur CSP).

​3. Zeichnen Sie Anzeigeereignisse für Ihre gerenderten Inhalte auf

Bei manuell gerenderten Vorschlägen werden Anzeigeereignisse über sendEvent Aufrufe aufgezeichnet, die auf die gerenderten Vorschläge verweisen.

function toDisplayPayload(propositions) {
  return propositions.map((p) => ({
    id: p.id,
    scope: p.scope,
    scopeDetails: p.scopeDetails
  }));
}

// Example: record display for the propositions you actually rendered.
alloy("sendEvent", {
  xdm: {
    _experience: {
      decisioning: {
        propositions: toDisplayPayload(renderedPropositions),
        propositionEventType: { display: 1 }
      }
    }
  }
});

Weitere Informationen ​ Sie unter ​ von Anzeigeereignissen .

​4. Rendern

Wenn Änderungen an der Benutzeroberfläche ein erneutes Rendern erfordern, führen Sie Ihre manuelle Rendering-Logik für die Vorschlagsdaten erneut aus, die Sie zwischengespeichert haben (oder rufen Sie sie bei Bedarf erneut ab). Wenn Sie eine Anzeige für Re-Render-Szenarien aufzeichnen müssen, finden Sie weitere Informationen unter Verwalten von Anzeigeereignissen.

recommendation-more-help
1ae86b30-e55e-49c1-ab11-9d0356a5f3e1