Configuración de la parte superior e inferior de los eventos de página en Web SDK

Al ofrecer experiencias personalizadas, el tiempo de carga de una página web es esencial. Para minimizar el tiempo que un usuario espera contenido personalizado, Web SDK admite la configuración de los eventos superior e inferior de la página.

Los eventos superior e inferior de página describen un método para cargar de forma asíncrona varios elementos en la página, manteniendo al mismo tiempo el tiempo de carga de la página como mínimo:

  • La parte superior del evento de página solicita personalización en cuanto la página empieza a cargarse.
  • La parte inferior del evento de página registra una vista de página cuando la página termina de cargarse.

Adobe Analytics ignora la parte superior de los eventos de página, lo que lleva a un registro de métricas más preciso, ya que solo se registra una visita a la página (la parte inferior del evento de página).

Puede configurar los eventos superior e inferior de la página de dos maneras: llamando directamente a la biblioteca de JavaScript de Web SDK (alloy()) o utilizando la extensión de etiquetas de Web SDK en la interfaz de usuario de etiquetas de Adobe Experience Platform. La acción Enviar evento de la extensión de etiqueta incluye la opción ‘Usar eventos guiados’ que preconfigura los valores de campo para los escenarios ‘Solicitar personalización’ (parte superior de la página) y ‘Recopilar análisis’ (parte inferior de la página). Cada ejemplo siguiente muestra ambas implementaciones.

Evento de parte superior de la página top-of-page

El ejemplo siguiente configura una parte superior del evento de página que solicita personalización pero suprime eventos de visualización para las propuestas procesadas automáticamente. Estos eventos de visualización se envían con la parte inferior del evento de página en su lugar.

Biblioteca de JavaScript
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
Parámetro Obligatorio/Opcional Descripción
type Requerido Establezca este parámetro en decisioning.propositionFetch. Este tipo de evento especial indica a Adobe Analytics que elimine este evento. Al utilizar Customer Journey Analytics, también puede configurar un filtro para soltar estos eventos. Consulte Tipos de eventos de Edge Network en Adobe Analytics para obtener más información.
renderDecisions Requerido Establezca este parámetro en true. Este parámetro indica a Web SDK que procese las decisiones devueltas por Edge Network.
personalization.sendDisplayEvent Requerido Establezca este parámetro en false. Este parámetro detiene el envío de eventos de visualización.
Extensión de etiqueta Web SDK

Configure una acción Send event en la regla que se activa en la parte superior de la página. Habilite Usar eventos guiados y luego seleccione Solicitar personalización. Esta opción bloquea ‘Type’ a ‘Recuperación de propuesta de decisión’, ‘Procesar decisiones de personalización visual’ para habilitar y ‘Enviar automáticamente un evento de visualización’ para deshabilitar.

Para establecer estos campos manualmente, deje Usar eventos guiados deshabilitado y configure cada campo usted mismo.

Final de ejemplos de eventos de página bottom-of-page

Proposiciones procesadas automáticamente bottom-auto-rendered

El ejemplo siguiente configura un evento de final de página que envía eventos de visualización para propuestas que se representaron automáticamente en la página pero se suprimieron en el evento principio de página.

Biblioteca de JavaScript
code language-js
alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});
table 0-row-3 1-row-3 2-row-3
Parámetro Obligatorio/Opcional Descripción
personalization.includeRenderedPropositions Requerido Establezca este parámetro en true. Este parámetro habilita el envío de eventos de visualización que se suprimieron en la parte superior del evento de página.
xdm Opcional Utilice este objeto para incluir todos los datos que desee para la parte inferior del evento de página.
Extensión de etiqueta Web SDK

Configure una acción Send event en la regla que se activa en la parte inferior de la página. Habilite Usar eventos guiados y luego seleccione Recopilar análisis. Esta opción bloquea ‘Incluir propuestas procesadas’ para que se habilite.

Para establecer este campo manualmente, deje Usar eventos guiados deshabilitado y habilite Incluir propuestas procesadas directamente. De forma opcional, rellene el campo XDM con un elemento de datos de objeto XDM que lleve los datos de su página.

Proposiciones procesadas manualmente bottom-manually-rendered

El ejemplo siguiente configura una parte inferior de un evento de página que envía eventos de visualización para propuestas que se procesaron manualmente en la página (es decir, para ámbitos o superficies de decisión personalizados).

NOTE
En esta situación, el evento de la parte inferior de la página debe esperar hasta que la parte superior del evento de la página se haya completado para que las propuestas se puedan procesar y registrar.
Biblioteca de JavaScript
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
Parámetro Obligatorio/Opcional Descripción
xdm._experience.decisioning.propositions Requerido Esta sección define las propuestas procesadas manualmente. Debe incluir las propuestas id, scope y scopeDetails. Consulte Administrar eventos de visualización para obtener más información. El contenido de personalización procesado manualmente debe incluirse en la parte inferior del evento de la página.
xdm._experience.decisioning.propositionEventType Requerido Establezca este parámetro en display: 1.
xdm Opcional Utilice este objeto para incluir todos los datos que desee para la parte inferior del evento de página.
Extensión de etiqueta Web SDK

