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.
| code language-js |
|---|
|
| 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. |
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.
| code language-js |
|---|
|
| 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. |
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).
| code language-js |
|---|
|
| 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. |
Die Option "Use guided events" deckt dieses Szenario nicht ab. Konfigurieren Sie die Aktion daher manuell:
-
Erstellen Sie ein XDM-Datenelement (oder Variable), das
_experience.decisioning.propositionsmit denid,scopeundscopeDetailsjedes gerenderten Vorschlags füllt und_experience.decisioning.propositionEventType.displayauf1setzt. Weitere Informationen Sie unter von Anzeigeereignissen . -
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.
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 |
|---|
|
-
Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der Ansicht
web.webPageDetails.viewName(z. B.home). -
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 .
-
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
viewNamein 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.
| code language-js |
|---|
|
-
Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der neuen Ansicht
web.webPageDetails.viewName(z. B.cart). -
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:
- Rendern Sie oben auf der Seite die bereits abgerufenen Vorschläge, ohne einen Edge Network-Aufruf durchzuführen.
- Sobald die Analysedaten bereit sind, senden Sie das Ereignis „Seitenende“.
Nehmen Sie in beide Aufrufe denselben viewName auf, damit die Ansicht konsistent aufgezeichnet wird.
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 |
|---|
|
-
Erstellen Sie ein XDM-Objekt-Datenelement, das den Namen der neuen Ansicht
web.webPageDetails.viewName(z. B.cart). -
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. -
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.