Show Menu
TEMAS×

Compositor de experiencias visuales para aplicaciones de una sola página (SPA)

En Adobe Target, el Compositor de experiencias visuales (VEC) ofrece a los especialistas en marketing una capacidad propia para crear actividades y personalizar experiencias que se pueden distribuir dinámicamente en aplicaciones de varias páginas tradicionales a través del mbox global de Adobe Target. Sin embargo, esto depende de la recuperación de ofertas en carga de página o llamadas al servidor subsiguientes, que introduce latencia, como se muestra en el diagrama siguiente. Este método no es adecuado con aplicaciones de una sola página (SPA) porque degrada la experiencia del usuario y el rendimiento de la aplicación.
Con la versión más reciente, presentamos el VEC para las SPA. El VEC para aplicaciones de una sola página (SPA) permite que los comerciantes creen pruebas y personalicen el contenido de las SPA de forma independiente sin tener que depender de un desarrollo continuo. El VEC se puede utilizar para crear pruebas A/B y actividades de segmentación de experiencias (XT) en marcos populares, como React y Angular.

Vistas de Adobe Target y Aplicaciones de una sola página

El VEC de Adobe Target para SPA aprovecha un nuevo concepto llamado Vistas: un grupo lógico de elementos visuales que, juntos, constituyen una experiencia de SPA. Una SPA puede, por lo tanto, 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 sobre las vistas, vamos a navegar por este hipotético sitio de comercio electrónico en línea, implementado en React, y a explorar algunas de las vistas de ejemplo. Haga clic en los vínculos siguientes para abrir el sitio en una nueva pestaña del explorador.
Vínculo: Sitio principal
Si vamos a la página de inicio, podemos ver inmediatamente una imagen promocional de Pascua, así como los productos más recientes que venden en el sitio. En este caso, una vista puede definirse como toda la página de inicio. Es práctico tenerlo en cuenta porque se ampliará en la sección Implementación de vistas de Adobe Target, que se describe a continuación.
Vínculo: Sitio del producto
Como el producto nos interesa, decidimos hacer clic en el vínculo Productos. De manera similar a la página de inicio, se puede definir todo el sitio del producto como una vista. Podemos asignar el nombre “productos” a esta vista al igual que el nombre de la ruta en https://target.enablementadobe.com/react/demo/#/products .
Al principio de esta sección, definimos Vistas como el sitio completo o incluso un grupo de elementos visuales en un determinado sitio. Como mencionamos antes, los cuatro productos mostrados en el sitio también pueden agruparse y considerarse como una vista. Si queremos, podemos ponerle el nombre “productos” a esta vista.
Decidimos hacer clic en el botón Cargar más para explorar más productos en el sitio. En este caso, la dirección URL del sitio web no cambia. Sin embargo, aquí, una vista puede representar solamente la segunda fila de productos que se muestra arriba. El nombre de la vista puede ser “PRODUCTS-PAGE-2”.
Vínculo: Cierre de compra
Como nos gustaron algunos productos mostrados en el sitio, decidimos comprar un par. Ahora, en el sitio de compra se proporcionan algunas opciones para elegir el envío normal o el exprés. Como una vista puede ser cualquier grupo de elementos visuales en un sitio, podemos nombrar esta como “Ver preferencias de envío”.
Además, el concepto de Vistas puede ampliarse mucho más. Si los especialistas en marketing desean personalizar el contenido del sitio según las preferencias de envío que seleccione, se puede crear una vista para cada preferencia de entrega. En este caso, cuando seleccionamos Envío normal, la Vista puede llamarse “Envío normal”. Si se selecciona Envío exprés, la opción Vista puede llamarse “Envío exprés”.
Es posible que los especialistas en marketing deseen ejecutar una prueba A/B para ver si el cambio del color de azul a rojo cuando se selecciona la opción Envío exprés puede mejorar las conversiones en lugar de mantener el botón de color azul en ambas opciones de envío.

Implementación de Vistas de Adobe Target

