Konfigurieren von Ereignissen am Anfang und Ende der Seite im Web SDK

Wenn Sie Ihren Kunden personalisierte Erlebnisse bereitstellen möchten, ist die Ladezeit einer Webseite von entscheidender Bedeutung.

Um die Ladezeiten zu optimieren und die Personalisierung so schnell wie möglich bereitzustellen, unterstützt das Web SDK die Konfiguration der oberen und unteren Seitenereignisse.

Oben und unten von Seitenereignissen beschreiben die Methode zum asynchronen Laden verschiedener Elemente auf der Seite, wobei die Seitenladezeit auf ein Minimum beschränkt bleibt.

Diese Konfiguration minimiert die Wartezeit, die ein Benutzer hat, bis der personalisierte Inhalt geladen ist.

Hinsichtlich der Genauigkeit von Metriken kann Adobe Analytics den Anfang von Seitenereignissen ignorieren, was zu einer präziseren Metrikaufzeichnung führt, da nur ein Seitentreffer aufgezeichnet wird (am Ende des Seitenereignisses).

Anwendungsfälle use-cases

Ein Sportbekleidungshändler möchte seinen Käufern personalisierte Erlebnisse bieten und dabei gleichzeitig die Benutzerspannungen beim Besuch seiner Website minimieren, während er gleichzeitig in der Lage ist, genaue Besuchermetriken zu erfassen.

Durch die Verwendung der Ereignisse oben und unten auf der Seite im Web SDK kann das Marketing-Team den Personalisierungsversand optimal konfigurieren:

  • Das Web SDK sendet eine Personalisierungsanfrage, die geladen wird, sobald die Seite geladen wird. Dies ist der Anfang des Seitenereignisses.
  • Wenn das Laden der Seite abgeschlossen ist, wird ein Seitenansichtsereignis aufgezeichnet. Dies geschieht später im Seitenladeprozess. Dies ist das Ende des Seitenereignisses.

Beispiel für Seitenereignis oben top-of-page

Das folgende Codebeispiel veranschaulicht einen oberen Rand der Seitenereigniskonfiguration, der eine Personalisierung anfordert, jedoch nicht Senden von Anzeigeereignissen für automatisch gerenderte Vorschläge. Die Anzeige von Ereignissen wird als Teil des Seitenende-Ereignisses gesendet.

Anfang des Seitenereignisses
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. Dieser Ereignistyp weist Adobe Analytics an, dieses Ereignis abzulegen. Bei Verwendung von Customer Journey Analytics können Sie auch einen Filter einrichten, um diese Ereignisse abzulegen.
renderDecisions Erforderlich Legen Sie diesen Parameter auf true. Dieser Parameter weist das Web SDK an, vom Edge Network zurückgegebene Entscheidungen zu rendern.
personalization.sendDisplayEvent Erforderlich Legen Sie diesen Parameter auf false. Dadurch wird das Senden von Ereignissen verhindert.

Beispiele für Seitenereignisse am Ende bottom-of-page

Automatisch gerenderte Vorschläge

Das folgende Codebeispiel veranschaulicht einen unteren Teil der Seitenereigniskonfiguration, der Anzeigeereignisse für Vorschläge sendet, die automatisch auf der Seite gerendert wurden, für die jedoch Anzeigeereignisse unterdrückt wurden in Seitenanfang -Ereignis.

note note
NOTE
In diesem Szenario müssen Sie das Ende des Seitenereignisses aufrufen after oben auf Seite eins. Das Ende des Seitenereignisses muss jedoch nicht warten, bis der Anfang der ersten Seite abgeschlossen ist.
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. Dies ermöglicht das Senden von Anzeigeereignissen, die oben im Seitenereignis unterdrückt wurden.
xdm Optional Verwenden Sie diesen Abschnitt, um alle Daten einzuschließen, die Sie für das Ende des Seitenereignisses benötigen.
Manuell gerenderte Vorschläge

Das folgende Codebeispiel veranschaulicht den unteren Rand der Seitenereigniskonfiguration, der Anzeigeereignisse für Vorschläge sendet, die manuell auf der Seite gerendert wurden (d. h. für benutzerdefinierte Entscheidungsbereiche oder Oberflächen).

note note
NOTE
In diesem Szenario muss das Ende des Seitenereignisses warten, bis der Anfang des Seitenereignisses abgeschlossen ist, um die Vorschläge zu rendern und das Ende des Seitenereignisses aufzuzeichnen.
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 den Vorschlag einbeziehen ID, scope, und scopeDetails. Weitere Informationen finden Sie in der Dokumentation Personalisierung manuell rendern für weitere Informationen zum Aufzeichnen von Anzeigeereignissen für manuell gerenderte Inhalte. Manuell gerenderte Personalisierungsinhalte müssen am Ende des Seitenaufrufs enthalten sein.
xdm._experience.decisioning.propositionEventType Erforderlich Legen Sie diesen Parameter auf display: 1.
xdm Optional Verwenden Sie diesen Abschnitt, um alle Daten einzuschließen, die Sie für das Ende des Seitenereignisses benötigen.

Einzelseitenanwendung mit Treffern auf der oberen und unteren Seite spa-example

Erste Seitenansicht

Im folgenden Beispiel wird die erforderliche xdm.web.webPageDetails.viewName -Parameter. Dies macht es zu einer einseitigen Anwendung. Die viewName in diesem Beispiel ist die Ansicht, die beim Laden der Seite geladen 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.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.

alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
Zweite Seitenansicht (Option 1)

In diesem Beispiel ist es nicht erforderlich, die Seitentrennung oben/unten vorzunehmen, da die Personalisierung für die Seite bereits abgerufen wurde.

code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
Zweite Seitenansicht (Option 2)

Wenn Sie den unteren Seitenaufruf weiterhin verzögern müssen, können Sie applyPropositions für den Anfang des Seitenaufrufs. Da keine Personalisierung abgerufen werden muss und keine Analytics-Daten aufgezeichnet werden müssen, ist es nicht erforderlich, eine Anfrage an das Edge-Netzwerk zu richten.

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.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});

GitHub-Beispiel github-sample

Die Stichprobe unter diese Adresse zeigt, wie Sie mit Experience Platform und Web SDK Personalisierung oben auf der Seite anfordern und Analytics-Metriken unten senden können. Sie können das Beispiel herunterladen und lokal ausführen, um zu verstehen, wie oben und unten von Seitenereignissen funktionieren.

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636