Convalidare le implementazioni Web SDK con Experience Platform Debugger
Scopri come convalidare l’implementazione di Adobe Experience Platform Web SDK 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 il debugger in precedenza, guarda questo video introduttivo di cinque minuti:
In questa lezione, utilizzi l'estensione Adobe Experience Platform Debugger per sostituire la proprietà di tag di codifica fissa nel sito demo Luma con la tua proprietà.
Questa tecnica è denominata cambio di ambiente e sarà utile in un secondo momento, quando lavorerai con i tag sul tuo sito web. Ti consente di caricare il tuo sito Web di produzione nel browser, ma con la libreria di tag sviluppo. Questa funzionalità ti consente di creare e convalidare le modifiche ai tag in modo indipendente dalle regolari versioni del codice. Dopo tutto, questa separazione tra versioni di tag di marketing e versioni di codice è uno dei motivi principali per cui i clienti utilizzano i tag.
Obiettivi di apprendimento
Alla fine di questa lezione, potrai utilizzare il debugger per:
- Caricare una libreria di tag alternativa
- Verifica che l’evento XDM lato client acquisisca e invii i dati come previsto all’Edge Network di Platform
- Abilita Edge Trace per visualizzare le richieste lato server inviate dall’Edge Network di Platform
Prerequisiti
Hai familiarità con i tag di raccolta dati e con il sito demo Luma e hai completato le lezioni precedenti nell’esercitazione:
Caricare librerie di tag alternative con Debugger
Experience Platform Debugger dispone di una funzione interessante 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.
-
Assicurati che il sito Web di dimostrazione Luma sia aperto e seleziona l'icona dell'estensione Experience Platform Debugger
-
Verrà aperto Debugger e verranno visualizzati alcuni dettagli dell’implementazione hardcoded (potrebbe essere necessario ricaricare il sito Luma dopo aver aperto Debugger)
-
Verifica che il debugger sia "connesso a Luma" come illustrato di seguito, quindi seleziona l'icona "blocca" per bloccare il debugger sul sito Luma.
-
Seleziona il pulsante Accedi e accedi a Adobe Experience Cloud utilizzando il tuo ID Adobe.
-
Ora vai a Tag di Experience Platform nel menu di navigazione a sinistra
-
Seleziona la scheda Configurazione
-
A destra della visualizzazione dei Codici di incorporamento pagina, apri il menu a discesa Azioni e seleziona Sostituisci
-
Poiché sei autenticato, il Debugger estrae le proprietà e gli ambienti dei tag disponibili. Seleziona la proprietà
-
Seleziona l'ambiente
Development -
Seleziona il pulsante Applica
-
Il sito Web Luma ricaricherà con la tua proprietà tag.
Continuando l’esercitazione, utilizzi questa tecnica per mappare il sito Luma sulla tua proprietà tag per convalidare l’implementazione dell’SDK web per Platform. Quando utilizzi i tag sul tuo sito web, puoi usare questa stessa tecnica per convalidare le librerie di tag di sviluppo sul sito web di produzione.
Convalidare richieste di rete lato client con Experience Platform Debugger
Puoi utilizzare il debugger per convalidare i beacon lato client attivati dall’implementazione di Platform Web SDK per visualizzare i dati inviati a Platform, ad Edge Network:
-
Vai a Riepilogo nel menu di navigazione a sinistra per visualizzare i dettagli della proprietà tag
-
Ora vai a Experience Platform Web SDK nella barra di navigazione a sinistra per visualizzare le richieste di rete
-
Apri la riga events
-
Nota come visualizzare il tipo di evento
web.webpagedetails.pageViewspecificato nell'azione Aggiorna variabile e altre variabili predefinite che aderiscono al gruppo di campiAEP Web SDK ExperienceEvent
-
Scorrere verso il basso fino all'oggetto
web, selezionare per aprirlo e controllarewebPageDetails.name,webPageDetails.serverewebPageDetails.siteSection. Devono corrispondere alle corrispondenti variabili del livello datidigitalDatanella home page
digitalData nella home page:- Nella home page di Luma, apri gli strumenti di sviluppo del browser. Nel caso di Chrome, selezionare il pulsante
F12sulla tastiera - Seleziona la scheda Console
- Immetti
digitalDatae selezionaEntersulla tastiera per visualizzare i valori del livello dati
Puoi anche convalidare i dettagli di Identity Map:
-
Accedi al sito Luma utilizzando le credenziali
test@adobe.com/test -
Torna alla home page di Luma
-
Apri la sezione Experience Platform Web SDK nel menu di navigazione a sinistra
-
Seleziona la riga events per aprire i dettagli in un popup
-
Cerca identityMap all'interno del pop-up. Qui dovresti vedere
lumaCrmIdcon tre chiavi di authenticatedState, id e primary:
Convalidare le richieste lato client con gli strumenti di sviluppo del browser
Questi tipi di dettagli della richiesta sono visibili anche nella scheda Strumenti per sviluppatori Web Rete del browser (supponendo che il sito Web stia caricando la libreria di tag).
-
Apri la scheda Network degli strumenti per sviluppatori Web del browser e ricarica la pagina. Filtra le chiamate con
/eeper individuare la chiamata, selezionala e cerca nelle schede Intestazioni e Payload
-
Vai alla scheda Risposta e osserva come il valore ECID è incluso nella risposta.
note note NOTE Il valore ECID è visibile nella risposta di rete. Non è incluso nella porzione identityMapdella richiesta di rete, né è memorizzato in questo formato in un cookie.
Convalidare le richieste di rete lato server con Experience Platform Debugger
Come hai appreso nella lezione Configurare uno stream di dati, Platform Web SDK invia prima i dati dalla proprietà digitale all'Edge Network di Platform. Quindi, l’Edge Network di Platform effettua richieste aggiuntive lato server ai servizi corrispondenti abilitati nello stream di dati. Puoi convalidare le richieste lato server effettuate dall’Edge Network di Platform utilizzando Edge Trace nel debugger.
Abilita traccia di Edge
Per abilitare Edge Trace:
-
Nel menu di navigazione a sinistra di Experience Platform Debugger seleziona Registri
-
Seleziona la scheda Edge e seleziona Connetti
-
Per il momento è vuoto
-
Aggiorna la home page Luma e controlla di nuovo Experience Platform Debugger per visualizzare i dati.
A questo punto, non è possibile visualizzare le richieste di Edge Network di Platform indirizzate alle applicazioni di Adobe, perché non ne hai abilitate alcuna nello stream di dati. Nelle lezioni future, utilizzi Edge Trace per visualizzare le richieste lato server in uscita per le applicazioni Adobe e l’inoltro di eventi. Ma prima di tutto, scopri un altro strumento per convalidare le richieste lato server effettuate da Edge Network di Platform: Adobe Experience Platform Assurance.