Ahora que hemos cubierto lo que son las vistas de Adobe Target, podemos aprovechar este concepto en Target para permitir a los especialistas en marketing ejecutar pruebas A/B y XT en SPA a través del VEC. Esto requiere una configuración de desarrollador única. Veamos los pasos para configurarlo.
  1. Instale at. js 2. x.
    En primer lugar, es necesario instalar at.js 2.x. Esta versión de at.js se desarrolló teniendo en cuenta las SPA. Las versiones anteriores de at.js y mbox.js no son compatibles con las vistas de Adobe Target y con el VEC para SPA.
    Descargue at.js 2 a través de la IU de Adobe Target ubicada en Configuración > Implementación. at.js 2.x también se puede implementar mediante Adobe Launch . Sin embargo, las extensiones de Adobe Target no están actualizadas actualmente y no son compatibles.
  2. Implemente la función más reciente de at.js 2.x en sus sitios: triggerView() .
    Después de definir las vistas de la SPA donde desea ejecutar una prueba A/B o XT, implemente la función de at.js 2.x triggerView() con las vistas transferidas como parámetro. Esto permite a los especialistas en marketing utilizar el VEC para diseñar y ejecutar las pruebas A/B y XT para esas vistas definidas. Si la función de triggerView() no está definida para estas vistas, el VEC no detectará las vistas y, por lo tanto, los especialistas en marketing no podrán utilizar el VEC para diseñar y ejecutar pruebas A/B y XT.
    adobe.target.triggerView(viewName, options)
    Parámetro
    Tipo
    ¿Requerido?
    Información general
    Descripción
    Nombre de vista
    Cadena
    1. No hay espacios al final.
    2. No puede estar vacío.
    3. El nombre de la vista debe ser único para todas las páginas.
    4. Advertencia : el nombre de la vista no debe comenzar ni finalizar con “ / ”. Esto se debe a que el cliente generalmente extraería el nombre de la vista de la ruta de la URL. Para nosotros, “home” y “ /home ” son diferentes.
    5. Advertencia : la misma vista no debe activarse varias veces con la opción {page: true} .
    Pase cualquier nombre como tipo de cadena que desee que represente la vista. Este nombre de Vista se muestra en el panel Modificaciones del VEC para que los especialistas en marketing creen acciones y ejecuten sus actividades A/B y XT.
    opciones
    Objeto
    No
    opciones > página
    Booleano
    No
    VERDADERO : el valor predeterminado de la página es verdadero. Cuando page=true , las notificaciones se enviarán a los servidores de Edge para incrementar el recuento de impresiones.
    FALSO : cuando page=false , las notificaciones no se enviarán para incrementar el recuento de impresiones. Debe utilizarse cuando desee volver a procesar un componente en una página con una oferta.
    Veamos algunos ejemplos de casos de uso sobre la invocación de la función triggerView() en React para el SPA de comercio electrónico hipotético:
    Vínculo: Sitio principal
    Como especialistas en marketing, si queremos ejecutar pruebas A/B en todo el sitio principal, es posible que queramos nombrar la vista “home” que puede extraerse de la dirección URL:
    function targetView() {
      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);
      }
    
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(viewName);
      }
    }
    
    // react router v4
    const history = syncHistoryWithStore(createBrowserHistory(), store);
    history.listen(targetView);
    
    // react router v3
    <Router history={hashHistory} onUpdate={targetView} >
    
    
    Vínculo: Sitio de productos
    Veamos un ejemplo que es un poco más complicado. Digamos que como especialistas en marketing queremos personalizar la segunda fila de los productos cambiando el color de la etiqueta Precio a rojo después de que un usuario haga clic en el botón Cargar más.
    function targetView(viewName) {
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(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});
        targetView('PRODUCTS-PAGE-' + page);
      }
    }
    
    
    Vínculo: Cierre de compra
    Si los especialistas en marketing desean personalizar el contenido del sitio según las preferencias de envío que seleccione, se puede crear una vista para cada preferencia de entrega. En este caso, cuando seleccionamos Envío normal, la Vista puede llamarse “Envío normal”. Si se selecciona Envío exprés, la opción Vista puede llamarse “Envío exprés”.
    Es posible que los especialistas en marketing deseen ejecutar una prueba A/B para ver si el cambio del color de azul a rojo cuando se selecciona la opción Envío exprés puede mejorar las conversiones en lugar de mantener el botón de color azul en ambas opciones de envío.
    function targetView(viewName) {
      // Validate if the Target Libraries are available on your website
      if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
        adobe.target.triggerView(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;
        targetView(selectedPreferenceValue);
      }
    }
    
    
  3. Inicie actividades A/B o XT a través del VEC.
    Cuando adobe.target.triggerView() se implementa en el SPA con los nombres de vista pasados como parámetros, el VEC podrá detectar estas vistas y permitir a los usuarios crear acciones y modificaciones para las actividades A/B o XT.
    El VEC para los SPA es realmente el mismo VEC que utiliza en las páginas web normales, pero algunas funcionalidades adicionales están disponibles al abrir una aplicación de página única implementada con triggerView() .
Existen dos mejoras principales en el panel Modificaciones y en las Acciones del VEC que permiten al VEC funcionar bien con SPA.
Panel de modificaciones
El panel Modificaciones, como se muestra a continuación, captura las acciones creadas para una vista en particular. Observe que todas las acciones de una vista se agrupan debajo de Ver.
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, como se muestra a continuación: Información, Editar, Clonar, Mover y Eliminar.
La siguiente tabla describe cada acción:
Página
Descripción
Información
Muestra los detalles de esta acción.
Editar
Permite editar las propiedades de esta acción directamente.
Clonar
Clona la acción a una o varias vistas del panel Modificaciones o a una o varias vistas a las que ha llegado a través del VEC. La acción no tiene que incluirse necesariamente en el panel Modificaciones.
Nota : Después de realizar una operación de clonado, debe navegar a la vista en el VEC a través de Examinar para ver si la acción clonada era una operación válida. Si la acción no se puede aplicar a la vista, aparecerá un error.
Mover
Mueve la acción a un Evento de carga de página o a cualquier otra Vista que ya se encuentre en el panel Modificaciones.
Evento de carga de página: cualquier acción que corresponda al evento de carga de página se aplica en la carga inicial de la página web.
Nota: Después de realizar una operación Mover, debe navegar a la vista en el VEC a través de Examinar para comprobar si el desplazamiento era una operación válida. Si la acción no se puede aplicar a la vista, aparecerá un error
Eliminar
Elimina la acción.
Puede realizar muchas acciones antes de que la página se cargue en el VEC, o incluso si la página no se puede cargar. Las acciones que no se pueden editar antes de que el sitio web cargue no aparecerán en la IU de.
Ejemplo 1
Veamos el ejemplo anterior, en el que hemos creado una vista de la página Inicio. Nuestro objetivo para esta vista es doble:
  1. Cambie el botón Agregar al carro y el botón “Me gusta” por un color azul más claro. Esto debería suceder en una “Carga de página”, ya que estamos cambiando componentes del encabezado.
  2. Cambie la etiqueta “Productos más recientes para 2019” por “Productos de prueba para 2019” con el color del texto cambiado a morado.
Para ejecutar estos objetivos, en el VEC, haga clic en Componer y aplique dichos cambios en la vista Inicio.
Ejemplo 2
Veamos el ejemplo anterior, donde hemos creado la vista “PRODUCTS-PAGE-2”. Nuestro objetivo es cambiar la etiqueta “Precio” por “Precio de venta” con el color de la etiqueta rojo.
  1. Haga clic en Examinar y, a continuación, en el vínculo Productos del encabezado.
  2. Haga clic en Cargar más una vez para llegar a la segunda fila de productos.
  3. Haga clic en Componer.
  4. Aplique acciones para cambiar la etiqueta de texto a “Precio de venta” y a color a rojo.
Ejemplo 3
Por último, como se mencionó anteriormente, las vistas pueden definirse a nivel granular. Las vistas pueden ser un estado o incluso una opción de un botón de radio. Anteriormente creamos vistas como CHECKOUT-EXPRESS y CHECKOUT-NORMAL. Nuestro objetivo es cambiar el color del botón a rojo para la vista CHECKOUT-EXPRESS.
  1. Haga clic en Examinar.
  2. Agregue un par de productos al carrito de la compra.
  3. En la esquina superior derecha, haga clic en el icono del carrito de la compra.
  4. Haga clic en Finalizar compra.
  5. Haga clic en el botón de opción Envío exprés.
  6. Haga clic en Componer.
  7. Cambie el botón “Pagar” y nómbrelo “Completar pedido” y cambie el color a rojo.
La vista CHECKOUT-EXPRESS no aparecerá en el panel de modificación hasta que haga clic en el botón de opción Envío Exprés. Esto se debe a que la función triggerView() se activa cuando se selecciona el botón de opción Envío exprés y esto solo sucede cuando el VEC sabe que hay una vista para mostrar en el panel de modificación.

Inmersión en at.js y las SPA

¿Cómo puedo recuperar vistas para los datos de audiencia más recientes mediante acciones después de la carga inicial de la página en mi SPA?
El flujo de trabajo típico de at.js 2.x es cuando se carga su sitio, cuando todas las vistas y acciones se almacenan en caché para que las acciones subsiguientes del usuario en el sitio no desencadenen llamadas al servidor para recuperar ofertas. Si desea recuperar vistas según los datos de perfil más actualizados que puedan haberse actualizado, según las acciones de usuario subsiguientes, puede llamar a getOffers() y applyOffers() con los datos de perfil o usuario de audiencia más recientes.
Por ejemplo, imaginemos que es una compañía de telecomunicaciones y tiene una SPA que utiliza at.js 2.x. Como empresa, desea lograr los siguientes objetivos:
  • Para un usuario anónimo o con sesión cerrada: mostrar la última promoción de la empresa, como una oferta de “Primer mes gratis” en http://www.telecom.com/home .
  • Para un usuario que ha iniciado sesión: mostrar una oferta promocional de actualización para usuarios cuyos contratos están surgiendo, como “Tiene derecho a un teléfono gratis” en http://www.telecom.com/loggedIn/home .
