WebSDK-Implementierungen mit Experience Platform Debugger validieren
Erfahren Sie, wie Sie Ihre Adobe Experience Platform Web SDK-Implementierung mit Adobe Experience Platform Debugger validieren.
Der Experience Platform Debugger ist eine Erweiterung, die für Chrome- und Firefox-Browser verfügbar ist und Ihnen dabei hilft, die auf Ihren Webseiten implementierte Adobe-Technologie zu sehen. Laden Sie die Version für Ihren bevorzugten Browser herunter:
Wenn Sie den Debugger noch nie verwendet haben, sollten Sie sich dieses fünfminütige Übersichtsvideo ansehen:
In dieser Lektion verwenden Sie die Adobe Experience Platform Debugger-Erweiterung , um die Tag-Eigenschaft zu ersetzen, die auf der fest codiert ist. Demosite "Luma" mit Ihrer eigenen Eigenschaft.
Diese Technik wird als Umgebungswechsel bezeichnet und ist später hilfreich, wenn Sie mit Tags auf Ihrer eigenen Website arbeiten. Dadurch können Sie Ihre Produktions-Website in Ihren Browser laden, jedoch mit Ihrem development Tags-Bibliothek. Mit dieser Funktion können Sie sicher Änderungen an Tags vornehmen und überprüfen - unabhängig von Ihren normalen Codeversionen. Schließlich ist diese Trennung der Marketing-Tag-Versionen von Ihren normalen Codeversionen einer der Hauptgründe, warum Kunden Tags überhaupt verwenden!
Lernziele
Am Ende dieser Lektion können Sie den Debugger für Folgendes verwenden:
- Alternative Tag-Bibliothek laden
- Validieren Sie, dass das clientseitige XDM-Ereignis Daten erfasst und wie erwartet an Platform Edge Network sendet.
- Aktivieren Sie Edge Trace, um serverseitige Anfragen anzuzeigen, die vom Platform Edge Network gesendet werden.
Voraussetzungen
Sie kennen Datenerfassungs-Tags und die Demosite "Luma" und die vorherigen Lektionen im Tutorial abgeschlossen haben:
Alternative Tag-Bibliotheken mit Debugger laden
Der Experience Platform Debugger verfügt über eine coole Funktion, mit der Sie eine vorhandene Tag-Bibliothek durch eine andere ersetzen können. Diese Technik ist für die Validierung nützlich und ermöglicht es uns, viele Implementierungsschritte in diesem Tutorial zu überspringen.
-
Vergewissern Sie sich, dass die Demowebsite für Luma Öffnen Sie das Symbol Experience Platform Debugger-Erweiterung und wählen Sie es aus.
-
Der Debugger wird geöffnet und zeigt einige Details zur hartcodierten Implementierung an (Sie müssen die Site "Luma"möglicherweise neu laden, nachdem Sie den Debugger geöffnet haben).
-
Vergewissern Sie sich, dass der Debugger "Verbunden mit Luma", wie unten dargestellt, und wählen Sie dann "lock", um den Debugger mit der Site "Luma"zu sperren.
-
Wählen Sie die Anmelden und melden Sie sich mit Ihrer Adobe ID bei Adobe Experience Cloud an.
-
Gehen Sie jetzt zu Experience Platform-Tags in der linken Navigation
-
Wählen Sie die Konfiguration tab
-
Rechts neben dem Ort, an dem Sie die Seiten-Einbettungscodes, öffnen Sie die Aktionen und wählen Sie Ersetzen
-
Da Sie authentifiziert sind, ruft der Debugger Ihre verfügbaren Tag-Eigenschaften und -Umgebungen ab. Auswählen der Eigenschaft
-
Wählen Sie
DevelopmentUmgebung -
Wählen Sie die Anwenden button
-
Die Luma-Website wird jetzt neu geladen mit einer eigenen Tag-Eigenschaft.
Während Sie das Tutorial fortsetzen, verwenden Sie diese Methode, um die Site "Luma"Ihrer eigenen Tag-Eigenschaft zuzuordnen und Ihre Platform Web SDK-Implementierung zu validieren. Wenn Sie Tags auf Ihrer eigenen Website verwenden, können Sie dieselbe Methode verwenden, um Entwicklungs-Tag-Bibliotheken auf Ihrer Produktions-Website zu validieren.
Clientseitige Netzwerkanfragen mit Experience Platform Debugger überprüfen
Sie können den Debugger verwenden, um Client-seitige Beacons zu überprüfen, die von Ihrer Platform Web SDK-Implementierung ausgelöst wurden, um die an Platform Edge Network gesendeten Daten anzuzeigen:
-
Navigieren Sie zu Zusammenfassung in der linken Navigation, um die Details Ihrer Tag-Eigenschaft anzuzeigen
-
Gehen Sie jetzt zu Experience Platform Web SDK in der linken Navigation, um die Netzwerkanforderungen
-
Öffnen Sie die events row
-
Beachten Sie, dass die
web.webpagedetails.pageViewEreignistyp, den Sie in Ihrer Variable aktualisieren und anderen nativen Variablen, die derAEP Web SDK ExperienceEventFeldergruppe
-
Scrollen Sie nach unten zum
web-Objekt, wählen Sie aus, um es zu öffnen und diewebPageDetails.name,webPageDetails.server, undwebPageDetails.siteSection. Sie sollten mit dem entsprechenden übereinstimmendigitalDataDatenschichtvariablen auf der Homepage
digitalData Datenschicht auf der Homepage:- Öffnen Sie auf der Startseite von Luma die Browser-Entwicklertools. Wählen Sie im Fall von Chrome die Schaltfläche
F12auf der Tastatur - Wählen Sie die Konsole tab
- Eingabe
digitalDataund wählenEnterauf der Tastatur zum Anzeigen der Datenschichtwerte
Sie können auch die Identitätszuordnungsdetails überprüfen:
-
Melden Sie sich mit den Anmeldedaten bei der Site "Luma"an
test@adobe.com/test -
Kehren Sie zur Startseite „Luma“ zurück.
-
Öffnen Sie die Experience Platform Web SDK im linken Navigationsbereich
-
Wählen Sie die events Zeile zum Öffnen von Details in einem Popup-Fenster
-
Suchen Sie nach identityMap innerhalb des Popup-Fensters. Hier sollten Sie sehen
lumaCrmIdmit drei Schlüsseln von authenticatedState, id und primary:
Clientseitige Anforderungen mit Browserdev-Tools überprüfen
Diese Arten von Anforderungsdetails sind auch in den Webentwickler-Tools des Browsers sichtbar. Netzwerk Registerkarte (vorausgesetzt, die Website lädt Ihre Tag-Bibliothek).
-
Öffnen Sie die Webentwickler-Tools des Browsers. Netzwerk und laden Sie die Seite neu. Filtern von Aufrufen mit
/eeUm den Aufruf zu finden, wählen Sie ihn aus und sehen Sie sich dann im Kopfzeilen und Nutzlast tab
-
Navigieren Sie zu Reaktion und beachten Sie, wie der ECID-Wert in der Antwort enthalten ist.
note note NOTE Der ECID-Wert ist in der Netzwerkantwort sichtbar. Sie ist nicht im identityMap-Teil der Netzwerkanforderung, noch wird er in diesem Format in einem Cookie gespeichert.
Serverseitige Netzwerkanforderungen mit Experience Platform Debugger überprüfen
Wie Sie in der Konfigurieren eines Datenspeichers Lektion: Das Platform Web SDK sendet zunächst Daten aus Ihrer digitalen Eigenschaft an Platform Edge Network. Anschließend sendet Platform Edge Network zusätzliche serverseitige Anfragen an die entsprechenden Dienste, die in Ihrem Datastream aktiviert sind. Sie können die serverseitigen Anforderungen von Platform Edge Network mithilfe von Edge Trace im Debugger überprüfen.
Edge Trace aktivieren
So aktivieren Sie Edge Trace:
-
In der linken Navigation von Experience Platform Debugger select Protokolle
-
Wählen Sie die Edge und wählen Sie Verbinden
-
Derzeit ist er leer
-
Aktualisieren Sie die Luma-Homepage und überprüfen Experience Platform Debugger erneut anzeigen, um zu sehen, wie Daten durchkommen.
Sie können zu diesem Zeitpunkt keine Platform Edge Network-Anfragen für Adobe-Anwendungen anzeigen, da Sie im Datastream keine aktiviert haben. In zukünftigen Lektionen verwenden Sie Edge Trace, um die ausgehenden serverseitigen Anforderungen an Adobe-Anwendungen und die Ereignisweiterleitung anzuzeigen. Erfahren Sie jedoch zunächst mehr über ein anderes Tool zur Validierung von serverseitigen Anforderungen von Platform Edge Network - Adobe Experience Platform Assurance!