Implementación de aplicación de una sola página

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

Los sitios web tradicionales funcionaban 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 se asociaban perfectamente a direcciones URL y transiciones de una página web a otra requerida para la carga de páginas.

Las aplicaciones web modernas, como las aplicaciones de una sola página, 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 es tanta.

SPA

SPA Ventajas del SDK web de Platform para la creación de informes de

Estas son algunas ventajas de utilizar el SDK web de Adobe Experience Platform para aplicaciones de una sola página:

Vistas de XDM y aplicaciones de una sola página

El VEC de Adobe Target SPA SPA para la visualización de datos se basa en un concepto llamado Vistas: un grupo lógico de elementos visuales que, juntos, constituyen una experiencia de. 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 o elementos visuales agrupados dentro de un sitio.

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 implementado en React para explorar las vistas de ejemplo.

Después de navegar al sitio principal, una imagen promociona una venta de Pascua, así como los productos más recientes 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 Productos. De forma similar a la página de inicio, se puede definir todo el sitio del producto como una vista. Esta vista podría denominarse "products-all".

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 Cargar más 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. En el sitio de cierre de compra, el cliente tiene la opción de elegir entre envío normal o exprés. Una vista puede ser cualquier grupo de elementos visuales en un sitio, por lo que se puede crear una vista para las preferencias de envío y llamarse "Preferencias de envío".

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

Implementación de vistas XDM

Las vistas XDM se pueden aprovechar en Adobe Target SPA para que los especialistas en marketing puedan ejecutar pruebas A/B y XT en los usuarios a través del Compositor de experiencias visuales (VEC). Esto requiere realizar los siguientes pasos para completar una configuración de desarrollador única:

sendEvent() ejemplos de funciones

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

Ejemplo 1: página principal de la prueba A/B

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

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

El equipo de mercadotecnia 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 en Cargar más.

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

Ejemplo 3: Preferencias de envío de la prueba A/B

El equipo de marketing desea ejecutar una prueba A/B para ver si el cambio del color del botón de azul a rojo cuando se selecciona Envío exprés puede mejorar las conversiones (en lugar de mantener el botón de color azul en ambas opciones de envío).

Para personalizar el contenido del sitio según las preferencias de envío que esté seleccionada, se puede crear una vista para cada preferencia de entrega. Cuando se selecciona Envío normal, la vista puede llamarse "checkout-normal". Si se selecciona Envío exprés, la vista puede llamarse "checkout-express".

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

class Checkout extends Component {

  render() {
    return (
      <div onChange={this.onDeliveryPreferenceChanged}>
        <label>
          <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
          <span> Normal Delivery (7-10 business days)</span>
        </label>
        <label>
          <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
          <span> Express Delivery* (2-3 business days)</span>
        </label>
      </div>
    );
  }

  onDeliveryPreferenceChanged(evt) {
    var selectedPreferenceValue = evt.target.value;
    onViewChange(selectedPreferenceValue);
  }

}

SPA Uso del Compositor de experiencias visuales para una experiencia de usuario

Cuando haya terminado de definir las vistas XDM e implementado sendEvent() con esas vistas XDM pasadas, el VEC podrá detectar estas vistas y permitir a los usuarios crear acciones y modificaciones para actividades A/B o XT.

Panel de modificaciones

El panel Modificaciones captura las acciones creadas para una vista en particular. Todas las acciones de una vista se agrupan debajo de esa vista.

Acciones

Al hacer clic en una acción se resalta el elemento del sitio donde se aplicará esta acción. Cada acción del VEC creada en una vista tiene los iconos siguientes: Información, Editar, Clonar, Mover y Eliminar. Estos iconos se explican con más detalle en la tabla siguiente.

SPA Uso del VEC para ver ejemplos de la

En esta sección se describen tres ejemplos de cómo usar el Compositor de experiencias visuales para crear acciones y modificaciones para actividades A/B o XT.

Ejemplo 1: Actualizar la vista "principal"

Anteriormente en este documento, se definía una vista denominada "inicio" para todo el sitio principal. Ahora, el equipo de marketing desea actualizar la vista "principal" de las siguientes maneras:

Para realizar estas actualizaciones en el VEC, seleccione Componer y aplique esos cambios a la vista "Inicio".

Ejemplo 2: Cambiar etiquetas de producto

Para la vista "products-page-2", al equipo de mercadotecnia le gustaría cambiar la etiqueta de Price a Sale Price y cambiar el color de la etiqueta a rojo.

Para realizar estas actualizaciones en el VEC, se requieren los siguientes pasos:

Ejemplo 3: Personalizar el estilo de preferencias de entrega

Las vistas se pueden definir a nivel granular, como un estado o una opción de un botón de opción. Anteriormente, en este documento, las vistas se definían para las preferencias de entrega, "cierre de compra normal" y "cierre de compra exprés". El equipo de marketing desea cambiar el color del botón a rojo para la vista "checkout-express".

Para realizar estas actualizaciones en el VEC, se requieren los siguientes pasos: