Konfigurieren der Seitenansichten oben und unten in Web SDK

Bei der Bereitstellung personalisierter Erlebnisse ist die Ladezeit einer Web-Seite von entscheidender Bedeutung. Um die Zeit zu minimieren, die Benutzende auf personalisierte Inhalte warten, unterstützt Web SDK die Konfiguration von Top- und Bottom-of-Page-Ereignissen.

Die Ereignisse oben und unten auf der Seite beschreiben eine Methode zum asynchronen Laden verschiedener Elemente auf der Seite, wobei die Ladezeit der Seite auf ein Minimum beschränkt bleibt:

  • Das Ereignis „Seitenanfang“ fordert die Personalisierung an, sobald die Seite geladen wird.
  • Das Ereignis „Unten auf der Seite“ zeichnet eine Seitenansicht auf, wenn das Laden der Seite abgeschlossen ist.

Adobe Analytics ignoriert die Top-of-Page-Ereignisse, was zu einer genaueren Metrikaufzeichnung führt, da nur ein Seitentreffer aufgezeichnet wird (das untere Seitenereignis).

Sie können die oberen und unteren Ränder von Seitenereignissen auf zwei Arten konfigurieren: indem Sie die Web-SDK-JavaScript-Bibliothek (alloy()) direkt aufrufen, oder indem Sie die Web-SDK-Tag-Erweiterung in der Adobe Experience Platform Tags-Benutzeroberfläche verwenden. Die Send event-Aktion der Tag-Erweiterung enthält eine Option "Use guided events", mit der Feldwerte für die Szenarien "Request personalization" (Seitenanfang) und "Collect analytics" (Seitenende) vorkonfiguriert werden. Jedes der folgenden Beispiele zeigt beide Implementierungen.

Ereignis „Anfang der Seite“ top-of-page

Im folgenden Beispiel wird ein Ereignis „Seitenanfang“ konfiguriert, das die Personalisierung anfordert, aber Anzeigeereignisse für automatisch gerenderte Vorschläge unterdrückt. Diese Anzeigeereignisse werden stattdessen mit dem Ereignis „Seitenende“ gesendet.

JavaScript-Bibliothek
code language-js
alloy("sendEvent", {
  type: "decisioning.propositionFetch",
  renderDecisions: true,
  personalization: {
    sendDisplayEvent: false
  }
});
table 0-row-3 1-row-3 2-row-3 3-row-3
Parameter Erforderlich/Optional Beschreibung
type Erforderlich Legen Sie diesen Parameter auf decisioning.propositionFetch fest. Dieser spezielle Ereignistyp weist Adobe Analytics an, dieses Ereignis zu ignorieren. Bei Verwendung von Customer Journey Analytics können Sie auch einen Filter einrichten, um diese Ereignisse zu löschen. Weitere Informationen finden Sie unter Ereignistypen für Edge Network ​ Adobe Analytics.
renderDecisions Erforderlich Legen Sie diesen Parameter auf true fest. Dieser Parameter weist Web SDK an, von Edge Network zurückgegebene Entscheidungen zu rendern.
personalization.sendDisplayEvent Erforderlich Legen Sie diesen Parameter auf false fest. Dieser Parameter verhindert das Senden von Anzeigeereignissen.
Web SDK-Tag-Erweiterung

Konfigurieren Sie eine Send event Aktion in der Regel, die oben auf der Seite ausgelöst wird. Aktivieren Sie Use guided events und wählen Sie dann Request personalization aus. Diese Option sperrt "Type" auf "Decisioning Proposition Fetch", "Render visual personalization decisions" auf „aktiviert“ und "Automatically send a display event" auf „deaktiviert“.

Wenn Sie diese Felder stattdessen manuell festlegen möchten, lassen Sie Use guided events deaktiviert und konfigurieren Sie jedes Feld selbst.

Ereignisbeispiele unten auf der Seite bottom-of-page

Automatisch gerenderte Vorschläge bottom-auto-rendered

Im folgenden Beispiel wird ein Ereignis „Seitenende“ konfiguriert, das Anzeigeereignisse für Vorschläge sendet, die automatisch auf der Seite gerendert, aber im Ereignis "​ der Seite“ ​ wurden.

