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.
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.
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”.
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:
    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} >
    
    
    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);
      }
    }
    
    
    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
Clone the action to one or more Views that exist on the Modifications panel or to one or more Views that you have browsed and navigated to in the VEC. The action doesn’t have to necessarily exist in the Modifications panel.
Nota : Después de realizar una operación de clonación, 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, verá un error.
Mover
Mueve la acción a un Evento de carga de página o a cualquier otra Vista que ya exista en el panel de modificaciones.
Evento de carga de página: las acciones correspondientes al evento de carga de página se aplican en la carga inicial de la página web.
Nota Después de realizar una operación de traslado, debe navegar a la vista en el VEC a través de Examinar para comprobar si el movimiento era una operación válida. Si la acción no se puede aplicar a la vista, verá 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 por completo. 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.

Page Delivery settings for the SPA VEC

La configuración de Entrega de página permite configurar reglas para determinar cuándo una actividad de Target debe calificarse y ejecutarse para una audiencia.
To access the Page Delivery options from within the VEC's three-part guided activity-creation workflow, from the Experiences step, click Configure (the gear icon) > Page Delivery .
For example, as defined by the Page Delivery settings shown above, a Target activity qualifies and executes when a visitor lands directly on https://www.adobe.com or when a visitor lands on any URL that contains 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 el usuario navega.
However, because SPAs work differently, the Page Delivery settings must be configured in a way that allows all actions to be applied to the Views as defined in the SPA VEC activity.

Ejemplo de uso de ejemplo

Analice este ejemplo de uso de ejemplo:
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 la solicitud de Flujo de Target - Carga de página en at. js 2. x :
Viaje del usuario n. º 1
Resultado : El usuario ve el color de fondo verde en la vista de inicio. When the user then navigates to https://target.enablementadobe.com/react/demo/#/products , the blue background color of the button is seen because the action is cached in the browser under the Products view.
Note: The user navigating to https://target.enablementadobe.com/react/demo/#/products did not trigger a page load.
Viaje del usuario n. º 2
Resultado : Aunque haya definido triggerView() la vista Productos y haya realizado una acción en la Vista de productos a través del VEC de SPA, no verá la acción esperada, ya que no creó ninguna regla que incluya https://target.enablementadobe.com/react/demo/#/products en la configuración de Entrega de página.

Práctica recomendada

Puede ver que la administración del viaje 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 todas las diferentes trayectorias y rutas que un usuario podría tomar 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ágina como tal:
Esto garantiza que cuando un visitante aterrice en la SPA y navega a la página principal o a la vista de página verá las acciones aplicadas.
Now, whenever you add an action to a View in the SPA VEC, we will show you the following pop-up message to remind you to think about the Page Delivery rules.
Este mensaje aparece cuando agrega la primera acción a una Vista para cada nueva actividad que cree. This message helps ensure that everyone in your organization learns how to apply these Page Delivery rules correctly.

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