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.
| 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 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.
| 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 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).
| 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 Geführte Ereignisse verwenden 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 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.
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 vom Typ „Ereignis ": Sie Geführte Ereignisse verwenden, wählen Sie Personalisierung anfordern und verweisen Sie auf das Datenelement im Feld XDM.
- 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
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 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:
- 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 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. - 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.