Validera Web SDK-implementeringar med Experience Platform Debugger

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

Felsökaren Experience Platform är ett tillägg för Chrome- och Firefox-webbläsare, som gör att du kan se hur Adobe-tekniken som används på dina webbsidor. Ladda ned den version du föredrar:

Om du aldrig har använt felsökaren tidigare kanske du vill titta på den här översiktsvideon på fem minuter:

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örhandskrav

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

Läsa in alternativa taggbibliotek med Felsökning

Felsökaren i Experience Platform 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. Markera knappen Sign In och logga in på Adobe Experience Cloud med ditt Adobe-ID.

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

    Skärm för felsökningstagg

  6. Välj fliken Configuration

  7. Öppna listrutan Actions till höger om den plats där Page Embed Codes 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ö

  10. Markera knappen Apply

    Välj den alternativa taggegenskapen

  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 implementeringen av din Platform Web SDK. 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 nätverksbegäranden på klientsidan med Experience Platform Debugger

Du kan använda felsökaren för att validera klientsidesbeacons som aktiveras från plattformens 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, webPageDetails.server och webPageDetails.siteSection. De ska matcha motsvarande digitalData datalagervariabler på startsidan

TIP
Så här visar och jämför du datalagret digitalData 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 digitalData och välj Enter på tangentbordet för att visa datalagrets värden

Fliken Nätverk

Du kan även validera informationen i identitetskartan:

  1. Logga in på Luma-webbplatsen med inloggningsuppgifterna test@adobe.com/test

  2. Återgå till Lumas hemsida

  3. Öppna avsnittet Experience Platform Web SDK i den vänstra navigeringen

    Web SDK i felsökning

  4. Markera raden events om du vill öppna information i ett popup-fönster

    Web SDK i felsökning

  5. Sök efter identityMap i popup-fönstret. Här visas lumaCrmId med tre nycklar för authenticatedState, id och primär:
    Web SDK i felsökning

Validera klientförfrågningar med utvecklingsverktyg i webbläsaren

Den här typen av begärandeinformation visas också på fliken Nätverk i webbläsaren (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 Svar och notera hur ECID-värdet inkluderas i svaret.

    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.

Validera nätverksbegäranden på serversidan med Experience Platform Debugger

Som du lärde dig i lektionen Konfigurera en datastream skickar Platform Web SDK först data från din digitala egenskap till Platform Edge Network. Sedan gör Platform Edge Network ytterligare serverförfrågningar till motsvarande tjänster som är aktiverade i ditt datastream. Du kan validera de serverförfrågningar som gjorts av Platform Edge Network genom att använda Edge Trace i Felsökning.

Aktivera Edge Trace

Aktivera Edge Trace:

  1. I den vänstra navigeringen för Experience Platform Debugger väljer du Logs

  2. Välj fliken Edge och välj Connect

    Anslut Edge Trace

  3. Det är tomt för tillfället

    Ansluten Edge Trace

  4. Uppdatera startsidan för Luma och kontrollera Experience Platform Debugger igen för att se data som kommer igenom.

    Analysfyr för Edge Trace

För närvarande kan du inte visa några Platform Edge Network-begäranden som går till Adobe-program eftersom du inte har aktiverat några i datastream. I framtida lektioner använder du Edge Trace för att visa utgående begäranden på serversidan till program på Adobe och vidarebefordran av händelser. Men först får du lära dig mer om ett annat verktyg för att validera serverförfrågningar från Platform Edge Network - Adobe Experience Platform Assurance!

Nästa:

NOTE
Tack för att du lade 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-diskussionsinlägget
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4