Dokumentation Journey Optimizer Handbuch für Journey Optimizer

Beispiele für Implementierungsmethoden für Code-basierte Erlebnisse implementation-samples

Last update: Tue Nov 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Code-basierte Erlebnisse

Erstellt für:

Experte
Entwickler

Code-basierte Erlebnisse unterstützen jede Art von Kundenimplementierung. Auf dieser Seite finden Sie Beispiele für die einzelnen Implementierungsmethoden:

Client-seitig
Server-seitig
Hybrid

IMPORTANT

Folgen Sie diesem Link, um Beispielimplementierungen für verschiedene Anwendungsfälle für Personalisierung und Experimente zu finden. Sehen Sie sich die Anwendungsfälle an und führen Sie sie aus, um besser zu verstehen, welche Implementierungsschritte erforderlich sind und wie der vollständige Personalisierungsfluss funktioniert.

Client-seitige Implementierung client-side-implementation

Wenn Sie eine Client-seitige Implementierung haben, können Sie eines der AEP-Client-SDKs verwenden: AEP Web SDK oder AEP Mobile SDK.

Die folgenden Schritte beschreiben den Prozess zum Abrufen von Inhalten, die von Code-basierten Erlebnis-Journeys und -kampagnen in einer Beispielimplementierung mit dem Web SDK am Edge veröffentlicht wurden, und zum Anzeigen der personalisierten Inhalte.

Die Schritte zur Implementierung eines Code-basierten Kanals mit Mobile SDK sind in diesem Tutorial beschrieben.

note note
NOTE
Beispielimplementierungen für Mobile-Anwendungsfälle sind für die iOS-App und Android-App verfügbar.

Funktionsweise – Web SDK client-side-how

Das Web SDK ist auf der Seite enthalten.

Sie müssen den Befehl sendEvent verwenden und den Oberflächen-URI angeben, um den Personalisierungsinhalt abzurufen.

code language-javascript
`alloy("sendEvent", { renderDecisions: true, personalization: { surfaces: ["#sample-json-content"], }, }).then(applyPersonalization("#sample-json-content"));`

Elemente von Code-basierten Erlebnissen sollten vom Implementierungs-Code manuell angewendet werden (unter Verwendung der Methode applyPersonalization), um das DOM basierend auf der Entscheidung zu aktualisieren.

Bei Code-basierten Erlebnis-Journeys und -kampagnen müssen Anzeigeereignisse manuell gesendet werden, um anzugeben, wann der Inhalt angezeigt wurde. Dies geschieht über den Befehl sendEvent.

code language-javascript

code language-javascript
`function sendDisplayEvent(decision) { const { id, scope, scopeDetails = {} } = decision; alloy("sendEvent", { xdm: { eventType: "decisioning.propositionDisplay", _experience: { decisioning: { propositions: [ { id: id, scope: scope, scopeDetails: scopeDetails, }, ], }, }, }, }); }`

function sendDisplayEvent(decision) {
  const { id, scope, scopeDetails = {} } = decision;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionDisplay",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
        },
      },
    },
  });
}

Bei Code-basierten Erlebnis-Journeys und -kampagnen müssen Interaktionsereignisse manuell gesendet werden, um anzugeben, wann die Benutzerin oder der Benutzer mit dem Inhalt interagiert hat. Dies geschieht über den Befehl sendEvent.

code language-javascript

code language-javascript
`function sendInteractEvent(label, proposition) { const { id, scope, scopeDetails = {} } = proposition; alloy("sendEvent", { xdm: { eventType: "decisioning.propositionInteract", _experience: { decisioning: { propositions: [ { id: id, scope: scope, scopeDetails: scopeDetails, }, ], propositionEventType: { interact: 1 }, propositionAction: { label: label }, }, }, }, }); }`

function sendInteractEvent(label, proposition) {
  const { id, scope, scopeDetails = {} } = proposition;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionInteract",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
          propositionEventType: {
            interact: 1
          },
          propositionAction: {
            label: label
          },
        },
      },
    },
  });
}

Wichtige Beobachtungen

Cookies

Cookies werden verwendet, um die Benutzeridentität und Cluster-Informationen beizubehalten. Bei Verwendung einer Hybridimplementierung übernimmt das Web SDK das Speichern und Senden dieser Cookies während des Lebenszyklus der Anfrage automatisch.

Zweck

