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 auf der Demosite "Luma" hartcodierte Tag-Eigenschaft durch Ihre eigene Eigenschaft zu ersetzen.

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 Ihrer development -Tag-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 sind mit Datenerfassungs-Tags und der Demosite "Luma" vertraut und haben die vorherigen Lektionen im Tutorial abgeschlossen:

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.

  1. Stellen Sie sicher, dass die Luma Demowebsite geöffnet ist, und wählen Sie das Symbol für die Experience Platform Debugger-Erweiterung aus.

  2. 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).

  3. Vergewissern Sie sich, dass der Debugger "Verbunden mit Luma" ist, wie unten dargestellt, und wählen Sie dann das Symbol "lock", um den Debugger mit der Site "Luma"zu sperren.

  4. Wählen Sie die Schaltfläche Anmelden aus und melden Sie sich mit Ihrer Adobe-ID bei Adobe Experience Cloud an.

  5. Navigieren Sie nun im linken Navigationsbereich zu Experience Platform-Tags .

    Debugger-Tag-Bildschirm

  6. Wählen Sie die Registerkarte Konfiguration aus

  7. Öffnen Sie rechts neben dem Bereich, in dem die eingebetteten Seiten-Codes angezeigt werden, das Dropdown-Menü Aktionen und wählen Sie Ersetzen aus

    Aktionen auswählen > Ersetzen

  8. Da Sie authentifiziert sind, ruft der Debugger Ihre verfügbaren Tag-Eigenschaften und -Umgebungen ab. Auswählen der Eigenschaft

  9. Wählen Sie Ihre Development-Umgebung aus.

  10. Wählen Sie die Schaltfläche Anwenden aus

    Wählen Sie die alternative Tag-Eigenschaft

  11. Die Luma-Website lädt jetzt mit Ihrer eigenen Tag-Eigenschaft neu.

    Tag-Eigenschaft ersetzt

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:

  1. Navigieren Sie im linken Navigationsbereich zu Zusammenfassung , um die Details Ihrer Tag-Eigenschaft anzuzeigen.

    Registerkarte Zusammenfassung

  2. Navigieren Sie nun im linken Navigationsbereich zu Experience Platform Web SDK , um die Netzwerkanforderungen anzuzeigen.

  3. Öffnen Sie die Zeile events .

    Adobe Experience Platform Web SDK-Anfrage

  4. Beachten Sie, dass Sie den Ereignistyp web.webpagedetails.pageView sehen können, den Sie in Ihrer Aktion Variable aktualisieren angegeben haben, sowie weitere vordefinierte Variablen, die der Feldergruppe AEP Web SDK ExperienceEvent entsprechen

    Ereignisdetails

  5. Scrollen Sie nach unten zum Objekt web , wählen Sie aus, um es zu öffnen, und überprüfen Sie die Objekte webPageDetails.name, webPageDetails.server und webPageDetails.siteSection. Sie sollten mit den entsprechenden digitalData-Datenschichtvariablen auf der Homepage übereinstimmen.

TIP
So zeigen Sie die digitalData-Datenschicht auf der Homepage an und vergleichen sie:
  1. Öffnen Sie auf der Startseite von Luma die Browser-Entwicklertools. Wählen Sie im Fall von Chrome die Schaltfläche F12 auf Ihrer Tastatur aus
  2. Wählen Sie die Registerkarte Konsole aus.
  3. Geben Sie digitalData ein und wählen Sie Enter auf Ihrer Tastatur aus, um die Datenschichtwerte anzuzeigen

Registerkarte Netzwerk

Sie können auch die Identitätszuordnungsdetails überprüfen:

  1. Melden Sie sich mit den Anmeldedaten test@adobe.com/test bei der Site "Luma"an

  2. Kehren Sie zur Startseite „Luma“ zurück.

  3. Öffnen Sie den Abschnitt Experience Platform Web SDK im linken Navigationsbereich.

    Web SDK im Debugger

  4. Wählen Sie die Zeile events aus, um Details in einem Popup zu öffnen

    Web SDK im Debugger

  5. Suchen Sie im Popup nach der identityMap . Hier sollte lumaCrmId mit drei Schlüsseln von authenticatedState, id und primary angezeigt werden:
    Web SDK im Debugger

Clientseitige Anforderungen mit Browserdev-Tools überprüfen

Diese Arten von Anforderungsdetails sind auch auf der Registerkarte Netzwerk der Webentwicklertools des Browsers sichtbar (vorausgesetzt, die Website lädt Ihre Tag-Bibliothek).

  1. Öffnen Sie die Registerkarte Netzwerk der Webentwickler-Tools des Browsers und laden Sie die Seite neu. Filtern Sie nach Aufrufen mit "/ee", um den Aufruf zu finden, wählen Sie ihn aus und sehen Sie sich dann die Registerkarte "Headers"und die Registerkarte "Payload"an.

    Registerkarte Netzwerk

  2. Gehen Sie zur Registerkarte Antwort und beachten Sie, wie der ECID-Wert in der Antwort enthalten ist.

    Registerkarte Netzwerk

    note note
    NOTE
    Der ECID-Wert ist in der Netzwerkantwort sichtbar. Sie ist nicht im Abschnitt identityMap der Netzwerkanforderung enthalten und wird auch nicht in diesem Format in einem Cookie gespeichert.

Serverseitige Netzwerkanforderungen mit Experience Platform Debugger überprüfen

Wie Sie in der Lektion Datensatz konfigurieren gelernt haben, sendet das Platform Web SDK zunächst Daten aus Ihrer digitalen Eigenschaft an das 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.

Aktivieren von Edge Trace

So aktivieren Sie Edge Trace:

  1. Wählen Sie im linken Navigationsbereich von Experience Platform Debugger Protokolle aus.

  2. Wählen Sie die Registerkarte Edge und dann Verbinden aus.

    Verbinden von Edge Trace

  3. Derzeit ist er leer

    Connected Edge Trace

  4. Aktualisieren Sie die Luma-Startseite und aktivieren Sie erneut den Experience Platform-Debugger , um zu sehen, wie die Daten durchlaufen werden.

    Analytics-Beacon Edge Trace

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!

Weiter:

NOTE
Vielen Dank, dass Sie Ihre Zeit investiert haben, um mehr über das Adobe Experience Platform Web SDK zu erfahren. Wenn Sie Fragen haben, ein allgemeines Feedback teilen oder Anregungen zu künftigen Inhalten haben möchten, teilen Sie diese bitte in diesem Experience League Community-Diskussionsbeitrag mit.
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4