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 Aktion Ereignis senden der Tag-Erweiterung enthält eine Option Geführte Ereignisse verwenden, mit der Feldwerte für die Szenarien Personalisierung anfordern (Seitenanfang) und Analytics erfassen (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 Ereignis senden Aktion in der Regel, die oben auf der Seite ausgelöst wird. Aktivieren Sie Geführte Ereignisse verwenden und wählen Sie dann Personalisierung anfordern aus. Diese Option sperrt “Type” für “Decisioning Proposition Fetch”, “Rendern visueller Personalisierungsentscheidungen” für aktiviert und “Automatisch ein Anzeigeereignis senden” für deaktiviert.

Um diese Felder stattdessen manuell festzulegen, lassen Sie Geführte Ereignisse verwenden 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 Ereignis senden Aktion in der Regel, die am unteren Seitenrand ausgelöst wird. Aktivieren Sie Geführte Ereignisse verwenden und wählen Sie dann Analytics erfassen aus. Diese Option sperrt "​ gerenderte Vorschläge einschließen zu „Aktiviert“.

Wenn Sie dieses Feld stattdessen manuell festlegen möchten, lassen Sie Geführte Ereignisse verwenden deaktiviert und aktivieren Sie gerenderte Vorschläge einbeziehen direkt. Füllen Sie optional das XDM-Feld mit einem XDM-Objekt-Datenelement, 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 Geführte Ereignisse verwenden 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 ​ Aktion " senden“ für die Regel „Seitenende“ Geführte Ereignisse verwenden 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 vom Typ „Ereignis ": ​ Sie Geführte Ereignisse verwenden, wählen Sie Personalisierung anfordern und verweisen Sie auf das Datenelement im Feld XDM.
  3. Konfigurieren Sie die Aktion „Ereignis senden ​für die Unterseite: Aktivieren Sie Geführte Ereignisse verwenden, wählen Sie Analytics erfassen aus und verweisen Sie im Feld 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 Ereignis senden-Aktion: Deaktivieren Sie Geführte Ereignisse verwenden, aktivieren Sie Visuelle Personalisierungsentscheidungen rendern und verweisen Sie auf das Datenelement im XDM-Feld.

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​ die Aktion ​Vorschläge anwenden“ und legen Sie das Feld Ansichtsname auf 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 Aktion Ereignis senden: Aktivieren Sie Geführte Ereignisse verwenden, wählen Sie Analytics erfassen aus und verweisen Sie auf das Datenelement im Feld 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
experience-platform-help-collection