Gespeichert von

Gesendet von

kndctr_AdobeOrg_identity

Enthält Details zur Benutzeridentität

Web SDK

kndctr_AdobeOrg_cluster

Gibt an, welcher Erlebnis-Edge-Cluster zur Erfüllung der Anfragen verwendet werden soll

Web SDK

Anfrage-Platzierung

Anfragen an die Adobe Experience Platform-API sind erforderlich, um Vorschläge abzurufen und eine Benachrichtigung zur Anzeige zu senden. Bei Verwendung einer Client-seitigen Implementierung sendet das Web SDK diese Anfragen, wenn der Befehl sendEvent verwendet wird.

Anfrage

Gemacht von

Interaktionsanfrage zum Abrufen von Vorschlägen

Web SDK mit dem Befehl „sendEvent“

Interaktionsanfrage zum Senden von Anzeigebenachrichtigungen

Web SDK mit dem Befehl „sendEvent“

Flussdiagramm

Server-seitige Implementierung server-side-implementation

Bei einer Server-seitigen Implementierung, kann eine der AEP Edge Network-APIs verwendet werden.

Die folgenden Schritte beschreiben den Prozess, um die Inhalte abzurufen, die von den Code-basierten Erlebnis-Journeys und -kampagnen in einer Beispielimplementierung mit dem Edge Network-API für eine Web-Seite am Edge veröffentlicht wurden und die personalisierten Inhalte anzeigen.

Funktionsweise

Die Web-Seite wird angefordert und alle Cookies, die zuvor vom Browser mit dem Präfix kndctr_ gespeichert wurden, sind enthalten.

Wenn die Seite vom Anwendungs-Server angefordert wird, wird ein Ereignis an den Endpunkt der interaktiven Datenerfassung gesendet, um Personalisierungsinhalte abzurufen. Diese Beispielanwendung verwendet Hilfsmethoden, um das Erstellen und Senden von Anfragen an die API zu vereinfachen (siehe aepEdgeClient.js). Die Anfrage ist jedoch einfach eine POST mit einer Payload, die ein Ereignis und eine Abfrage enthält. Die Cookies (sofern verfügbar) aus dem vorherigen Schritt sind mit der Anfrage in dem Array meta>state>entries enthalten.

code language-javascript

code language-javascript
fetch( "https://edge.adobedc.net/ee/v2/interact?dataStreamId=abc&requestId=123", { headers: { accept: "/", "accept-language": "en-US,en;q=0.9", "cache-control": "no-cache", "content-type": "text/plain; charset=UTF-8", pragma: "no-cache", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "cross-site", "sec-gpc": "1", "Referrer-Policy": "strict-origin-when-cross-origin", Referer: "https://localhost/", }, body: JSON.stringify({ event: { xdm: { eventType: "decisioning.propositionFetch", web: { webPageDetails: { URL: "https://localhost/", }, webReferrer: { URL: "", }, }, identityMap: { FPID: [ { id: "xyz", authenticatedState: "ambiguous", primary: true, }, ], }, timestamp: "2022-06-23T22:21:00.878Z", }, data: {}, }, query: { identity: { fetch: ["ECID"], }, personalization: { schemas: [ "https://ns.adobe.com/personalization/default-content-item", "https://ns.adobe.com/personalization/html-content-item", "https://ns.adobe.com/personalization/json-content-item", "https://ns.adobe.com/personalization/redirect-item", "https://ns.adobe.com/personalization/dom-action", ], surfaces: ["web://localhost/","web://localhost/#sample-json-content"], }, }, meta: { state: { domain: "localhost", cookiesEnabled: true, entries: [ { key: "kndctr_XXX_AdobeOrg_identity", value: "abc123", }, { key: "kndctr_XXX_AdobeOrg_cluster", value: "or2", }, ], }, }, }), method: "POST", } ).then((res) => res.json());