Ahora, los desarrolladores asignan nombres a las vistas y llaman a triggerView() de la siguiente manera:
  • Para http://www.telecom.com/home el nombre de vista es “Logged Out Home”
    • Se invoca a triggerView(“Logged Out Home”) .
  • Para http://www.telecom.com/loggedIn/home , el nombre de la vista es “Logged In Home”
    • Al cambiar la ruta, se invoca a triggerView(“Logged In Home”) .
A continuación, los especialistas en marketing ejecutan las siguientes actividades A/B a través del VEC:
  • Actividad A/B con la oferta “Primer mes gratis” para audiencias con el parámetro “ loggedIn= false ” que se mostrará en http://www.telecom.com/home , donde el nombre de la vista es Logged Out Home.
  • Actividad A/B con la oferta “Tiene derecho a un teléfono gratis” para audiencias con el parámetro “ loggedIn=true ” que se mostrará en http://www.telecom.com/loggedIn/home , donde el nombre de la vista es Oferta principal con sesión iniciada.
Ahora, veamos el flujo de este usuario:
  1. Un usuario que ha iniciado sesión anónima aterriza en su página.
  2. Como está utilizando at.js 2.x, pasa el parámetro “ loggedIn = false ” en la carga de página para recuperar todas las vistas presentes en actividades activas que cumplen con los requisitos cuando la audiencia tiene el parámetro “ loggedIn = false ”.
  3. A continuación, at.js 2.x recupera la vista Inicio de sesión cerrada y la acción para mostrar la oferta “Primer mes gratis” y la almacena en la caché.
  4. Cuando triggerView(“Logged Out Home”) se invoca, la oferta “Primer mes gratis” se recupera desde la caché y la oferta se muestra sin una llamada al servidor.
  5. El usuario hace clic en “Iniciar sesión” y proporciona sus credenciales.
  6. Como el sitio web es un SPA, no realiza una carga de página completa y enruta al usuario a http://www.telecom.com/loggedIn/home .
Ahora, aquí está el problema. El usuario inicia sesión y nos encontramos con triggerView(“Logged In Home”) porque hemos colocado este código en el cambio de ruta. Esto le indica a at.js 2.x que recupere la vista y las acciones de la caché, pero la única vista que existe en la caché es la página de inicio cerrada.
Entonces, ¿cómo podemos recuperar la Vista de inicio de sesión y mostrar la oferta “Usted es apto para un conseguir un teléfono gratuito”? Y, dado que todas las acciones subsiguientes del sitio serán desde una perspectiva de usuario registrado, ¿cómo puede asegurarse de que todas las acciones subsiguientes resulten en ofertas personalizadas para usuarios que iniciaron sesión?
Puede utilizar las nuevas funciones getOffers() y applyOffers() compatibles en at.js 2.x:
adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

Pase la respuesta getOffers() a applyOffers() y ahora todas las vistas y acciones asociadas con “loggedin = true” actualizarán la caché at.js.
En otras palabras, at.js 2.x es compatible con una manera de recuperar vistas, acciones y ofertas con los datos de audiencia más actuales bajo demanda.
¿at.js 2.x es compatible con A4T para aplicaciones de una sola página?
Sí, at.js 2.x es compatible con A4T para SPA a través de la función triggerView() , ya que ha implementado Adobe Analytics y el servicio de ID de visitante de Experience Cloud. Consulte el diagrama siguiente con descripciones paso a paso.
Paso
Descripción
1
triggerView() es llamado en la SPA para procesar una vista y aplicar acciones para modificar elementos visuales asociados a la vista.
2
El contenido dirigido para la vista se lee desde la caché.
3
El contenido dirigido se muestra lo más rápido posible y sin parpadeo del contenido predeterminado.
4
La solicitud de notificación se envía al Almacén de perfiles de Target para contar al visitante en la actividad e incrementar las métricas.
5
Los datos de Analytics se envían a los servidores de recopilación de datos.
6
Se comparan los datos de Target con los datos de Analytics mediante el SDID y se procesan en el almacén de informes de Analytics. Por lo tanto, los datos de Analytics se pueden visualizar tanto en Analytics como en Target mediante los informes de A4T.
Si no desea enviar notificaciones a Adobe Analytics para el recuento de impresiones cada vez que se activa una vista, pase la función {page: false} a triggerView() para que el recuento de impresiones no aumente cuando una vista se active varias veces para un componente que se vuelve a procesar constantemente. Por ejemplo:
adobe.target.triggerView(“PRODUCTS-PAGE-2”, {page:false})

