Convalidare le implementazioni dell’SDK web con Experience Platform Debugger

Scopri come convalidare l’implementazione dell’SDK per web Platform con Adobe Experience Platform Debugger.

Experience Platform Debugger è un’estensione disponibile per i browser Chrome e Firefox che consente di visualizzare la tecnologia Adobe implementata nelle pagine web. Scarica la versione per il browser preferito:

Se non hai mai utilizzato prima il debugger e questo è diverso dal precedente debugger Adobe Experience Cloud, potresti voler guardare questo video di panoramica di cinque minuti:

In questa lezione verrà utilizzato il Estensione Adobe Experience Cloud Debugger per sostituire la proprietà tag hardcoded nel Sito dimostrativo Luma con la tua proprietà.

Questa tecnica si chiama cambio di ambiente e sarà utile in un secondo momento, quando lavori con i tag sul tuo sito web. Puoi caricare il tuo sito web di produzione nel browser, ma con sviluppo ambiente tag. Questa funzionalità ti consente di creare e convalidare le modifiche ai tag in modo indipendente dalle regolari versioni del codice. Dopo tutto, questa separazione delle versioni dei tag di marketing dalle versioni regolari del codice è uno dei motivi principali per cui i clienti usano i tag in primo luogo!

Finalità di apprendimento

Al termine di questa lezione, puoi utilizzare il debugger per:

  • Caricare una libreria di tag alternativa
  • Convalida l'oggetto XDM che acquisisce e invia dati come previsto da Edge Network

Prerequisiti

Hai familiarità con i tag di raccolta dati e con Sito dimostrativo Luma e hanno completato le seguenti lezioni precedenti nell’esercitazione:

Caricare librerie di tag alternative con Debugger

Questa esercitazione utilizza una versione ospitata pubblicamente Sito web dimostrativo Luma. Apri la homepage e segnalala.

Homepage Luma

Experience Platform Debugger dispone di una funzione fantastica che consente di sostituire una libreria di tag esistente con una diversa. Questa tecnica è utile per la convalida e ci consente di saltare molti passaggi di implementazione in questa esercitazione.

  1. Assicurati di aver aperto il sito Luma e seleziona l’icona dell’estensione Experience Platform Debugger .

  2. Il debugger verrà aperto e mostrerà alcuni dettagli dell’implementazione hardcoded, che non sono correlati a questa esercitazione (potrebbe essere necessario ricaricare il sito Luma dopo l’apertura del debugger)

  3. Conferma che il debugger sia "Connesso a Luma" come illustrato di seguito e quindi selezionare "bloccare" per bloccare il debugger sul sito Luma.

  4. Seleziona la Accesso e accedi a Adobe Experience Cloud utilizzando il tuo ID Adobe.

  5. Ora vai a Experience Platform di tag nella navigazione a sinistra

    Schermata tag di Debugger

  6. Seleziona la Configurazione scheda

  7. A destra di dove ti mostra la Codici di incorporamento della pagina, apri Azioni a discesa e seleziona Sostituisci

    Seleziona Azioni > Sostituisci

  8. Poiché sei autenticato, Debugger eseguirà il pull-in delle proprietà e degli ambienti di tag disponibili. Seleziona la tua Web SDK Course property

  9. Seleziona la tua Development ambiente

  10. Seleziona la Applica pulsante

    Selezionare la proprietà tag alternativa

  11. Il sito web Luma verrà ora ricaricato con la proprietà tag.

    proprietà tag sostituita

Continuando l’esercitazione, utilizzerai questa tecnica per mappare il sito Luma sulla tua proprietà tag per convalidare l’implementazione dell’SDK per web di Platform. Quando inizi a utilizzare i tag sul sito web di produzione, puoi usare la stessa tecnica per convalidare le modifiche.

Convalidare l’implementazione in Experience Platform Debugger

Puoi utilizzare Debugger per convalidare l’implementazione dell’SDK per web di Platform e visualizzare i dati inviati a Platform Edge Network:

  1. Vai a Riepilogo nel menu di navigazione a sinistra, per visualizzare i dettagli della proprietà tag

    Scheda Riepilogo

  2. Ora vai a Experience Platform Web SDK nella navigazione a sinistra per visualizzare il Richieste di rete

  3. Apri events row (non preoccuparti se questa schermata mostra più richieste della tua, include richieste provenienti da lezioni future e puoi ignorarle per il momento)

    richiesta Adobe Experience Platform Web SDK

  4. Si noti come è possibile visualizzare web.webpagedetails.pageView tipo di evento specificato nella Invia evento e altre variabili pronte all’uso che aderiscono al AEP Web SDK ExperienceEvent Mixin format

    Dettagli evento

  5. Scorri verso il basso fino a web , selezionare per aprirlo ed esaminare webPageDetails.name, webPageDetails.servere webPageDetails.siteSection. Devono corrispondere alle corrispondenti variabili del livello di dati digitaliData nella home page

    Scheda Rete

Puoi anche convalidare i dettagli della mappa identità:

  1. Accedi al sito Luma utilizzando le credenziali test@adobe.com/test

  2. Torna alla home page di Luma

  3. Apri Experience Platform Web SDK nella navigazione a sinistra

    SDK web in Debugger

  4. Seleziona la events riga per aprire i dettagli in un pop-up

    SDK web in Debugger

  5. Cerca il identityMap nella finestra a comparsa. Qui dovrebbe vedere lumaCrmId con tre chiavi authenticatedState, id e primary:
    SDK web in Debugger

Convalida con gli strumenti di sviluppo del browser

Questi tipi di dettagli di richiesta sono visibili anche negli strumenti per sviluppatori web del browser Rete (supponendo che il sito web stia caricando la libreria di tag).

  1. Apri gli strumenti per sviluppatori web del browser Rete e ricarica la pagina. Filtrare le chiamate con /ee per individuare la chiamata , selezionala e quindi cerca nella Intestazioni e Payload scheda

    Scheda Rete

  2. Vai a Risposta e osserva come il valore ECID è incluso nella risposta. Copia questo valore così come lo utilizzerai per convalidare le informazioni di profilo nell’esercizio successivo

    Scheda Rete

    NOTA

    Potresti non visualizzare la stessa quantità di richieste di payload come nella schermata precedente. Questa disparità è dovuta alle lezioni future per configurazione di Target sono stati completati al momento dello screenshot in corso. Per ora puoi ignorare questa differenza.

Ora che un oggetto XDM viene attivato su una pagina e sapendo come convalidare la raccolta dati, puoi configurare le singole applicazioni Adobe utilizzando Platform Web SDK.

Avanti:

NOTA

Grazie per aver investito il tuo tempo nel conoscere Adobe Experience Platform Web SDK. In caso di domande, se desideri condividere feedback generali o se hai suggerimenti su contenuti futuri, condividi questi su questo Experience League Articolo di discussione della Comunità

In questa pagina