DokumentationExperience PlatformSjälvstudiekurs om webb-SDK

Validera Web SDK-implementeringar med Experience Platform Debugger

Last update: Thu Mar 05 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Nybörjare
  • Mellanliggande
  • Utvecklare

Lär dig validera Adobe Experience Platform Web SDK-implementeringen med Adobe Experience Platform Debugger.

Experience Platform Debugger är ett Chrome-tillägg som hjälper dig att se Adobe-tekniken som är implementerad på dina webbsidor. Experience Platform Debugger och webbläsarens utvecklarkonsol är de bästa sätten att validera och felsöka webbläsaraspekter av Web SDK-implementeringen. Adobe Experience Platform Assurance, som beskrivs i nästa lektion, ger den bästa bilden av data när de skickas till och från Platform Edge Network.

SDK- och Adobe Experience Platform-valideringsdiagram för webben

Om du aldrig har använt Felsökning tidigare kan det vara bra att titta på den här översiktsvideon på fem minuter:

https://video.tv.adobe.com/v/32156?learn=on&enablevpops

I den här lektionen använder du Adobe Experience Platform Debugger-tillägget för att ersätta taggegenskapen som är hårdkodad på Luma-demowebbplatsen med din egen egenskap.

Den här tekniken kallas för miljöväxling och kan vara användbar senare när du arbetar med taggar på din egen webbplats. Du kan läsa in din produktionswebbplats i webbläsaren, men med ditt development -taggbibliotek. På så sätt kan du tryggt göra och validera taggändringar oberoende av dina vanliga kodreleaser. Den här åtskillnaden mellan marknadsföringstaggreleaser och vanliga kodreleaser är ju en av de främsta anledningarna till att kunderna använder taggar i första hand!

Utbildningsmål

När lektionen är klar kan du använda felsökaren för att:

  • Läsa in ett alternativt taggbibliotek
  • Validera att XDM-händelsen på klientsidan hämtar in och skickar data som förväntas till Platform Edge Network
  • Aktivera Edge Trace för att visa begäranden på serversidan som skickats av Platform Edge Network

Förutsättningar

Du är bekant med datainsamlingstaggar och webbplatsen Luma demo och har slutfört föregående lektioner i självstudiekursen:

Läsa in alternativa taggbibliotek med Felsökning

Experience Platform Debugger har en cool funktion som gör att du kan ersätta ett befintligt taggbibliotek med ett annat. Den här tekniken är användbar vid validering och gör att vi kan hoppa över många implementeringssteg i den här självstudiekursen.

  1. Kontrollera att du har webbplatsen för Luma-demo öppen och välj ikonen för Experience Platform-felsökningstillägget

  2. Felsökaren öppnas och visar information om den hårdkodade implementeringen (du kan behöva läsa in Luma-webbplatsen igen när du har öppnat felsökaren)

  3. Bekräfta att felsökaren är Connected to Luma enligt bilden nedan och välj sedan ikonen lock för att låsa felsökaren till Luma-webbplatsen.

  4. Välj knappen Sign In, logga in på Adobe Experience Cloud med ditt Adobe ID och välj din organisation.

    note tip
    TIP
    Om felsökaren visar ditt användarnamn i stället för ditt Org-namn efter att du har loggat in loggar du ut och försöker igen.

    Skärm för felsökningstagg

  5. Gå nu till Experience Platform Tags i den vänstra navigeringen

  6. Välj fliken Configuration

  7. Öppna listrutan Page Embed Codes till höger om den plats där Actions visas och välj Replace

    Välj Åtgärder > Ersätt

  8. Eftersom du är autentiserad kommer felsökaren att hämta tillgängliga taggegenskaper och -miljöer. Välj din egenskap

  9. Välj din Development-miljö
    Välj den alternativa taggegenskapen

    note tip
    TIP
    Om du inte kan markera din egenskap och miljö med listrutorna går du istället till Tags > Environments > Development > Install och markerar ikonen för att kopiera den inbäddade koden och klistra in den i Felsökning:
    Välj den alternativa taggegenskapen

  10. Markera knappen Apply

  11. Luma-webbplatsen kommer nu att läsa in igen med din egen taggegenskap.

    taggegenskap ersatt

När du fortsätter med självstudiekursen använder du den här tekniken för att mappa Luma-webbplatsen till din egen taggegenskap för att validera din Platform Web SDK-implementering. När du använder taggar på din egen webbplats kan du använda samma teknik för att validera utvecklingstaggbibliotek på din produktionswebbplats.

Validera med felsökning

Validera nätverksbegäranden och XDM

Du kan använda felsökaren för att validera klientsidesbeacons som aktiveras från din Platform Web SDK-implementering för att visa data som skickas till Platform Edge Network:

  1. Gå till Summary i den vänstra navigeringen om du vill se information om taggegenskapen

    Fliken Sammanfattning

  2. Gå nu till Experience Platform Web SDK i den vänstra navigeringen för att se Network Requests

  3. Öppna raden events

    Adobe Experience Platform Web SDK-begäran

  4. Observera hur du kan se händelsetypen web.webPageDetails.pageView som du angav i åtgärden Update variable och andra variabler som inte finns i rutan enligt fältgruppen AEP Web SDK ExperienceEvent

    Händelseinformation

  5. Bläddra ned till objektet web, välj att öppna det och inspektera webPageDetails.name. De ska matcha motsvarande adobeDataLayer datalagervariabler på startsidan