La opción ‘Usar eventos guiados’ no cubre este escenario, así que configure la acción manualmente:

  1. Cree un elemento de datos XDM object (o Variable) que rellene _experience.decisioning.propositions con los id, scope y scopeDetails de cada propuesta procesada y establezca _experience.decisioning.propositionEventType.display en 1. Consulte Administrar eventos de visualización para obtener más información.
  2. En la acción Enviar evento para la parte inferior de la regla de página, deje Usar eventos guiados deshabilitado y haga referencia al elemento de datos del campo XDM.

Aplicación de una sola página con eventos en la parte superior e inferior de la página spa-example

En una aplicación de una sola página, debe especificar el nombre de la vista en cada cambio de vista para que Web SDK procese la personalización correcta en la parte superior de la página y registre la vista correcta en la parte inferior de la página.

Primera vista de página spa-first-view

En este ejemplo, home es la vista cargada en la carga inicial de la página.

Biblioteca de JavaScript

La llamada principal solicita personalización para la vista home sin registrar una visita de Analytics ni activar eventos de visualización. La llamada inferior registra la vista de página y activa los eventos de visualización suprimidos. Incluya el mismo viewName en ambas llamadas para que la vista se registre de manera consistente.

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.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
Extensión de etiqueta Web SDK
  1. Cree un elemento de datos XDM object que establezca web.webPageDetails.viewName en el nombre de la vista (por ejemplo, home).
  2. Configure una acción de parte superior de la página Enviar evento: habilite Usar eventos guiados, seleccione Solicitar personalización y haga referencia al elemento de datos en el campo XDM.
  3. Configure una acción en la parte inferior de la página Enviar evento: habilite Usar eventos guiados, seleccione Recopilar análisis y haga referencia al mismo elemento de datos en el campo XDM para que viewName coincida en ambos eventos.

Segunda vista de página: opción 1 spa-second-view-option-1

En este ejemplo, un solo evento es suficiente porque ya se ha recuperado la personalización de la página.

Biblioteca de JavaScript
code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
Extensión de etiqueta Web SDK
  1. Cree un elemento de datos XDM object que establezca web.webPageDetails.viewName en el nombre de la nueva vista (por ejemplo, cart).
  2. En el cambio de vista, configure una sola acción Enviar evento: deje Usar eventos guiados deshabilitado, habilite Procesar decisiones de personalización visuales y haga referencia al elemento de datos en el campo XDM.

Segunda vista de página: opción 2 spa-second-view-option-2

Utilice este método cuando tenga que retrasar la parte inferior del evento de la página (por ejemplo, cuando los datos de análisis de la página no estén listos en el momento del cambio de vista). Gestionar el cambio de vista en dos pasos:

  1. En la parte superior de la página, procese las propuestas ya recuperadas sin realizar una llamada de Edge Network.
  2. Una vez que los datos de análisis estén listos, envíe la parte inferior del evento de página.

Incluya el mismo viewName en ambas llamadas para que la vista se registre de manera consistente.

Biblioteca de JavaScript

Llame a applyPropositions en la parte superior de la página para procesar las propuestas almacenadas en caché para la nueva vista. A continuación, llame a sendEvent en la parte inferior de la página con includeRenderedPropositions: true para que se activen los eventos de visualización suprimidos.

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.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});
Extensión de etiqueta Web SDK
  1. Cree un elemento de datos XDM object que establezca web.webPageDetails.viewName en el nombre de la nueva vista (por ejemplo, cart).
  2. Para la parte superior del evento de página, configure una acción Aplicar propuestas y establezca el campo Ver nombre en el nombre de la vista (por ejemplo, cart). Esta acción procesa las propuestas ya recuperadas sin ponerse en contacto con Edge Network.
  3. Para el final del evento de la página, configura una acción Enviar evento: habilita Usar eventos guiados, selecciona Recopilar análisis y haz referencia al elemento de datos en el campo XDM.

Ejemplo de GitHub github-sample

La muestra superior e inferior en el repositorio alloy-samples muestra cómo solicitar personalización en la parte superior de la página y enviar métricas de análisis en la parte inferior. Descargue el ejemplo y ejecútelo localmente para ver cómo funcionan la parte superior e inferior de los eventos de página. El ejemplo utiliza la biblioteca JavaScript directamente; los mismos patrones se aplican cuando se configuran reglas equivalentes en la extensión de etiquetas Web SDK.

recommendation-more-help
experience-platform-help-collection