Configurare gli eventi di inizio e fine pagina in Web SDK
Quando fornisci esperienze personalizzate, il tempo di caricamento di una pagina web è essenziale. Per ridurre al minimo il tempo di attesa di contenuti personalizzati da parte di un utente, 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:
- La parte superiore dell’evento pagina richiede la personalizzazione non appena la pagina inizia a caricarsi.
- La parte inferiore dell’evento di pagina registra la visualizzazione di una pagina al termine del caricamento.
Adobe Analytics ignora gli eventi di inizio pagina, il che porta a una registrazione più accurata delle metriche, in quanto viene registrato un solo hit pagina (la parte inferiore dell’evento pagina).
È possibile configurare gli eventi di inizio e fine pagina in due modi: chiamando direttamente la libreria Web SDK JavaScript (alloy()) oppure utilizzando l'estensione tag Web SDK nell'interfaccia utente Tag di Adobe Experience Platform. L'azione Send event dell'estensione tag include un'opzione 'Use guided events' che preconfigura i valori dei campi per gli scenari 'Request personalization' (inizio pagina) e 'Collect analytics' (fine pagina). Ogni esempio seguente mostra entrambe le implementazioni.
Evento all’inizio della pagina top-of-page
L'esempio seguente configura un evento all'inizio della pagina che richiede la personalizzazione ma elimina eventi di visualizzazione per le proposte sottoposte a rendering automatico. Tali eventi di visualizzazione vengono invece inviati con la parte inferiore dell’evento 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 Customer Journey Analytics, puoi anche impostare un filtro per eliminare questi eventi. Per ulteriori informazioni, vedere Tipi di evento Edge Network in Adobe Analytics. |
renderDecisions |
Obbligatorio | Imposta questo parametro su true. Questo parametro indica a Web SDK di eseguire il rendering delle decisioni restituite da Edge Network. |
personalization.sendDisplayEvent |
Obbligatorio | Imposta questo parametro su false. Questo parametro interrompe l’invio degli eventi di visualizzazione. |
Configura un'azione Send event nella regola che viene attivata nella parte superiore della pagina. Abilita Use guided events, quindi seleziona Request personalization. Questa opzione blocca 'Type' in 'Decisioning Proposition Fetch', 'Render visual personalization decisions' in abilitato e 'Automatically send a display event' in disabilitato.
Per impostare questi campi manualmente, lasciare disabilitato Use guided events e configurare ogni campo manualmente.
Esempi di eventi nella parte inferiore della pagina bottom-of-page
Proposizioni con rendering automatico bottom-auto-rendered
L'esempio seguente configura un evento in fondo alla pagina che invia eventi di visualizzazione per le proposte di cui è stato eseguito il rendering automatico nella pagina ma che sono state eliminate nell'evento superiore alla pagina.
| 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 parametro consente l’invio di eventi di visualizzazione soppressi nella parte superiore dell’evento pagina. |
xdm |
Facoltativo | Utilizzare questo oggetto per includere tutti i dati desiderati per l'evento di fine pagina. |
Configura un'azione Send event nella regola che viene attivata nella parte inferiore della pagina. Abilita Use guided events, quindi seleziona Collect analytics. Questa opzione blocca 'Include rendered propositions' su abilitato.
Per impostare questo campo manualmente, lasciare disabilitato Use guided events e abilitare direttamente Include rendered propositions. Facoltativamente, compila il campo XDM con un elemento dati oggetto XDM che trasporta i dati della pagina.
Proposizioni sottoposte a rendering manuale bottom-manually-rendered
L’esempio seguente configura un evento nella parte inferiore della pagina che invia eventi di visualizzazione per le proposte di cui è stato eseguito il rendering manuale sulla pagina (ovvero, per ambiti decisionali o superfici personalizzati).
| 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, vedere Gestione eventi di visualizzazione. Il contenuto di personalizzazione renderizzato manualmente deve essere incluso nella parte inferiore dell’evento pagina. |
xdm._experience.decisioning.propositionEventType |
Obbligatorio | Imposta questo parametro su display: 1. |
xdm |
Facoltativo | Utilizzare questo oggetto per includere tutti i dati desiderati per l'evento di fine pagina. |
L'opzione 'Use guided events' non copre lo scenario, pertanto configurare l'azione manualmente:
-
Crea un elemento dati oggetto XDM (o Variabile) che popola
_experience.decisioning.propositionscon ogni proposta di cui è stato eseguito il renderingid,scopeescopeDetailse imposta_experience.decisioning.propositionEventType.displaysu1. Per ulteriori informazioni, vedere Gestione eventi di visualizzazione. -
Nell'azione Send event per la parte inferiore della regola di pagina, lascia disabilitato Use guided events e fai riferimento all'elemento dati dal campo XDM.
Applicazione a pagina singola con eventi nella parte superiore e inferiore della pagina spa-example
In un'applicazione a pagina singola è necessario specificare il nome della visualizzazione per ogni modifica della visualizzazione in modo che Web SDK esegua il rendering della personalizzazione corretta nella parte superiore della pagina e registri la visualizzazione corretta nella parte inferiore della pagina.
Visualizzazione prima pagina spa-first-view
In questo esempio, home è la visualizzazione caricata al caricamento della pagina iniziale.
La chiamata superiore richiede la personalizzazione per la visualizzazione home senza registrare un hit di Analytics o attivare eventi di visualizzazione. La chiamata in basso registra la visualizzazione della pagina e attiva gli eventi di visualizzazione soppressi. Includere lo stesso viewName in entrambe le chiamate in modo che la visualizzazione venga registrata in modo coerente.
| code language-js |
|---|
|
-
Creare un elemento dati oggetto XDM che imposta
web.webPageDetails.viewNamesul nome della visualizzazione (ad esempio,home). -
Configura un'azione nella parte superiore della pagina Send event: abilita Use guided events, seleziona Request personalization e fai riferimento all'elemento dati nel campo XDM.
-
Configura un'azione nella parte inferiore della pagina Send event: abilita Use guided events, seleziona Collect analytics e fai riferimento allo stesso elemento dati nel campo XDM in modo che
viewNamecorrisponda in entrambi gli eventi.
Seconda visualizzazione pagina — opzione 1 spa-second-view-option-1
In questo esempio, un singolo evento è sufficiente perché la personalizzazione della pagina è già stata recuperata.
| code language-js |
|---|
|
-
Creare un elemento dati oggetto XDM che imposta
web.webPageDetails.viewNamesul nome della nuova visualizzazione (ad esempio,cart). -
Alla modifica della visualizzazione, configurare una singola azione Send event: lasciare disabilitato Use guided events, abilitare Render visual personalization decisions e fare riferimento all'elemento dati nel campo XDM.
Seconda visualizzazione pagina — opzione 2 spa-second-view-option-2
Utilizza questo approccio quando devi ritardare l’evento nella parte inferiore della pagina (ad esempio, quando i dati di analisi della pagina non sono pronti al momento della modifica della visualizzazione). La modifica della visualizzazione può essere gestita in due passaggi:
- Nella parte superiore della pagina, esegui il rendering delle proposte già recuperate senza effettuare una chiamata Edge Network.
- Una volta che i dati di analisi sono pronti, invia il fondo della pagina dell’evento.
Includere lo stesso viewName in entrambe le chiamate in modo che la visualizzazione venga registrata in modo coerente.
Chiamare applyPropositions nella parte superiore della pagina per eseguire il rendering delle proposte memorizzate nella cache per la nuova visualizzazione. Quindi chiama sendEvent nella parte inferiore della pagina con includeRenderedPropositions: true in modo che gli eventi di visualizzazione soppressi si attivino.
| code language-js |
|---|
|
-
Creare un elemento dati oggetto XDM che imposta
web.webPageDetails.viewNamesul nome della nuova visualizzazione (ad esempio,cart). -
Per l'evento all'inizio della pagina, configurare un'azione Apply propositions e impostare il campo View name sul nome della visualizzazione, ad esempio
cart. Questa azione esegue il rendering delle proposte già recuperate senza contattare Edge Network. -
Per l'evento nella parte inferiore della pagina, configurare un'azione Send event: abilita Use guided events, seleziona Collect analytics e fai riferimento all'elemento dati nel campo XDM.
Esempio GitHub github-sample
Il esempio dall'alto verso il basso nell'archivio dei campioni di lega illustra come richiedere la personalizzazione nella parte superiore della pagina e inviare le metriche di analisi nella parte inferiore. Scarica l’esempio ed eseguilo localmente per vedere come funzionano la parte superiore e inferiore degli eventi di pagina. Nell'esempio viene utilizzata direttamente la libreria JavaScript; gli stessi pattern vengono applicati quando si configurano regole equivalenti nell'estensione tag Web SDK.