TIP
Så här visar och jämför du datalagret adobeDataLayer på hemsidan:
  1. Öppna webbläsarutvecklarverktygen på Lumas hemsida. Om det är Chrome väljer du knappen F12 på tangentbordet
  2. Välj fliken Console
  3. Ange adobeDataLayer och välj Enter på tangentbordet för att visa datalagrets värden

Fliken Nätverk

Validera händelser och variabler som angetts på produktsidorna, kundvagnssidan och orderbekräftelsesidan.

Validera identitetskarta

Du kan även validera informationen i identitetskartan:

  1. Välj Sign In på Luma-webbplatsen. Välj Create Account och skapa ett konto med hjälp av inloggningsuppgifterna test@test.com/test

  2. Använd genvägen Jump to most recent i Felsökning för att snabbt gå till den senaste Web SDK-händelsen (den sista kolumnen). Markera raden events om du vill öppna den modala detaljraden.

  3. Sök efter identityMap i modal-filen. Här visas lumaCrmId med tre nycklar för authenticatedState, id och primär beteckning:
    SDK för webben i felsökning

Validera med verktyg för webbläsarutvecklare

Många webbutvecklare föredrar kanske att visa implementeringen i sina webbläsares utvecklingsverktyg. Detta är särskilt viktigt eftersom alla webbläsare inte har stöd för felsökningstillägget. På grund av det flexibla ramverket finns det ytterligare implementeringsdetaljer som du kan granska, som cookies och svarsinformation.

Validera nätverksbegäranden

Information om Web SDK-begäran visas även i webbläsarens webbutvecklarverktyg på fliken Nätverk (förutsatt att webbplatsen läser in ditt taggbibliotek).

  1. Öppna fliken Nätverk för webbläsarens webbutvecklingsverktyg och läs in sidan igen. Filtrera efter samtal med /ee för att hitta samtalet, markera det och titta sedan på fliken Huvuden och fliken Nyttolast

    Fliken Nätverk

  2. Gå till fliken Förhandsgranska och notera hur ECID-värdet inkluderas i nätverkssvaret.

    Fliken Nätverk

    note note
    NOTE
    ECID-värdet visas i nätverkssvaret. Den ingår inte i identityMap-delen av nätverksbegäran och lagras inte i det här formatet i en cookie.

Webbcookies från SDK

När vi arbetar med utvecklingsverktygen ska vi titta på några av cookies Web SDK-uppsättningarna i webbläsaren. Öppna Program > Cookies > https://luma.enablementadobe.com

Det finns flera cookies som har angetts av Web SDK:

  • kndctr_[IMS_ORGID]_AdobeOrg_identity: Detta lagrar data relaterade till ECID
  • kndctr_[IMS_ORGID]_AdobeOrg_Cluster: Detta lagrar den datacenterplats som används så att efterföljande nätverksanrop dirigeras till samma Edge-servrar
  • AMCV_[IMS_ORGID]%40AdobeOrg: Det här är den gamla AMCV-cookien som används av SDK-bibliotek som är äldre än webben och den ställs in eftersom den standardinställning för Migrate ECID to VisitorAPI to the web SDK som är vald i Adobe Experience Platform Web SDK-taggtillägget har utelämnats. Den här inställningen är viktig om den ska vara aktiverad när du migrerar sidor från äldre bibliotek till Web SDK, men den kan inaktiveras när alla sidor har migrerats under en viss tid.

Fliken Cookies

Om du rensar dessa cookies och läser in sidan igen kanske du märker att ytterligare cookies från tredje part har angetts på domänen .demdex.net. De här inställningarna har angetts eftersom vi har lämnat standardinställningen Use third party-cookies: Enabled i taggtillägget för Adobe Experience Platform Web SDK. Om din webbläsare inte tillåter cookies från tredje part tas de bort när du läser in sidan igen.

Demdexcookies

Luma lokal lagring

På webbplatsen Luma demo används strikt klientteknik som HTML, CSS och JavaScript. Det finns inga andra lagringsmekanismer för serverdelen än den Experience Cloud-implementering som används som standardläge för webbplatsen. Information som användarnamn lagras bara lokalt i din webbläsare med localStorage. Om du tar bort den här informationen eller använder ett undersökningsfönster kanske du måste återskapa ett användarkonto som du har skapat tidigare.

Lokalt lagringsutrymme

Lär dig sedan att validera dessa nätverksbegäranden när de tas emot och överförs från Platform Edge Network med Adobe Experience Platform Assurance!

NOTE
Tack för att du har lagt ned din tid på att lära dig om Adobe Experience Platform Web SDK. Om du har frågor, vill dela allmän feedback eller har förslag på framtida innehåll kan du dela dem i det här Experience League diskussionsgruppsinlägget
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4