Validieren von Web SDK-Implementierungen mit Experience Platform Debugger
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 in Ihren Web-Seiten 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 5-minütige Übersichtsvideo ansehen:
In dieser Lektion verwenden Sie die Erweiterung Adobe Experience Platform Debuggerum die Tag-Eigenschaft auf der Demo-Site Luma“ hartcodiert durcheigene Eigenschaft zu ersetzen.
Diese Technik wird als Umgebungsumschaltung bezeichnet und ist später hilfreich, wenn Sie auf Ihrer eigenen Website mit Tags arbeiten. Damit können Sie Ihre Produktions-Website in Ihren Browser laden, jedoch mit Ihrer Entwicklungs-). Mit dieser Funktion können Sie Tag-Änderungen unabhängig von Ihren regulären Code-Versionen sicher vornehmen und validieren. Schließlich ist diese Trennung der Marketing-Tag-Versionen von Ihren regulären Code-Versionen einer der Hauptgründe, warum Kunden Tags überhaupt verwenden!
Lernziele
Am Ende dieser Lektion können Sie den Debugger für folgende Aufgaben verwenden:
- Laden einer alternativen Tag-Bibliothek
- Überprüfen Sie, ob das Client-seitige XDM-Ereignis Daten wie erwartet erfasst und an das Platform-Edge Network sendet
- Aktivieren von Edge Trace, um Server-seitige Anforderungen anzuzeigen, die vom Platform-Edge Network gesendet werden
Voraussetzungen
Sie sind mit Datenerfassungs-Tags und der Demo-Site von Luma vertraut und haben die vorherigen Lektionen im Tutorial abgeschlossen:
Laden alternativer Tag-Bibliotheken mit Debugger
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 Sie die Demo-Website von Luma geöffnet haben, und wählen Sie das Symbol Experience Platform Debugger-Erweiterung aus
-
Der Debugger wird geöffnet und zeigt einige Details der hartcodierten Implementierung an (möglicherweise müssen Sie die Luma-Site nach dem Öffnen des Debuggers neu laden)
-
Vergewissern Sie sich, dass der Debugger mit Luma verbunden ist, wie unten dargestellt, und wählen Sie dann das Symbol "lock" aus, um den Debugger für die Luma-Site zu sperren.
-
Klicken Sie auf Schaltfläche „Anmelden und melden Sie sich mit Ihrer Adobe-ID bei Adobe Experience Cloud an.
-
Experience Platform Wechseln Sie jetzt im linken Navigationsbereich zu -Tags .
-
Wählen Sie die Konfiguration aus
-
Öffnen Sie rechts neben der Stelle, an der die Seiteneinbettungs-Codes angezeigt werden, das Aktionen und wählen Sie Ersetzen
-
Da Sie authentifiziert sind, ruft der Debugger Ihre verfügbaren Tag-Eigenschaften und Umgebungen ab. Eigenschaft auswählen
-
Developmentauswählen -
Klicken Sie auf die Apply-Schaltfläche
-
Die Luma-Website wird jetzt neu geladen mit Ihrer eigenen Tag-Eigenschaft.
Während Sie mit dem Tutorial fortfahren, verwenden Sie diese Methode, um die Luma-Site Ihrer eigenen Tag-Eigenschaft zuzuordnen, um Ihre Implementierung von Platform Web SDK zu validieren. Wenn Sie Tags auf Ihrer eigenen Website verwenden, können Sie dieselbe Methode zur Validierung von Entwicklungs-Tag-Bibliotheken auf Ihrer Produktions-Website verwenden.
Client-seitige Netzwerkanfragen mit Experience Platform Debugger überprüfen
Sie können den Debugger verwenden, um Client-seitige Beacons zu validieren, die von Ihrer Platform Web SDK-Implementierung ausgelöst werden, um die an das Platform-Edge Network gesendeten Daten anzuzeigen:
-
Navigieren Sie linken zu „Zusammenfassung“, um die Details Ihrer Tag-Eigenschaft anzuzeigen
-
Wechseln Sie jetzt zum Experience Platform Web SDK im linken Navigationsbereich, um die Netzwerkanfragen“ anzuzeigen
-
Öffnen Sie die Ereignisse Zeile
-
Beachten Sie, wie Sie den
web.webpagedetails.pageViewEreignistyp, den Sie in Ihrer Aktion Variable aktualisieren angegeben haben, und andere vordefinierte Variablen sehen können, die derAEP Web SDK ExperienceEventFeldergruppe entsprechen
-
Scrollen Sie nach unten zum
webObjekt, wählen Sie es aus, um es zu öffnen, und überprüfen Sie diewebPageDetails.name,webPageDetails.serverundwebPageDetails.siteSection. Sie sollten mit den entsprechendendigitalDataDatenschichtvariablen auf der Homepage übereinstimmen
digitalData Datenschicht auf der Homepage an und vergleichen sie:- Öffnen Sie auf der Luma-Homepage die Browser-Entwickler-Tools. Wählen Sie bei Chrome die Schaltfläche
F12auf der Tastatur aus. - Wählen Sie die Registerkarte Konsole aus
- Geben Sie
digitalDataein und wählen SieEnterauf der Tastatur aus, um die Datenschichtwerte aufzurufen
Sie können auch die Details der Identitätszuordnung überprüfen:
-
Melden Sie sich mit den Anmeldedaten
test@adobe.com/testbei der Luma-Site an -
Kehren Sie zur Startseite „Luma“ zurück.
-
Öffnen Sie den Abschnitt Experience Platform Web SDK im linken Navigationsbereich
-
Wählen Sie die Ereignisse aus, um Details in einem Popup zu öffnen
-
Suchen Sie nach identityMap im Popup. Hier sollten
lumaCrmIdmit den drei Schlüsseln AuthenticatedState, ID und primary angezeigt werden:
Validieren von Client-seitigen Anfragen mit Browser-Entwicklungs-Tools
Diese Arten von Anfragedetails sind auch auf der Registerkarte Web-Entwickler-Tools des Browsers Netzwerk sichtbar (vorausgesetzt, die Website lädt Ihre Tag-Bibliothek).
-
Öffnen Sie im Browser die Registerkarte Web-Entwickler-Tools Netzwerk und laden Sie die Seite neu. Filtern Sie nach Aufrufen mit
/ee, um den Aufruf zu finden, ihn auszuwählen und dann auf der Registerkarte Kopfzeilen und auf der Registerkarte Payload zu suchen
-
Wechseln Sie zur Registerkarte Antwort 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 identityMapTeil der Netzwerkanfrage enthalten und wird auch nicht in diesem Format in einem Cookie gespeichert.
Validieren von Server-seitigen Netzwerkanfragen mit Experience Platform Debugger
Wie Sie in der Lektion Konfigurieren eines Datenstroms gelernt haben, sendet Platform Web SDK zunächst Daten von Ihrer digitalen Eigenschaft an Platform Edge Network. Dann führt Platform Edge Network zusätzliche Server-seitige Anfragen an die entsprechenden Services durch, die in Ihrem Datenstrom aktiviert sind. Sie können die Server-seitigen Anforderungen von Platform Edge Network mithilfe von Edge Trace im Debugger überprüfen.
Edge Trace aktivieren
So aktivieren Sie Edge Trace:
-
Wählen Sie im linken Navigationsbereich von Experience Platform Debugger Protokolle aus
-
Wählen Sie die Registerkarte Edge und dann Verbinden
-
Es ist vorerst leer
-
Aktualisieren Sie die Luma-Startseite und überprüfen Sie Experience Platform Debugger erneut, um zu sehen, wie die Daten durchlaufen werden.
Zu diesem Zeitpunkt können Sie keine Platform-Edge Network-Anfragen an Adobe-Programme anzeigen, da Sie keine im Datenstrom aktiviert haben. In zukünftigen Lektionen verwenden Sie Edge Trace, um die ausgehenden Server-seitigen Anforderungen an Adobe-Anwendungen und die Ereignisweiterleitung anzuzeigen. Lernen Sie jedoch zunächst ein anderes Tool zur Validierung von Server-seitigen Anfragen durch Platform Edge Network kennen: Adobe Experience Platform Assurance!