Actividades compatibles

Tipo de actividad
Compatible?
en pruebas A/B y actividades de Segmentación de experiencias (XT)
No
No
No
No
Si instalamos at.js 2.x e implementamos triggerView() en nuestras páginas, ¿cómo ejecutamos actividades A/B de la segmentación automática si el VEC de SPA no la admite?
Si desea utilizar actividades A/B de Segmentación automática puede mover todas las acciones que se ejecutan al evento de Carga de página en el VEC. Pase el ratón sobre cada acción y haga clic en el botón Mover al evento de Carga de página. Hecho esto, puede seleccionar Segmentación automática para el método de asignación de tráfico.

Configuración de entrega de páginas para el VEC de SPA

La configuración de Entrega de páginas permite establecer reglas para determinar cuándo se debe calificar y ejecutar una actividad de Target para una audiencia determinada.
Para acceder a las opciones de Entrega de páginas desde el flujo de trabajo de creación guiada de actividades del VEC, desde el paso Experiencias , haga clic en Configurar (icono de engranaje) > Entrega de páginas .
Por ejemplo, según se define en la configuración Entrega de páginas que se muestra arriba, una actividad de Target se califica y se ejecuta cuando un visitante aterriza directamente en https://www.adobe.com o cuando un visitante aterriza en cualquier dirección URL que contenga https://www.adobe.com/products . Esto funciona perfectamente para cualquier aplicación de varias páginas en la que cada interacción con la página invoca una recarga de página, para la cual at.js recupera las actividades que cumplen con la URL a la que va el usuario.
Sin embargo, como los SPA funcionan de forma diferente, la configuración de Entrega de páginas debe estar plantearse de tal manera que todas las acciones deban aplicarse a las vistas tal como se define en la actividad del VEC de SPA.

Ejemplo de uso

Analice este ejemplo de uso:
Se han realizado los cambios siguientes:
With the example above in mind, what would happen when we configure Page Delivery settings to only include: https://target.enablementadobe.com/react/demo/#/ in an SPA with at.js 2. x ?
La siguiente ilustración muestra el flujo de Target: carga de página en at.js 2. x :
Recorrido del usuario número 1
Resultado : El usuario ve el color de fondo verde en la vista Inicio. Cuando el usuario navega a productshttps://target.enablementadobe.com/react/demo/#/products, el color de fondo azul del botón se ve porque la acción se almacena en la caché del explorador en la vista Productos.
Note: The user navigating to https://target.enablementadobe.com/react/demo/#/products did not trigger a page load.
Recorrido del usuario número 2
Resultado : Aunque haya definido triggerView() para la vista Productos y haya realizado una acción en la vista Productos a través del SPA de VEC, no verá la acción esperada, ya que no creó ninguna regla que incluya productshttps://target.enablementadobe.com/react/demo/#/products en la configuración de Entrega de páginas.

Práctica recomendada

Puede ver que la administración del recorrido del usuario puede resultar bastante difícil, ya que los usuarios pueden aterrizar en cualquier URL de su SPA y navegar a cualquier otra página. Por lo tanto, es mejor especificar una regla de publicación de página que incluya la dirección URL base para que incluya todo el SPA. De este modo, no tiene que pensar en todos los recorridos y trayectos que un usuario podría desarrollar para llegar a una página en la que desee mostrar una prueba A/B o una actividad de segmentación de experiencias (XT).
Por ejemplo, para resolver el problema anterior, podemos especificar la dirección URL base en la configuración de Entrega de páginas de esta forma:
Esto garantiza que cuando un visitante aterrice en la SPA y navegue a la página principal o a la vista de página verá las acciones aplicadas.
Ahora, cada vez que agregue una acción a una Vista en el VEC de SPA, le mostraremos el siguiente mensaje emergente para recordarle que tenga en cuenta las reglas de Entrega de páginas.
Este mensaje aparece cuando agrega la primera acción a una Vista para cada nueva actividad que cree. Este mensaje garantiza que todos los miembros de su organización aprendan a aplicar correctamente estas reglas de Entrega de páginas.

Vídeo de formación: Uso del VEC para SPA en Adobe Target