Validieren von Web SDK-Implementierungen mit Experience Platform Debugger

Erfahren Sie, wie Sie Ihre Platform Web SDK-Implementierung mit Adobe Experience Platform Debugger überprüfen.

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 zu sehen. Laden Sie die Version für Ihren bevorzugten Browser herunter:

• Firefox-Erweiterung
• Chrome-Erweiterung

Wenn Sie den Debugger noch nie verwendet haben und dieser sich vom älteren Adobe Experience Cloud Debugger unterscheidet, sollten Sie sich dieses fünfminütige Übersichtsvideo ansehen:

In dieser Lektion verwenden Sie die Adobe Experience Cloud 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. Sie können Ihre Produktions-Website in Ihren Browser laden, jedoch mit Ihrem development Tagumgebung. 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
• Überprüfen Sie, ob das XDM-Objekt Daten wie erwartet erfasst und sendet.

Voraussetzungen

Sie kennen Datenerfassungs-Tags und die Demosite “Luma” und haben die folgenden vorherigen Lektionen im Tutorial abgeschlossen:

• Berechtigungen konfigurieren
• Konfigurieren eines XDM-Schemas
• Identitäts-Namespace konfigurieren
• Konfigurieren eines Datenstroms
• In der Tag-Eigenschaft installierte Web SDK-Erweiterung
• Erstellen von Datenelementen
• Tag-Regel erstellen

Alternative Tag-Bibliotheken mit Debugger laden

Dieses Tutorial verwendet eine öffentlich gehostete Version des Demowebsite für Luma. Öffnen Sie die Homepage und markieren Sie sie mit einem Lesezeichen.

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 Site "Luma"geöffnet ist, und wählen Sie das Symbol für die Erweiterung "Experience Platform Debugger"

2. Der Debugger wird geöffnet und zeigt einige Details zur hartcodierten Implementierung an, die nicht mit diesem Tutorial in Zusammenhang steht (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", wie unten dargestellt, und wählen Sie dann "lock", um den Debugger mit der Site "Luma"zu sperren.

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

5. Gehen Sie jetzt zu Experience Platform Tags in der linken Navigation

   

6. Wählen Sie die Konfiguration tab

7. Rechts neben dem Ort, an dem Sie die Seiten-Einbettungscodes, öffnen Sie die Aktionen und wählen Sie Ersetzen

   

8. Da Sie authentifiziert sind, ruft der Debugger Ihre verfügbaren Tag-Eigenschaften und -Umgebungen ab. Wählen Sie Ihre Web SDK Course property

9. Wählen Sie Ihre Development Umgebung

10. Wählen Sie die Anwenden button

    

11. Die Luma-Website wird jetzt neu geladen mit der 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 mit der Verwendung von Tags auf Ihrer Produktions-Website beginnen, können Sie dieselbe Methode verwenden, um Änderungen zu validieren.

Validieren der Implementierung in Experience Platform Debugger

Sie können den Debugger verwenden, um Ihre Platform Web SDK-Implementierung zu validieren und die an Platform Edge Network gesendeten Daten anzuzeigen:

1. Navigieren Sie zu Zusammenfassung in der linken Navigation, um die Details Ihrer Tag-Eigenschaft anzuzeigen

   

2. Gehen Sie jetzt zu Experience Platform Web SDK in der linken Navigation, um die Netzwerkanforderungen

3. Öffnen Sie die events Zeile (keine Sorge, wenn dieser Screenshot mehr Anforderungen als Ihre anzeigt, enthält er Anforderungen aus zukünftigen Lektionen und Sie können ihn vorerst ignorieren)

   

4. Beachten Sie, dass die web.webpagedetails.pageView Ereignistyp, den wir in unserer Ereignis senden und anderen nativen Variablen, die der AEP Web SDK ExperienceEvent Mixin format

   

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

   

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

1. Melden Sie auf der Site „Luma“ sich mit den folgenden Anmeldeinformationen an: test@adobe.com/test

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

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

   

4. Wählen Sie die events Zeile zum Öffnen von Details in einem Popup-Fenster

   

5. Suchen Sie nach identityMap innerhalb des Popup-Fensters. Hier sollten Sie Folgendes sehen: lumaCrmId mit drei Schlüsseln von authenticatedState, id und primary:
   

Validieren mit Browserdev-Tools

Diese Arten von Anforderungsdetails sind auch in den Webentwickler-Tools des Browsers sichtbar. Netzwerk Registerkarte (vorausgesetzt, die Website lädt Ihre Tag-Bibliothek).

1. Öffnen Sie die Webentwickler-Tools des Browsers. Netzwerk und laden Sie die Seite neu. Filtern von Aufrufen mit /ee Um den Aufruf zu finden, wählen Sie ihn aus und sehen Sie sich dann im Kopfzeilen und Nutzlast tab

   

2. Navigieren Sie zu Reaktion und beachten Sie, wie der ECID-Wert in der Antwort enthalten ist. Kopieren Sie diesen Wert, da Sie ihn verwenden werden, um die Profilinformationen in der nächsten Übung zu überprüfen.

   

   HINWEIS

   Möglicherweise sehen Sie nicht die gleiche Anzahl von Nutzlastanfragen wie im Screenshot oben. Diese Diskrepanz liegt daran, dass zukünftige Lehren für Einrichten von Target zum Zeitpunkt des Screenshots abgeschlossen wurden. Sie können diesen Unterschied vorerst ignorieren.

Da jetzt ein XDM-Objekt auf einer Seite ausgelöst wird und Sie wissen, wie Sie Ihre Datenerfassung überprüfen können, können Sie die einzelnen Adobe Apps mithilfe des Platform Web SDK einrichten.

Weiter:

Ressourcen für Business.Adobe.com