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.
Experience Platform Debugger ist eine ChromeErweiterung, mit der Sie die in Ihren Web-Seiten implementierte Adobe-Technologie sehen können. Experience Platform Debugger und die Entwicklerkonsole Ihres Browsers sind die besten Möglichkeiten, die browserseitigen Aspekte Ihrer Web-SDK-Implementierung zu überprüfen und zu debuggen. Adobe Experience Platform Assurance, das in der nächsten Lektion behandelt wird, bietet die beste Ansicht der Daten, wenn sie in Platform Edge Network ein- und ausgehen.
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 Debugger um die Tag-Eigenschaft, die auf der Demo-Website von Luma“ hartcodiert , durch Ihre eigene 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 Platform Edge Network sendet
- Aktivieren von Edge Trace, um Server-seitige Anforderungen anzuzeigen, die von Platform Edge Network gesendet werden
Voraussetzungen
Sie sind mit Datenerfassungs-Tags und der Demo-Website 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 für die 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.
-
Wählen Sie die Schaltfläche Anmelden, melden Sie sich mit Ihrer Adobe-ID bei Adobe Experience Cloud an und wählen Sie Ihr Unternehmen aus.
note tip TIP Wenn der Debugger nach der Anmeldung Ihren Benutzernamen anstelle des Organisationsnamens anzeigt, melden Sie sich ab und versuchen Sie es erneut. 
-
Navigieren Sie jetzt zu Experience Platform Tags im linken Navigationsbereich
-
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
note tip TIP Wenn Sie Ihre Eigenschaft und Umgebung nicht über die Dropdown-Listen auswählen können, gehen Sie stattdessen zu Tags > Umgebungen > Entwicklung > Installieren und klicken Sie auf das Symbol, um den Einbettungs-Code zu kopieren und in den Debugger einzufügen:
-
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.
Validieren mit Debugger
Überprüfen von Netzwerkanfragen und XDM
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 Platform Edge Network gesendeten Daten anzuzeigen:
-
Navigieren Sie linken zu „Zusammenfassung“, um die Details Ihrer Tag-Eigenschaft anzuzeigen
-
Wechseln Sie jetzt zu 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
web, wählen Sie es aus, um es zu öffnen, und überprüfen Sie diewebPageDetails.name. Sie sollten mit den entsprechendenadobeDataLayerDatenschichtvariablen auf der Homepage übereinstimmen
adobeDataLayer 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
adobeDataLayerein und wählen SieEnterauf der Tastatur aus, um die Datenschichtwerte aufzurufen
Validieren Sie die Ereignisse und Variablen, die auf den Produktseiten, auf der Warenkorbseite und auf der Bestellbestätigungsseite festgelegt sind.
Identitätszuordnung validieren
Sie können auch die Details der Identitätszuordnung überprüfen:
-
Wählen Sie Sign In auf der Luma-Website. Wählen Sie Create Account aus und erstellen Sie ein Konto mit den Anmeldedaten
test@test.com/test -
Verwenden Sie den Jump to latest im Debugger, um schnell zum neuesten Web SDK-Ereignis zu wechseln (es ist die letzte Spalte). Wählen Sie die Ereignisse aus, um das Modal „Details“ zu öffnen.
-
Suchen Sie im Modal nach identityMap. Hier sollten
lumaCrmIdmit drei Schlüsseln für „AuthenticatedState“, „ID“ und die primäre Bezeichnung angezeigt werden:
Validieren mit Browser-Entwickler-Tools
Viele Web-Entwickler ziehen es möglicherweise vor, die Implementierung in den Entwickler-Tools ihres Browsers anzuzeigen. Dies ist besonders wichtig, da nicht alle Browser die Debugger-Erweiterung unterstützen. Aufgrund des flexiblen Frameworks stehen außerdem zusätzliche Implementierungsdetails zur Verfügung, die Sie einsehen können, z. B. Cookies und Antwortdetails.
Prüfen von Netzwerkanfragen
Details zu Web SDK-Anfragen finden Sie auch auf der Registerkarte Web-Entwickler-Tools Netzwerk (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 Vorschau und beachten Sie, wie der ECID-Wert in der Netzwerkantwort 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.
Cookies im Web SDK
Sehen wir uns einige der Cookies, die Web SDK im Browser setzt, an, während wir uns mit den Entwickler-Tools beschäftigen. Öffnen Sie Anwendung > Cookies > https://luma.enablementadobe.com
Es sollten mehrere Cookies angezeigt werden, die von Web SDK gesetzt werden:
- kndctr_[IMS_ORGID]_AdobeOrg_identity: speichert Daten zur ECID
- kndctr_[IMS_ORGID]_AdobeOrg_cluster: speichert den verwendeten Rechenzentrumsstandort, damit nachfolgende Netzwerkaufrufe an dieselben Edge-Server weitergeleitet werden
- AMCV_[IMS_ORGID]%40AdobeOrg: Dies ist das veraltete AMCV-Cookie, das von Pre-Web SDK Experience Cloud-Bibliotheken verwendet wird. Es wird festgelegt, weil die Standardeinstellung Migrieren von ECID zu VisitorAPI zur Web SDK in der Adobe Experience Platform Web SDK Tags-Erweiterung ausgewählt wurde. Diese Einstellung muss aktiviert sein, wenn Sie Ihre Seiten von älteren Bibliotheken zu Web SDK migrieren. Sie kann jedoch deaktiviert werden, nachdem alle Ihre Seiten für eine bestimmte Zeit migriert wurden.
Wenn Sie diese Cookies löschen und die Seite neu laden, werden Sie möglicherweise feststellen, dass zusätzliche Drittanbieter-Cookies in der .demdex.net Domain gesetzt wurden. Diese sind festgelegt, weil wir die Standardeinstellung Verwenden von Cookies von Drittanbietern: Aktiviert in der Tags-Erweiterung von Adobe Experience Platform Web SDK beibehalten haben. Wenn Ihr Browser keine Third-Party-Cookies zulässt, werden diese beim Neuladen der Seite entfernt.
Lokaler Speicher von Luma
Die Demo-Website von Luma verwendet ausschließlich Client-seitige Technologien wie HTML, CSS und JavaScript. Es gibt keine Backend-Speichermechanismen außer der Experience Cloud-Implementierung, die vom Standardstatus der Website verwendet wird. Informationen wie Benutzernamen-Details werden nur lokal in Ihrem Browser mit localStorage gespeichert. Wenn Sie also diese Informationen löschen oder ein Inkognitor-Fenster verwenden, werden Sie feststellen, dass Sie möglicherweise ein zuvor erstelltes Testbenutzerkonto neu erstellen müssen.
Erfahren Sie als Nächstes, wie Sie diese Netzwerkanfragen validieren, wenn sie von Platform Edge Network mithilfe von Adobe Experience Platform Assurance empfangen und übertragen werden!