fetch(
  "https://edge.adobedc.net/ee/v2/interact?dataStreamId=abc&requestId=123",
  {
    headers: {
      accept: "*/*",
      "accept-language": "en-US,en;q=0.9",
      "cache-control": "no-cache",
      "content-type": "text/plain; charset=UTF-8",
      pragma: "no-cache",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "cross-site",
      "sec-gpc": "1",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      Referer: "https://localhost/",
    },
    body: JSON.stringify({
      event: {
        xdm: {
          eventType: "decisioning.propositionFetch",
          web: {
            webPageDetails: {
              URL: "https://localhost/",
            },
            webReferrer: {
              URL: "",
            },
          },
          identityMap: {
            FPID: [
              {
                id: "xyz",
                authenticatedState: "ambiguous",
                primary: true,
              },
            ],
          },
          timestamp: "2022-06-23T22:21:00.878Z",
        },
        data: {},
      },
      query: {
        identity: {
          fetch: ["ECID"],
        },
        personalization: {
          schemas: [
            "https://ns.adobe.com/personalization/default-content-item",
            "https://ns.adobe.com/personalization/html-content-item",
            "https://ns.adobe.com/personalization/json-content-item",
            "https://ns.adobe.com/personalization/redirect-item",
            "https://ns.adobe.com/personalization/dom-action",
          ],
          surfaces: ["web://localhost/","web://localhost/#sample-json-content"],
        },
      },
      meta: {
        state: {
          domain: "localhost",
          cookiesEnabled: true,
          entries: [
            {
              key: "kndctr_XXX_AdobeOrg_identity",
              value: "abc123",
            },
            {
              key: "kndctr_XXX_AdobeOrg_cluster",
              value: "or2",
            },
          ],
        },
      },
    }),
    method: "POST",
  }
).then((res) => res.json());

Das JSON-Erlebnis aus den Code-basierten Erlebnis-Journeys und der Erlebniskampagne wird aus der Antwort gelesen und beim Erstellen der HTML-Antwort verwendet.

Bei Code-basierten Erlebnis-Journeys und -kampagnen müssen Anzeigeereignisse manuell in der Implementierung gesendet werden, um anzugeben, wann der Journey- oder Kampagneninhalt angezeigt wurde. In diesem Beispiel wird die Benachrichtigung Server-seitig während des Lebenszyklus der Anfrage gesendet.

code language-javascript

code language-javascript
function sendDisplayEvent(aepEdgeClient, req, propositions, cookieEntries) { const address = getAddress(req); aepEdgeClient.interact( { event: { xdm: { web: { webPageDetails: { URL: address }, webReferrer: { URL: "" }, }, timestamp: new Date().toISOString(), eventType: "decisioning.propositionDisplay", _experience: { decisioning: { propositions: propositions.map((proposition) => { const { id, scope, scopeDetails } = proposition; return { id, scope, scopeDetails, }; }), }, }, }, }, query: { identity: { fetch: ["ECID"] } }, meta: { state: { domain: "", cookiesEnabled: true, entries: [...cookieEntries], }, }, }, { Referer: address, } ); }

function sendDisplayEvent(aepEdgeClient, req, propositions, cookieEntries) {
  const address = getAddress(req);

  aepEdgeClient.interact(
    {
      event: {
        xdm: {
          web: {
            webPageDetails: { URL: address },
            webReferrer: { URL: "" },
          },
          timestamp: new Date().toISOString(),
          eventType: "decisioning.propositionDisplay",
          _experience: {
            decisioning: {
              propositions: propositions.map((proposition) => {
                const { id, scope, scopeDetails } = proposition;

                return {
                  id,
                  scope,
                  scopeDetails,
                };
              }),
            },
          },
        },
      },
      query: { identity: { fetch: ["ECID"] } },
      meta: {
        state: {
          domain: "",
          cookiesEnabled: true,
          entries: [...cookieEntries],
        },
      },
    },
    {
      Referer: address,
    }
  );
}

Wenn die HTML-Antwort zurückgegeben wird, werden die Identitäts- und Cluster-Cookies in der Antwort vom Anwendungs-Server gesetzt.

Wichtige Beobachtungen

Cookies

Cookies werden verwendet, um die Benutzeridentität und Cluster-Informationen beizubehalten. Bei Verwendung einer Server-seitigen Implementierung muss der Anwendungs-Server das Speichern und Senden dieser Cookies während des Lebenszyklus der Anfrage übernehmen.

Zweck

Gespeichert von

Gesendet von

kndctr_AdobeOrg_identity

Enthält Details zur Benutzeridentität

Anwendungs-Server

kndctr_AdobeOrg_cluster

Gibt an, welcher Erlebnis-Edge-Cluster zur Erfüllung der Anfragen verwendet werden soll

Anwendungs-Server

Anfrage-Platzierung

Anfrage

Gemacht von