JavaScript-Bibliothek
code language-js
alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});
table 0-row-3 1-row-3 2-row-3
Parameter Erforderlich/Optional Beschreibung
personalization.includeRenderedPropositions Erforderlich Legen Sie diesen Parameter auf true fest. Dieser Parameter ermöglicht das Senden von Anzeigeereignissen, die oben auf der Seite unterdrückt wurden.
xdm Optional Verwenden Sie dieses Objekt, um alle Daten einzuschließen, die Sie für das Ereignis „Seitenende“ benötigen.
Web SDK-Tag-Erweiterung

Konfigurieren Sie eine Send event Aktion in der Regel, die am unteren Rand der Seite ausgelöst wird. Aktivieren Sie Use guided events und wählen Sie dann Collect analytics aus. Diese Option sperrt "Include rendered propositions" auf „Aktiviert“.

Wenn Sie dieses Feld stattdessen manuell festlegen möchten, lassen Sie Use guided events deaktiviert und aktivieren Sie Include rendered propositions direkt. Füllen Sie optional das XDM mit einem Datenelement XDM-Objekt, das Ihre Seitendaten enthält.

Manuell gerenderte Vorschläge bottom-manually-rendered

Im folgenden Beispiel wird ein Ereignis „Seitenende“ konfiguriert, das Anzeigeereignisse für Vorschläge sendet, die auf der Seite manuell gerendert wurden (d. h. für benutzerdefinierte Entscheidungsumfänge oder Oberflächen).

NOTE
In diesem Szenario muss das Ereignis „Seitenende“ warten, bis das Ereignis „Seitenanfang“ abgeschlossen ist, damit die Vorschläge gerendert und aufgezeichnet werden können.
JavaScript-Bibliothek
code language-js
alloy("sendEvent", {
  xdm: {
    ... // Optional bottom of page event data
    _experience: {
      decisioning: {
        propositions: propositions.map(function(p) {
          return {
            id: p.id,
            scope: p.scope,
            scopeDetails: p.scopeDetails
          };
        }),
        propositionEventType: {
          display: 1
        }
      }
    }
  }
});
table 0-row-3 1-row-3 2-row-3 3-row-3
Parameter Erforderlich/Optional Beschreibung
xdm._experience.decisioning.propositions Erforderlich In diesem Abschnitt werden die manuell gerenderten Vorschläge definiert. Sie müssen die id, scope und scopeDetails der Vorschläge einbeziehen. Weitere Informationen ​ Sie unter ​ von Anzeigeereignissen . Manuell gerenderte Personalisierungsinhalte müssen im Ereignis „Seitenende“ enthalten sein.
xdm._experience.decisioning.propositionEventType Erforderlich Legen Sie diesen Parameter auf display: 1 fest.
xdm Optional Verwenden Sie dieses Objekt, um alle Daten einzuschließen, die Sie für das Ereignis „Seitenende“ benötigen.
Web SDK-Tag-Erweiterung

Die Option "Use guided events" deckt dieses Szenario nicht ab. Konfigurieren Sie die Aktion daher manuell:

  1. Erstellen Sie ein XDM-Datenelement (oder Variable), das _experience.decisioning.propositions mit den id, scope und scopeDetails jedes gerenderten Vorschlags füllt und _experience.decisioning.propositionEventType.display auf 1 setzt. Weitere Informationen ​ Sie unter ​ von Anzeigeereignissen .

  2. Lassen Sie in der Send event für die Regel „Seitenende“ Use guided events deaktiviert und verweisen Sie auf das Datenelement im Feld "XDM".

Einzelseitenanwendung mit Ereignissen der oberen und unteren Seite spa-example

In einem Einzelseitenprogramm müssen Sie bei jeder Ansichtsänderung den Ansichtsnamen angeben, damit Web SDK die richtige Personalisierung am Seitenanfang rendert und die richtige Ansicht am Seitenende aufzeichnet.

Erste Seitenansicht spa-first-view

In diesem Beispiel ist home die Ansicht, die beim ersten Laden der Seite geladen wurde.

JavaScript-Bibliothek

