Documentación Journey Optimizer Guía de Journey Optimizer

Implementación de aplicaciones de una sola página (SPA) web-spa-implementation

Última actualización: 9 de septiembre de 2026

Creado para:

Intermediate
Developer

Adobe Experience Platform Web SDK proporciona funciones enriquecidas que permiten a su empresa personalizar tecnologías de próxima generación del lado del cliente, como aplicaciones de una sola página (SPA).

Los sitios web tradicionales funcionan en modelos de navegación “página a página”, conocidos como aplicaciones de varias páginas, en las que los diseños de sitios web están perfectamente asociados a direcciones URL y las transiciones de una página web a otra requieren la carga de una página.

Las aplicaciones web modernas, como las aplicaciones de una sola página (SPA), han adoptado un modelo que impulsa el uso rápido de la representación de la interfaz de usuario del explorador, que a menudo es independiente de las recargas de página. Estas experiencias se pueden activar mediante interacciones de clientes, como desplazamientos, clics y movimientos del cursor. A medida que los paradigmas de la web moderna evolucionan, la importancia de los eventos genéricos tradicionales, como la carga de páginas, para implementar la personalización y la experimentación, ya no funciona.

Diagrama del ciclo de vida de la página.

Ventajas de utilizar Web SDK para SPA web-spa-benefits

Estas son algunas ventajas de utilizar Web SDK para aplicaciones de una sola página:

Capacidad de almacenar en caché todas las ofertas de carga de página para reducir varias llamadas al servidor a una sola llamada al servidor.
Enorme mejora de la experiencia del usuario en su sitio porque las ofertas se muestran inmediatamente a través de la caché, sin retraso introducido por las llamadas tradicionales al servidor.
La configuración de desarrollador único permite a los especialistas en marketing crear y ejecutar actividades de personalización y experimentación a través del editor visual web de Adobe Journey Optimizer en su SPA.

Vistas de XDM y aplicaciones de una sola página web-spa-xdm

El editor web de Journey Optimizer aprovecha un concepto llamado views.

Las vistas son un grupo lógico de elementos visuales que, juntos, constituyen una experiencia de SPA. Por lo tanto, una aplicación de una sola página puede considerarse como una transición entre vistas (en lugar de las direcciones URL) según las interacciones del usuario. Una vista suele representar un sitio completo, una sola página o elementos visuales agrupados dentro de una página.

Para explicar más en detalle cuáles son las vistas, el siguiente ejemplo utiliza un sitio hipotético de comercio electrónico en línea.

Después de navegar a la página de inicio, una imagen promociona las colecciones de temporada, así como los diferentes catálogos de productos disponibles en el sitio. En este caso, se podría definir una vista para toda la pantalla de inicio. Esta vista podría llamarse simplemente “home”.
A medida que el cliente se interese más por los productos que vende la empresa, decide hacer clic en el vínculo Hombres. Similar a la página de inicio, toda la página Men se puede definir como una vista. Esta vista podría llamarse “men”.
Dado que una vista puede definirse como un sitio completo o un grupo de elementos visuales en un sitio, los cuatro productos mostrados en el sitio de productos pueden agruparse y considerarse como una vista. Esta vista podría llamarse “productos”.
Cuando el cliente decide hacer clic en el botón TODOS LOS PRODUCTOS PARA HOMBRE para explorar más productos en el sitio, la dirección URL del sitio web no cambia en este caso, pero se puede crear una vista aquí para representar únicamente la segunda fila de productos que se muestran. El nombre de la vista puede ser “products-page-2”.
El cliente decide adquirir algunos productos en el sitio y pasa a la pantalla de pago. La propia pantalla del carro de compras se puede asociar a una vista denominada “carro de compras”. O podría tener una vista diferente dentro de la pantalla de cierre de compra para administrar los productos recomendados a continuación.

El concepto de puntos de vista puede ampliarse mucho más. Estos son solo algunos ejemplos de vistas que se pueden definir en un sitio.

Implementación de vistas XDM implement-xdm-views

Las vistas XDM se pueden aprovechar en Adobe Journey Optimizer para que los especialistas en marketing puedan ejecutar campañas de personalización y experimentación web en SPA a través del editor visual web de Journey Optimizer.

Esto requiere realizar los siguientes pasos para completar una configuración de desarrollador única:

