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 webbläsarna Chrome och Firefox, som hjälper dig att se 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 som ersätter taggegenskapen hårdkodad på Luma demo site med din egen egendom.

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 utveckling 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 känner till datainsamlingstaggar och Luma demo site och har avslutat tidigare 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. Se till att du har Lumas demowebbplats öppna och markera Experience Platform-ikonen för 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 "lock" om du vill låsa felsökaren till Luma-webbplatsen.

  4. Välj Sign In och logga in på Adobe Experience Cloud med ditt Adobe ID.

  5. Gå till Experience Platform Tags till vänster navigering

    Skärm för felsökningstagg

  6. Välj Configuration tab

  7. Till höger om där den visar dig Page Embed Codes ​öppnar du Actions och markera 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 Development miljö

  10. Välj Apply knapp

    Välj den alternativa taggegenskapen

  11. Lumas webbplats kommer nu att läsas in igen med din egen taggegenskap.

    tagg, egenskap 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 börjar använda taggar på produktionswebbplatsen kan du använda samma teknik för att validera ändringar som du gör i utvecklingsmiljön för taggar.

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å till Experience Platform Web SDK i den vänstra navigeringen för att se Network Requests

  3. Öppna events rad

    Adobe Experience Platform Web SDK-begäran

  4. Se hur du kan se web.webpagedetails.pageView händelsetyp som du har angett i Update variable och andra färdiga variabler som följer AEP Web SDK ExperienceEvent fältgrupp

    Händelseinformation

  5. Bläddra nedåt till web -objekt, välj att öppna det och inspektera webPageDetails.name, webPageDetails.serveroch webPageDetails.siteSection. De ska matcha motsvarande digitalData datalagervariabler på hemsidan

TIP
Visa och jämföra digitalData datalager på hemsidan:
  1. Öppna webbläsarutvecklarverktygen på Lumas hemsida. I Chrome väljer du knapp F12 på tangentbordet
  2. Välj Console tab
  3. Retur digitalData och markera 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 Experience Platform Web SDK till vänster

    Web SDK in Debugger

  4. Välj events rad för att öppna information i ett popup-fönster

    Web SDK in Debugger

  5. Sök efter identityMap i popup-fönstret. Här ska du se lumaCrmId med tre nycklar för authenticatedState, id och primär:
    Web SDK in Debugger

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

Den här typen av förfrågningsinformation visas också i webbläsarens webbutvecklingsverktyg Nätverk (förutsatt att webbplatsen läser in taggbiblioteket).

  1. Öppna webbläsarens webbutvecklingsverktyg Nätverk och läsa in sidan igen. Filtrera samtal med /ee för att hitta samtalet markerar du det och tittar sedan på Sidhuvuden och Nyttolast tab

    Fliken Nätverk

  2. Gå till Svar och notera hur ECID-värdet ingår i svaret. Kopiera det här värdet så som du kommer att använda det för att validera profilinformationen i nästa övning

    Fliken Nätverk

    note note
    NOTE
    ECID-värdet visas i nätverkssvaret. Den ingår inte i identityMap del av nätverksbegäran, och den 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 Konfigurera ett datastream Platform Web SDK skickar först data från din digitala egendom 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ökaren.

Aktivera Edge Trace

Så här aktiverar du Edge Trace:

  1. I vänster navigering i Experience Platform Debugger välj Logs

  2. Välj Edge och markera Connect

    Koppla kantkalkering

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

    Ansluten kantkalkering

  4. Uppdatera Lumas startsida och kontrollera Experience Platform Debugger än en gång för att se data komma igenom.

    Kantkalkering för analysfyr

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 Adobe-program och händelsevidarebefordran. 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 med dig av dem om detta Experience League diskussionsinlägg
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4