Der Top-Aufruf fordert eine Personalisierung für die home-Ansicht an, ohne einen Analytics-Treffer aufzuzeichnen oder Anzeigeereignisse auszulösen. Der Aufruf unten zeichnet die Seitenansicht auf und löst die unterdrückten Anzeigeereignisse aus. Nehmen Sie in beide Aufrufe denselben viewName auf, damit die Ansicht konsistent aufgezeichnet wird.

code language-js
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
    type: "decisioning.propositionFetch",
    renderDecisions: true,
    personalization: {
        sendDisplayEvent: false
    },
    xdm: {
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
Web SDK-Tag-Erweiterung
  1. Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der Ansicht web.webPageDetails.viewName (z. B. home).

  2. Konfigurieren einer Aktion des Typs Seitenanfang Send event : Aktivieren Sie Use guided events, wählen Sie Request personalization aus und verweisen Sie auf das Datenelement im Feld XDM .

  3. Konfigurieren einer Send event-Aktion für das Ende der Seite: Aktivieren Sie Use guided events, wählen Sie Collect analytics aus und verweisen Sie im XDM auf dasselbe Datenelement, sodass die viewName in beiden Ereignissen übereinstimmt.

Zweite Seitenansicht — Option 1 spa-second-view-option-1

In diesem Beispiel ist ein einzelnes Ereignis ausreichend, da die Personalisierung für die Seite bereits abgerufen wurde.

JavaScript-Bibliothek
code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
Web SDK-Tag-Erweiterung
  1. Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der neuen Ansicht web.webPageDetails.viewName (z. B. cart).

  2. Konfigurieren Sie bei der Änderung der Ansicht eine einzelne Send event: Lassen Sie Use guided events deaktiviert, aktivieren Sie Render visual personalization decisions und verweisen Sie auf das Datenelement im XDM.

Zweite Seitenansicht — Option 2 spa-second-view-option-2

Verwenden Sie diesen Ansatz, wenn Sie das Ereignis „Ende der Seite“ verzögern müssen (z. B. wenn die Analysedaten der Seite zum Zeitpunkt der Änderung der Ansicht nicht bereit sind). Die Änderung der Ansicht wird in zwei Schritten vorgenommen:

  1. Rendern Sie oben auf der Seite die bereits abgerufenen Vorschläge, ohne einen Edge Network-Aufruf durchzuführen.
  2. Sobald die Analysedaten bereit sind, senden Sie das Ereignis „Seitenende“.

Nehmen Sie in beide Aufrufe denselben viewName auf, damit die Ansicht konsistent aufgezeichnet wird.

JavaScript-Bibliothek

Rufen Sie applyPropositions oben auf der Seite auf, um die zwischengespeicherten Vorschläge für die neue Ansicht zu rendern. Rufen Sie dann sendEvent am unteren Rand der Seite mit includeRenderedPropositions: true auf, damit die unterdrückten Anzeigeereignisse ausgelöst werden.

code language-js
// Top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
    viewName: "cart"
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});
Web SDK-Tag-Erweiterung
  1. Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der neuen Ansicht web.webPageDetails.viewName (z. B. cart).

  2. Konfigurieren Sie für das Ereignis „Anfang der Seite“ eine Apply propositions Aktion und legen Sie für das Feld "View name" den Namen der Ansicht fest (z. B. cart). Diese Aktion rendert die bereits abgerufenen Vorschläge, ohne den Edge Network zu kontaktieren.

  3. Konfigurieren Sie für das Ereignis „Ende der Seite“ eine Send event Aktion: Aktivieren Sie Use guided events, wählen Sie Collect analytics aus und verweisen Sie auf das Datenelement im XDM.

GitHub-Beispiel github-sample

Das obere und untere Beispiel im Legierungsbeispiele-Repository zeigt, wie Sie oben auf der Seite eine Personalisierung anfordern und unten Analysemetriken senden können. Laden Sie das Beispiel herunter und führen Sie es lokal aus, um zu sehen, wie die Ereignisse oben und unten auf der Seite funktionieren. Im Beispiel wird die JavaScript-Bibliothek direkt verwendet. Dasselbe Muster gilt, wenn Sie äquivalente Regeln in der Web-SDK-Tag-Erweiterung konfigurieren.

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