Configurare gli eventi di inizio e fine pagina in Web SDK
Quando desideri offrire esperienze personalizzate ai clienti, il tempo di caricamento di una pagina web è essenziale.
Per ottimizzare i tempi di caricamento e distribuire la personalizzazione il più rapidamente possibile, Web SDK supporta la configurazione degli eventi di inizio e fine pagina.
La parte superiore e inferiore degli eventi di pagina descrivono un metodo per caricare in modo asincrono vari elementi nella pagina, mantenendo al minimo il tempo di caricamento della pagina.
Questa configurazione riduce al minimo il tempo di attesa per il caricamento del contenuto personalizzato da parte di un utente.
In termini di precisione delle metriche, Adobe Analytics può ignorare gli eventi nella parte superiore della pagina, il che consente una registrazione più accurata delle metriche, in quanto viene registrato un solo hit pagina (la parte inferiore dell’evento pagina).
Casi d’uso use-cases
Un rivenditore di abbigliamento sportivo desidera offrire esperienze personalizzate ai propri acquirenti, riducendo al minimo l’attrito degli utenti quando visitano il sito web, il tutto pur essendo in grado di raccogliere in modo accurato le metriche dei visitatori.
Utilizzando gli eventi di inizio e fine pagina in Web SDK, il team marketing può configurare la distribuzione della personalizzazione nel modo più ottimale:
- Web SDK invia una richiesta di personalizzazione che viene caricata non appena la pagina inizia a caricarsi. Questo è un evento di inizio pagina.
- Al termine del caricamento della pagina, viene registrato un evento di visualizzazione della pagina. Questo accade più avanti nel processo di caricamento della pagina. Questo è un evento nella parte inferiore della pagina.
Esempio di evento all’inizio della pagina top-of-page
L'esempio di codice seguente esemplifica una parte superiore della configurazione degli eventi di pagina che richiede la personalizzazione ma non invia eventi di visualizzazione per le proposte sottoposte a rendering automatico. I eventi di visualizzazione verranno inviati come parte dell'evento di fine pagina.
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
---|---|---|
Parametro | Obbligatorio/facoltativo | Descrizione |
type |
Obbligatorio | Imposta questo parametro su decisioning.propositionFetch . Questo tipo di evento speciale comunica ad Adobe Analytics di eliminare questo evento. Quando utilizzi il Customer Journey Analytics, puoi anche impostare un filtro per eliminare questi eventi. |
renderDecisions |
Obbligatorio | Imposta questo parametro su true . Questo parametro indica a Web SDK di eseguire il rendering delle decisioni restituite dall'Edge Network. |
personalization.sendDisplayEvent |
Obbligatorio | Imposta questo parametro su false . In questo modo si interrompe l’invio degli eventi di visualizzazione. |
Esempi di eventi nella parte inferiore della pagina bottom-of-page
L'esempio di codice seguente esemplifica una parte inferiore della configurazione dell'evento di pagina che invia eventi di visualizzazione per proposte di cui è stato eseguito il rendering automatico sulla pagina, ma per le quali gli eventi di visualizzazione sono stati soppressi nell'evento parte superiore della pagina.
note note |
---|
NOTE |
In questo scenario, devi chiamare la parte inferiore dell'evento pagina dopo la parte superiore della pagina uno. Tuttavia, per l’evento nella parte inferiore della pagina non è necessario attendere il completamento della parte superiore della pagina 1. |
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 | ||
---|---|---|
Parametro | Obbligatorio/facoltativo | Descrizione |
personalization.includeRenderedPropositions |
Obbligatorio | Imposta questo parametro su true . Questo consente l’invio di eventi di visualizzazione che sono stati soppressi nella parte superiore dell’evento della pagina. |
xdm |
Facoltativo | Utilizza questa sezione per includere tutti i dati necessari per l’evento nella parte inferiore della pagina. |
L’esempio di codice seguente esemplifica una parte inferiore della configurazione dell’evento di pagina che invia eventi di visualizzazione per proposte di cui è stato eseguito il rendering manuale sulla pagina (ad esempio per ambiti decisionali o superfici personalizzati).
note note |
---|
NOTE |
In questo scenario, l’evento nella parte inferiore della pagina deve attendere il completamento dell’evento nella parte superiore della pagina, per eseguire il rendering delle proposte e registrare l’evento nella parte inferiore della pagina. |
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
---|---|---|
Parametro | Obbligatorio/facoltativo | Descrizione |
xdm._experience.decisioning.propositions |
Obbligatorio | Questa sezione definisce le proposte sottoposte a rendering manuale. È necessario includere la proposta ID , scope e scopeDetails . Per ulteriori informazioni su come registrare eventi di visualizzazione per contenuti con rendering manuale, consulta la documentazione su come eseguire manualmente il rendering della personalizzazione. Il contenuto di personalizzazione renderizzato manualmente deve essere incluso nella parte inferiore dell’hit pagina. |
xdm._experience.decisioning.propositionEventType |
Obbligatorio | Imposta questo parametro su display: 1 . |
xdm |
Facoltativo | Utilizza questa sezione per includere tutti i dati necessari per l’evento nella parte inferiore della pagina. |
Applicazione a pagina singola con hit nella pagina superiore e inferiore spa-example
L'esempio seguente include l'aggiunta del parametro xdm.web.webPageDetails.viewName
richiesto. Questo è ciò che la rende un'applicazione a pagina singola. viewName
in questo esempio è la visualizzazione caricata al caricamento della pagina.
code language-js |
---|
|
In questo esempio non è necessario eseguire una divisione superiore/inferiore della pagina, perché la personalizzazione della pagina è già stata recuperata.
code language-js |
---|
|
Se devi ancora ritardare la fine dell'hit pagina, puoi utilizzare applyPropositions
per l'inizio dell'hit pagina. Poiché non è necessario recuperare alcuna personalizzazione e registrare dati di Analytics, non è necessario effettuare una richiesta all’Edge Network.
code language-js |
---|
|
Esempio GitHub github-sample
L'esempio trovato in questo indirizzo illustra come utilizzare Experience Platform e Web SDK per richiedere la personalizzazione nella parte superiore della pagina e inviare le metriche di analisi nella parte inferiore. Puoi scaricare l’esempio ed eseguirlo localmente per comprendere come funzionano i primi e gli ultimi eventi di pagina.