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.

Evento inizio pagina
code language-js
alloy("sendEvent", {
  type: "decisioning.propositionFetch",
  renderDecisions: true,
  personalization: {
    sendDisplayEvent: false
  }
});
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

Proposte con rendering automatico

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
alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});
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.
Proposte con rendering manuale

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
alloy("sendEvent", {
  xdm: {
    ... // Optional bottom of page event data
    _experience: {
      decisioning: {
        propositions: propositions.map(function(p) {
          return {
            id: p.id,
            scope: p.scope,
            scopeDetails: p.scopeDetails
          };
        }),
        propositionEventType: {
          display: 1
        }
      }
    }
  }
});
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

Visualizzazione prima pagina

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
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
    type: "decisioning.propositionFetch",
    renderDecisions: true,
    personalization: {
        sendDisplayEvent: false
    },
    xdm: {
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

// Bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.

alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
Seconda visualizzazione pagina (opzione 1)

In questo esempio non è necessario eseguire una divisione superiore/inferiore della pagina, perché la personalizzazione della pagina è già stata recuperata.

code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
Seconda visualizzazione pagina (opzione 2)

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
// top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
    viewName: "cart"
});

// bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});

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.

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636