Instale Adobe Experience Platform Web SDK y compruebe la página de requisitos previos del canal web.
Determine todas las vistas XDM de la aplicación de una sola página que desee personalizar.
Después de definir las vistas XDM, para enviar contenido a esas vistas, debe implementar la función sendEvent() con renderDecisions establecido en true y la vista XDM correspondiente en la aplicación de una sola página. La vista XDM debe pasarse en xdm.web.webPageDetails.viewName. Este paso permite a los especialistas en marketing descubrir estas vistas dentro del editor web de Journey Optimizer y aplicar modificaciones de contenido para ellas:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});

NOTE

En la primera llamada de sendEvent(), se recuperarán y almacenarán en caché todas las vistas XDM que se deban procesar al usuario final. Las llamadas subsiguientes sendEvent() con vistas XDM pasadas se leerán desde la caché y se procesarán sin una llamada al servidor.

`sendEvent()` ejemplos de funciones

En esta sección se describen dos ejemplos que muestran cómo invocar la función sendEvent() en React para un SPA de comercio electrónico hipotético.

Ejemplo 1: página principal de la prueba A/B web-spa-sample-1

El equipo de marketing desea ejecutar pruebas A/B en toda la página de inicio.

Página de muestra de aplicación de una sola página.

Para ejecutar pruebas A/B en todo el sitio principal, sendEvent() debe invocarse con el XDM viewName establecido en home:

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Ejemplo 2: Productos personalizados web-spa-sample-2

El equipo de marketing desea personalizar la segunda fila de productos cambiando el color de la etiqueta de precio a rojo después de que un usuario haga clic para ver todos los productos para hombre.

Página de muestra de aplicación de una sola página con productos personalizados.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how developers implement XDM views in single-page applications (SPAs) using the Adobe Experience Platform Web SDK so marketers can run personalization and experimentation on those views through the Journey Optimizer web visual editor.

Intents:

Understand how XDM views represent SPA experiences instead of URLs
Perform the one-time developer setup to implement XDM views
Deliver content to views using sendEvent() with renderDecisions set to true
Pass the XDM view name in xdm.web.webPageDetails.viewName
Invoke sendEvent() in React for view changes in an SPA

Glossary:

Single-page application (SPA): A modern web application that uses browser UI rendering often independent of page reloads, triggered by interactions such as scrolls, clicks, and cursor movements (product-specific)
View: A logical group of visual elements which together make up an SPA experience; can represent a whole site, a single page, or grouped visual elements within a page (product-specific)
XDM view: A view that can be leveraged in Adobe Journey Optimizer to run web personalization and experimentation campaigns on SPAs via the web visual editor (product-specific)
viewName: The XDM field (xdm.web.webPageDetails.viewName) that carries the view being rendered (product-specific)

Guardrails:

Implementing XDM views requires a one-time developer setup performed in order: install the Adobe Experience Platform Web SDK, check the web channel prerequisites, determine all XDM views to personalize, and implement sendEvent() with renderDecisions set to true and the corresponding XDM view.
The XDM view must be passed in xdm.web.webPageDetails.viewName.
A view name cannot be empty.
On the first sendEvent() call, all XDM views that should be rendered are fetched and cached; subsequent sendEvent() calls with XDM views passed in are read from the cache and rendered without a server call.

Terminology:

Canonical name: XDM view — Acronym: n/a — variants: view, viewName
Synonyms: “single-page application” = “SPA”
Do not confuse: “multi-page application” (page-to-page navigation requiring a page load) ≠ “single-page application” (browser UI rendering independent of page reloads)

FAQ:

Q: What is a view in the context of SPAs? — A logical group of visual elements that make up an SPA experience; it can be a whole site, a single page, or grouped elements within a page.
Q: Where is the view name passed? — In xdm.web.webPageDetails.viewName within the sendEvent() call.
Q: Does every view change trigger a server call? — No; the first sendEvent() call fetches and caches all views to be rendered, and subsequent calls with views passed in are served from the cache without a server call.
Q: What enables marketers to discover views in the web editor? — Implementing sendEvent() with renderDecisions set to true and the corresponding XDM view allows marketers to discover the views inside the Journey Optimizer web editor.

recommendation-more-help

journey-optimizer-help