Añadir Adobe Target

En esta lección, implementaremos la extensión de Adobe Target con una solicitud de carga de página y parámetros personalizados.

Adobe Target es la solución de Adobe Experience Cloud que le proporciona todo lo necesario para adaptar y personalizar la experiencia de sus clientes con el fin de maximizar los ingresos de sus sitios web, aplicaciones, medios sociales y otros canales digitales, tanto para PC como para móviles.

NOTE
Adobe Experience Platform Launch se está integrando en Adobe Experience Platform como un conjunto de tecnologías de recopilación de datos. Se han implementado varios cambios terminológicos en la interfaz que debe tener en cuenta al utilizar este contenido:
  • El platform launch (lado del cliente) ahora es tags
  • El lado del servidor de platform launch ahora es event forwarding
  • Las configuraciones de Edge ahora son datastreams

Objetivos de aprendizaje

Al final de esta lección, debe poder:

  • Añada el fragmento preocultado utilizado para administrar el parpadeo al utilizar Target con los códigos incrustados de etiqueta asíncronos
  • Añadir la extensión de Target v2.
  • Activar la solicitud de carga de página (anteriormente denominada “mbox global”).
  • Añadir parámetros a la solicitud de carga de página.
  • Explicar cómo se pueden añadir parámetros de perfil y de entidad a la solicitud de carga de página.
  • Activar la solicitud de confirmación de pedido con los parámetros necesarios.
  • Explicar cómo añadir configuraciones avanzadas como código de Library Header (encabezado de biblioteca) y Library Footer (pie de página de biblioteca).
  • Validar una implementación de Target.

Requisitos previos

Para completar las lecciones de esta sección, primero debe completar las lecciones de Configurar etiquetas y Agregar el servicio de identidad.

Añadir el fragmento preocultado de Target

Antes de comenzar, debemos realizar una leve actualización de los códigos incrustados de etiqueta. Cuando los códigos incrustados de etiqueta se cargan de forma asíncrona, la página puede finalizar el renderizado antes de que la biblioteca de Target se cargue completamente y haya realizado su intercambio de contenido. Esto puede conllevar lo que se conoce como “parpadeo”, por el cual el contenido predeterminado aparece brevemente antes de ser reemplazado por el contenido personalizado especificado por Target. Si desea evitar este parpadeo, se recomienda codificar un fragmento preocultado especial inmediatamente antes de los códigos incrustados asincrónicos de las etiquetas.

Dicha práctica ya se ha llevado a cabo en el sitio de Luma, pero sigamos adelante para hacerlo en la página de muestra y que, así, entienda la implementación. Copie las siguientes líneas de código:

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

Abra la página de muestra y péguela justo antes del código incrustado de etiqueta como se muestra a continuación (no se preocupe si los números de línea son diferentes). En esta captura de pantalla se ha minificado el fragmento de ocultamiento previo:

Pase el ratón sobre la extensión

Vuelva a cargar la página de muestra. Notará que la página estará oculta durante tres segundos antes de que se muestre. Este comportamiento es temporal y desaparecerá después de haber implementado Target. Este comportamiento de preocultación se controla mediante dos configuraciones al final del fragmento, que se pueden personalizar, pero generalmente funcionan mejor al mantener la configuración predeterminada:

  • body {opacity: 0 !important} especifica la definición de CSS que se utiliza para la preocultación hasta que se carga Target. De forma predeterminada, todo el cuerpo quedará oculto. Si tiene una estructura DOM coherente con un elemento contenedor fácil de identificar que incluya todo el contenido debajo de su navegación, por ejemplo, y no quiere tener que probar ni personalizar su navegación, puede utilizar este ajuste para limitar la preocultación a ese elemento contenedor.
  • 3000 que especifica la configuración de tiempo de espera para la preocultación. De forma predeterminada, si Target no se ha cargado en tres segundos, se muestra la página. Esto suele ser improbable.

Para obtener más información y para obtener el fragmento de preocultación no reducido, consulte la extensión de Adobe Target con una implementación asíncrona.

Añadir la extensión de Target

La extensión de Adobe Target es compatible con implementaciones del lado del cliente mediante el SDK de JavaScript de Target para la web moderna, at.js. Los clientes que aún utilicen la biblioteca antigua de Target, mbox.js , deben actualizarla a at.js 2.x para poder usar etiquetas.

La extensión Target v2 consta de dos partes principales:

  1. La configuración de la extensión, que administra la configuración de la biblioteca central

  2. Acciones de reglas para hacer lo siguiente:

    1. Load Target (at.js 2.x)
    2. Añadir parámetros a las solicitudes de carga de página
    3. Añadir parámetros a todas las solicitudes
    4. Fire Page Load Request

En este primer ejercicio, añadiremos la extensión y veremos las configuraciones. En ejercicios posteriores usaremos las acciones.

Para añadir la extensión

  1. Ir a Extensiones > Catálogo

  2. Escriba target en el filtro para localizar rápidamente las extensiones de Adobe Target. Hay dos extensiones: Adobe Target y Adobe Target v2. Este tutorial utilizará la versión 2 de la extensión que utiliza la última versión de at.js (actualmente 2.x), ideal tanto para sitios web tradicionales como para aplicaciones de una sola página (SPA).

  3. Haga clic en Instalar

    Instalación de la extensión de Target v2

  4. Cuando agregue la extensión, importará muchas, pero no todas las configuraciones de at.js, de la interfaz de Target, como se muestra a continuación. La configuración del Timeout (tiempo de espera) no se importa, siempre se mantiene en 3000 ms después de añadir la extensión. Para el tutorial, mantenga la configuración predeterminada. Tenga en cuenta que en el lado izquierdo se mostrará la versión de at.js que se incluye con la versión actual de la extensión.

  5. Haga clic en Guardar en biblioteca

    Guardar la extensión

En este punto, Target aún no está haciendo nada, por lo que no hay nada que validar.

NOTE
Cada versión de la extensión de Target viene con una versión específica de at.js que se muestra en la descripción de la extensión. Actualice la versión de at.js al actualizar la extensión de Target.

Load Target y Activar la solicitud de carga de página

Los expertos en marketing utilizan Target para controlar la experiencia del visitante en la página al realizar pruebas y segmentar contenido. Debido a esta importante función en la presentación de la página, debe cargar Target lo antes posible para minimizar el impacto sobre la visibilidad de la página. En esta sección, se cargará la biblioteca JavaScript de Target, at.js, y se activará la solicitud de carga de página (denominada “mbox global” en versiones anteriores de at.js).

Puede utilizar la regla All Pages - Library Loaded que ha creado en la lección “Añadir elementos de datos, reglas y bibliotecas” para implementar Target porque ya se ha activado lo antes posible en las cargas de página.

Para cargar Target

  1. Vaya a Reglas en el panel de navegación izquierdo y luego haga clic en All Pages - Library Loaded para abrir el editor de reglas

    Abrir todas las páginas: Regla de carga de biblioteca

  2. En Acciones (Actions), haga clic en el icono + para añadir una acción nueva.

    Haga clic en el icono + para añadir una acción nueva

  3. Seleccione Extensión > Adobe Target v2

  4. Seleccione Tipo de acción > Cargar destino

  5. Haga clic en Conservar cambios

    Haga clic en Conservar cambios

Con la acción Load Target añadida, at.js se cargará en la página. Sin embargo, ninguna solicitud de Target se activará hasta que se agregue la acción Fire Page Load Request.

Para activar la solicitud de carga de página

  1. En Acciones, vuelva a hacer clic en el icono + para añadir otra acción

    Haga clic en el icono + para añadir otra acción

  2. Seleccione Extensión > Adobe Target v2

  3. Seleccione Tipo de acción > Fire Page Load Request

  4. Hay varias configuraciones disponibles para la solicitud de carga de página relacionadas con ocultar o mostrar la página y el selector de CSS que se usan en la preocultación. Estos ajustes funcionan junto con el fragmento de preocultación codificado en la página. Conserve la configuración predeterminada.

  5. Haga clic en Conservar cambios

    Acción Fire Page Load Request

  6. La nueva acción se agrega en secuencia después de la acción Load Target y las acciones se ejecutarán en este orden. Puede arrastrar y soltar las acciones para reorganizar el orden, pero en esta situación Load Target debe ir antes de Fire Page Load Request.

  7. Haga clic en Guardar en biblioteca y compilar

    Guárdelo y compílelo

Validar la solicitud de carga de página

Ahora que ha agregado la extensión Target v2 y ha activado las acciones Load Target y Fire Page Load Request, debe haber una solicitud de carga de página en todas las páginas donde se utilice la propiedad de etiqueta.

Para validar las acciones Load Target y Fire Page Load Request

  1. Vuelva a cargar la página de muestra. Ya no debería ver un retraso de tres segundos antes de que la página sea visible. Si está cargando la página de muestra mediante el protocolo file://, debe realizar este paso en un navegador Firefox o Safari, ya que Chrome no activa una solicitud de Target al utilizar el protocolo file://.

  2. Abra el sitio de Luma

  3. Asegúrese de que Debugger asigne la propiedad de etiqueta a su entorno de desarrollo, tal como se describe en la lección anterior

    Se muestra el entorno de desarrollo de etiquetas en Debugger

  4. Vaya a la pestaña Resumen de Debugger

  5. En la sección Launch, confirme que Target aparece en el encabezado Extensions.

  6. En la sección Target, confirme que aparece la versión de la biblioteca at.js.

    Confirme que Target aparece en la pestaña Resumen de Debugger .

  7. Finalmente, vaya a la pestaña Target, expanda el código de cliente y confirme que aparece la solicitud de carga de página:

    Confirme que se ha realizado la solicitud de carga de página .

¡Felicidades! ¡Ha implementado Target!

Añadir parámetros

Al pasar parámetros en la solicitud de Target, se añaden potentes funciones a las actividades de segmentación, prueba y personalización. La extensión de etiqueta de proporciona dos acciones para pasar parámetros:

  1. Add Params to Page Load Request, que agrega parámetros a las solicitudes de carga de página (equivalente al método targetPageParams()).

  2. Add Params to All Requests, que agrega parámetros en todas las solicitudes de Target, por ejemplo: la solicitud de carga de página más las solicitudes adicionales realizadas a partir de acciones de código personalizado o codificadas en el sitio (equivalente al método targetPageParamsAll()).

Estas acciones se pueden utilizar antes de la acción Load Target y pueden configurar distintos parámetros en páginas diferentes según las configuraciones de reglas. Utilice la función de orden de reglas que utilizó al configurar los ID de cliente con el servicio de identidad para establecer parámetros adicionales en el evento Library Loaded antes de que la regla active la solicitud de carga de página.

TIP
Dado que la mayoría de las implementaciones utiliza la solicitud de carga de página para la entrega de actividades, normalmente es suficiente para usar la acción Add Params to Page Load Requests.

Parámetros de solicitud (mbox)

Los parámetros se utilizan para pasar datos personalizados a Target, lo que enriquece las capacidades de personalización. Son ideales para atributos que cambian con frecuencia durante una sesión de navegación, como el nombre de la página, la plantilla, etc. y no persisten.

Añadamos el elemento de datos Page Name que hemos creado anteriormente en la lección Añadir elementos de datos, reglas y bibliotecas como parámetro de solicitud.

Para añadir el parámetro de solicitud

  1. Vaya a Reglas en el panel de navegación izquierdo y luego haga clic en All Pages - Library Loaded para abrir el editor de reglas.

    Abrir todas las páginas: Regla de carga de biblioteca

  2. En Acciones (Actions), haga clic en el icono + para añadir una acción nueva.

    Haga clic en el icono + para añadir una acción nueva

  3. Seleccione Extensión > Adobe Target v2

  4. Seleccione Tipo de acción > Agregar parámetros a la solicitud de carga de página

  5. Escriba pageName como Nombre

  6. Haga clic en el icono de elemento de datos para abrir el modal del elemento de datos.

  7. Haga clic en el elemento de datos Page Name.

  8. Haga clic en el botón Seleccionar

    Haga clic en el botón “Seleccionar”

  9. Haga clic en Conservar cambios

    Haga clic en Conservar cambios

  10. Haga clic y arrastre en el borde izquierdo de la acción Add Params to Page Load Request para reorganizar las acciones que tiene antes de la acción Fire Page Load Request (puede ser antes o después de Load Target).

  11. Haga clic en Guardar en biblioteca y compilar

    Haga clic en Guardar en biblioteca y crear

Validar parámetros de solicitud

Por el momento, los parámetros personalizados que se pasan con solicitudes at.js 2.x no son fácilmente visibles en Debugger, por lo que utilizaremos las herramientas para desarrolladores del navegador.

Para validar el parámetro de solicitud nombre de página (pageName)

  1. Vuelva a cargar el sitio de Luma, asegurándose de que esté asignado a su propia propiedad de etiquetas
  2. Abra las herramientas para desarrolladores del navegador
  3. Haga clic en la pestaña Network
  4. Filtre las solicitudes a tt.omtrdc (o su dominio CNAME para solicitudes de Target)
  5. Expanda la sección Headers > Request Payload > execute.pageLoad.parameters para validar el parámetro pageName y su valor

Parámetro nombre de página (pageName) en Debugger

Parámetros de perfil

De forma similar a los parámetros de solicitud, los parámetros de perfil se transmiten a través de la solicitud de Target. Sin embargo, los parámetros de perfil se almacenan en la base de datos de perfiles de visitante de Target y se conservan durante la duración del perfil del visitante. Puede configurarlos en una página del sitio y usarlos en las actividades de Target en otra página. Este es un ejemplo de un sitio web de automóviles. Cuando un visitante llega a una página de vehículos, puede pasar un perfil de parámetro “profile.lastViewed=sportscar” para registrar su interés en un automóvil en particular. Cuando el visitante navega a otras páginas que no sean de vehículos, puede segmentar el contenido según el último vehículo visitado. Los parámetros de perfil son ideales para atributos que cambian con poca frecuencia o que solo están disponibles en determinadas páginas

En este tutorial no se transmite ningún parámetro de perfil, pero el flujo de trabajo es casi idéntico al que realizó al transmitir el parámetro pageName. La diferencia es que debe dar a los parámetros de perfil un prefijo profile.. Este es el aspecto que tendría un parámetro de perfil denominado “userType” en la acción Add Params to Page Load Request:

Configuración de un parámetro de perfil

Parámetros de entidad

Los parámetros de entidad son parámetros especiales que se utilizan en las implementaciones de Recommendations por tres motivos principales:

  1. Como clave para activar recomendaciones de productos. Por ejemplo, al utilizar un algoritmo de recomendaciones como “Otras personas que vieron el producto X también vieron Y”, “X” es la “clave” de la recomendación. Normalmente es el SKU del producto (entity.id) o la categoría (entity.categoryId) que el visitante está viendo actualmente.
  2. Para recopilar el comportamiento de los visitantes con el fin de potenciar los algoritmos de recomendaciones, como “Productos vistos recientemente” o “Productos más vistos”.
  3. Para rellenar el catálogo de Recommendations. Recommendations contiene una base de datos de todos los productos o artículos del sitio web, de modo que se puedan proporcionar en la oferta recomendada. Por ejemplo, al recomendar productos, normalmente desea mostrar atributos como el nombre del producto (entity.name) o una imagen (entity.thumbnailUrl). Algunos clientes rellenan su catálogo utilizando fuentes de backend, pero también se pueden rellenar usando parámetros de entidad en solicitudes de Target.

No es necesario pasar ningún parámetro de entidad en este tutorial, pero el flujo de trabajo es idéntico al que realizó anteriormente al pasar el parámetro de solicitud pageName; simplemente asigne un nombre al parámetro con el prefijo "entity". y asignarlo al elemento de datos pertinente. Tenga en cuenta que algunas entidades comunes tienen nombres reservados que deben utilizarse (por ejemplo, “entity.id” para el código de artículo del producto o SKU). Este es el aspecto que tendría al establecer los parámetros de entidad en la acción Add Params to Page Load Request:

Añadir parámetros de entidad

Añadir parámetros de ID de cliente

La recopilación de ID de cliente con el servicio de identidad de Adobe Experience Platform Cloud facilita la importación de datos CRM en Target mediante la función Atributos del cliente de Adobe Experience Cloud. También activa la vinculación de visitantes entre dispositivos, lo que permite mantener una experiencia de usuario uniforme a medida que sus clientes cambian entre portátiles y dispositivos móviles.

Es imperativo configurar el ID de cliente en la acción Set Customer IDs del servicio de identidad antes de activar la solicitud de carga de página. Para ello, asegúrese de disponer de las siguientes capacidades en su sitio:

  • El ID de cliente debe estar disponible en la página antes del código incrustado de etiquetas
  • Se debe instalar la extensión del servicio de identidad de Adobe Experience Platform.
  • Debe utilizar la acción Set Customer IDs en una regla que se active con el evento “Biblioteca cargada (Principio de la página)”.
  • Utilice la acción Fire Page Load Request en una regla que se active después de la acción “Set Customer ID” (establecer ID de cliente).

En la lección anterior, Añadir el servicio de identidad de Adobe Experience Platform, ha creado la regla All Pages - Library Loaded - Authenticated - 10 para activar la acción “Set Customer ID” (establecer ID de cliente). Debido a que esta regla tiene una configuración Order de 10, los ID de cliente se establecen antes de que nuestra solicitud de carga de página se active desde la regla All Pages - Library Loaded con su configuración Order de 50. Por lo tanto, ¡ya ha implementado la recopilación de ID de cliente para Target!

Validación del ID de cliente

Por el momento, los parámetros personalizados que se pasan con solicitudes at.js 2.x no son fácilmente visibles en Debugger, por lo que utilizaremos las herramientas para desarrolladores del navegador.

Para validar el ID de cliente

  1. Abra el sitio de Luma

  2. Asegúrese de que Debugger asigne la propiedad de etiqueta a su entorno de desarrollo, tal como se describe en la lección anterior

    Se muestra el entorno de desarrollo de etiquetas en Debugger

  3. Inicie sesión en el sitio de Luma con las credenciales test@adobe.com/test

  4. Vuelva a la página principal de Luma

  5. Abra las herramientas para desarrolladores del navegador

  6. Haga clic en la pestaña Network

  7. Filtre las solicitudes a tt.omtrdc (o su dominio CNAME para solicitudes de Target)

  8. Expanda la sección Headers > Request Payload > id.customerIds.0 para validar la configuración del ID de cliente y su valor:

Configuración de ID de cliente en Debugger

WARNING
El servicio de identidad de Adobe Experience Platform le permitirá enviar varios ID al servicio. Sin embargo, solo el primero se enviará a Target.

Añadir el parámetro de token de propiedad

NOTE
Es un ejercicio opcional para los clientes de Target Premium.

El token de propiedad es un parámetro reservado que se utiliza con la función Permisos de usuario de Enterprise de Target Premium. Se utiliza para definir distintas propiedades digitales, de modo que a los miembros de una organización de Experience Cloud se les puedan asignar permisos diferentes para cada propiedad. Por ejemplo, es posible que desee que un grupo de usuarios pueda configurar actividades de Target en el sitio web, pero no en la aplicación móvil.

Las propiedades de Target son análogas a las propiedades de etiquetas y a los grupos de informes de Analytics. Una empresa con varias marcas, sitios web y equipos de marketing puede utilizar una propiedad de Target, una propiedad de etiquetas y un grupo de informes de Analytics diferentes para cada sitio web o aplicación móvil. Las propiedades de etiquetas se diferencian por sus códigos incrustados, los grupos de informes de Analytics se diferencian por su ID de grupo de informes y las propiedades de Target se diferencian por su parámetro de token de propiedad.

El token de propiedad debe implementarse mediante una acción de código personalizado en las etiquetas con la función targetPageParams(). Si va a implementar varios sitios con diferentes valores at_property diferentes con una sola propiedad de etiqueta, puede administrar el valor at_property a través de un elemento de datos.

Este es un ejercicio opcional si es usuario de Target Premium y desea implementar un token de propiedad en su propiedad Tutorial:

  1. En una pestaña independiente, abra la interfaz de usuario de Target.

  2. Vaya a Administración > Propiedades

  3. Identifique la propiedad que desee usar y haga clic en </> (o cree una nueva propiedad)

  4. Copie el fragmento de código dentro de <script></script> en el portapapeles

    Obtenga el token de propiedad de la interfaz de Adobe Target

  5. En la pestaña de etiquetas, ve a Reglas en el panel de navegación izquierdo y luego haz clic en All Pages - Library Loaded para abrir el editor de reglas.

    Abrir todas las páginas: Regla de carga de biblioteca

  6. En Acciones (Actions), haga clic en la acción Core - Custom Code para abrir Action Configuration

    Abrir la acción Añadir parámetros a la solicitud de carga de página

  7. Abra el editor de código y pegue el código de la interfaz de Target que contiene la función targetPageParams()

  8. Haga clic en el botón Guardar

    Abrir la acción Añadir parámetros a la solicitud de carga de página

  9. Marque la casilla Ejecutar globalmente para que targetPageParams() se declare en el ámbito global

  10. Haga clic en Conservar cambios

    Haga clic en Conservar cambios

  11. Haga clic en Guardar en biblioteca y compilar
    Haga clic en Guardar y crear en biblioteca

WARNING
Si intenta agregar el parámetro at_property mediante la acción Agregar parámetros a la solicitud de carga de página, el parámetro se rellenará en la solicitud de red, pero el Compositor de experiencias visuales (VEC) de Target no podrá detectarlo automáticamente al cargar la página. Rellene siempre at_property con la función targetPageParams() en una acción de Custom Code.

Validación del token de propiedad

Por el momento, los parámetros personalizados que se pasan con solicitudes at.js 2.x no son fácilmente visibles en Debugger, por lo que utilizaremos las herramientas para desarrolladores del navegador.

Para validar el parámetro del token de propiedad

  1. Abra el sitio de Luma

  2. Asegúrese de que Debugger asigne la propiedad de etiqueta a su entorno de desarrollo, tal como se describe en la lección anterior

    Se muestra el entorno de desarrollo de etiquetas en Debugger

  3. Abra las herramientas para desarrolladores del navegador

  4. Haga clic en la pestaña Network

  5. Filtre las solicitudes a tt.omtrdc (o su dominio CNAME para solicitudes de Target)

  6. Expanda la sección Headers > Request Payload > property.token para validar el valor
    El token de propiedad debe ser visible como parámetro “at_property” en cada solicitud

Añadir solicitudes personalizadas

Añadir una solicitud de confirmación de pedido

La solicitud de confirmación de pedido es un tipo especial de solicitud que se utiliza para enviar los detalles del pedido a Target. La inclusión de tres parámetros de solicitud específicos (orderId, orderTotal y productPurchasedId) es lo que convierte una solicitud de Target normal en una solicitud de pedido. Además de informar sobre los ingresos, la solicitud de pedidos también hace lo siguiente:

  1. Anula la duplicación de envíos de pedidos accidentales
  2. Filtra pedidos extremos (cualquier pedido cuyo total tenga más de tres desviaciones estándar de la media)
  3. Utiliza un algoritmo diferente entre bastidores para calcular la confianza estadística
  4. Crea un informe de auditoría especial descargable de detalles de pedidos individuales

Se recomienda utilizar una solicitud de confirmación de pedido en todos los canales de pedidos, incluso en sitios que no sean de minoristas. Por ejemplo, los sitios de generación de posibles clientes suelen tener canales de posibles clientes con un “ID de posible cliente” único generado al final. Estos sitios deben implementar una solicitud de pedido con un valor estático (como “1”) para orderTotal.

Es posible que los clientes que utilizan la integración de Analytics para Target (A4T) en la mayoría de sus informes también deseen implementar la solicitud de pedido si utilizan actividades de Automated Personalization que no admiten A4T. Además, la solicitud de pedido es un elemento fundamental de las implementaciones de Recommendations, lo que permite utilizar algoritmos basados en el comportamiento de compra. Para obtener la información más reciente sobre la compatibilidad con A4T, consulte la documentación.

La solicitud de confirmación de pedido se debe activar a partir de una regla que solo se active en su página o evento de confirmación de pedido. A menudo, se puede combinar con una regla que establezca el evento de compra de Adobe Analytics. Debe configurarse mediante la acción Código personalizado de la extensión principal, utilizando los elementos de datos adecuados para configurar los parámetros de orderId, orderTotal y productPurchasedId.

Añadamos los elementos de datos y la regla que necesitamos para activar una solicitud de confirmación de pedido en el sitio de Luma. Dado que ya ha creado varios elementos de datos, estas instrucciones aparecen abreviadas.

Para crear un elemento de datos para el ID de pedido

  1. Haga clic en Elementos de datos en el panel de navegación izquierdo
  2. Haga clic en Agregar elemento de datos
  3. Asigne un nombre al elemento de datos Order Id.
  4. Seleccione Tipo de elemento de datos > Variable JavaScript
  5. Utilice digitalData.cart.orderId como JavaScript variable name.
  6. Marque la opción Clean text
  7. Haga clic en Guardar en biblioteca
    (No crearemos la biblioteca hasta que hayamos realizado todos los cambios para la solicitud de confirmación de pedido)

Para crear el elemento de datos para la cantidad del carro de compras

  1. Haga clic en Agregar elemento de datos
  2. Asigne un nombre al elemento de datos Cart Amount.
  3. Seleccione Tipo de elemento de datos > Variable JavaScript
  4. Utilice digitalData.cart.cartAmount como JavaScript variable name.
  5. Marque la opción Clean text
  6. Haga clic en Guardar en biblioteca

Para crear un elemento de datos para el código de artículo del carro de compras (Target)

  1. Haga clic en Agregar elemento de datos

  2. Asigne un nombre al elemento de datos Cart SKUs (Target).

  3. Seleccione Tipo de elemento de datos > Código personalizado

  4. Para Target, los códigos de artículo deben aparecer en una lista separada por comas. Este código personalizado redistribuye la capa de datos con el formato adecuado. En el editor de código personalizado, pegue lo siguiente:

    code language-javascript
    var targetProdSkus="";
    for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
      if(i>0) {
        targetProdSkus = targetProdSkus + ",";
      }
      targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
    }
    return targetProdSkus;
    
  5. Marque la opción Force lowercase value.

  6. Marque la opción Clean text

  7. Haga clic en Guardar en biblioteca

Ahora necesitamos crear una regla para activar la solicitud de confirmación de pedido con estos elementos de datos como parámetros en la página de confirmación de pedido.

Para crear la regla para la página de confirmación de pedido

  1. Haga clic en Reglas en el panel de navegación izquierdo

  2. Haga clic en Agregar regla

  3. Asigne un nombre a la regla Order Confirmation Page - Library Loaded - 60.

  4. Haga clic en Eventos > Agregar

    1. Seleccione Tipo de evento > Biblioteca cargada (Principio de página)
    2. En Opciones avanzadas, cambie Order a 60 para que se active después de la acción Load Target (que se encuentra en nuestra regla All Pages - Library Loaded donde Order está establecido en 50)
    3. Haga clic en Conservar cambios
  5. Haga clic en Condiciones > Agregar

    1. Seleccione Tipo de condición > Ruta sin cadena de consulta

    2. Para Path equals, use thank-you.html

    3. Alterne la opción Regex para cambiar la lógica de equals a contains (puede utilizar la función Test para confirmar que la prueba pasará con la dirección URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html)

      Introduzca valores ficticios para el nombre y los apellidos

    4. Haga clic en Conservar cambios

  6. Haga clic en Acciones > Agregar

    1. Seleccione Tipo de acción > Código personalizado

    2. Haga clic en Abrir editor

    3. Pegue el siguiente código en el modal Edit Code

      code language-javascript
      adobe.target.getOffer({
        "mbox": "orderConfirmPage",
        "params":{
           "orderId": _satellite.getVar('Order Id'),
           "orderTotal": _satellite.getVar('Cart Amount'),
          "productPurchasedId": _satellite.getVar('Cart SKUs (Target)')
        },
        "success": function(offer) {
          adobe.target.applyOffer({
            "mbox": "orderConfirmPage",
            "offer": offer
          });
        },
        "error": function(status, error) {
          console.log('Error', status, error);
        }
      });
      
    4. Haga clic en Guardar para guardar el código personalizado

    5. Haga clic en Conservar cambios para conservar la acción

  7. Haga clic en Guardar en biblioteca y compilar

Validación de la solicitud de confirmación de pedido

Por el momento, los parámetros personalizados que se pasan con solicitudes at.js 2.x no son fácilmente visibles en Debugger, por lo que utilizaremos las herramientas para desarrolladores del navegador.

  1. Abra el sitio de Luma

  2. Asegúrese de que Debugger asigne la propiedad de etiqueta a su entorno de desarrollo, tal como se describe en la lección anterior

    Se muestra el entorno de desarrollo de etiquetas en Debugger

  3. Examine el sitio y añada varios productos al carro de compras

  4. Continúe con el cierre de compra

  5. Durante el proceso de cierre de compra, los únicos campos obligatorios son First Name y Last Name

    Introduzca valores ficticios para el nombre y los apellidos

  6. En la página Revisar pedido, asegúrese de hacer clic en el botón Place Order

  7. Abra las herramientas para desarrolladores del navegador

  8. Haga clic en la pestaña Network

  9. Filtre las solicitudes a tt.omtrdc (o su dominio CNAME para solicitudes de Target)

  10. Haga clic en la segunda solicitud

  11. Expanda la sección Headers > Request Payload > execute.mboxes.0 para validar el nombre de la solicitud y los parámetros de pedido:

Configuración de solicitud de pedido de Debugger

Solicitudes personalizadas

Existen casos excepcionales en los que necesita realizar solicitudes de Target distintas de la carga de la página y de la solicitud de confirmación de pedido. Por ejemplo, a veces los datos importantes que desea utilizar para la personalización no están definidos en la página antes de los códigos de incrustación de etiquetas; puede que estén codificados en la parte inferior de la página o que se devuelvan desde una solicitud de API asincrónica. Estos datos se pueden enviar a Target mediante una solicitud adicional, aunque no es la mejor opción utilizar esta solicitud para enviar contenido, puesto que la página ya está visible. Estos datos se pueden utilizar para enriquecer el perfil del visitante para utilizarlo posteriormente (mediante parámetros de perfil) o para rellenar el catálogo de Recommendations.

En estas circunstancias, utilice la acción Código personalizado de la extensión principal para activar una solicitud mediante los métodos getOffer()/applyOffer() y trackEvent(). Esto es muy similar a lo que hizo en el ejercicio Solicitud de confirmación de pedido, pero utilizará un nombre de solicitud diferente y no usará los parámetros especiales de pedido. Asegúrese de usar la acción Cargar destino antes de realizar solicitudes de destino desde el código personalizado.

Encabezado de biblioteca y pie de página de biblioteca

La pantalla Edit at.js de la interfaz de usuario de Target tiene ubicaciones en las que puede pegar JavaScript personalizado que se ejecuta inmediatamente antes o después del archivo at.js. El Library Header (encabezado de la biblioteca) se utiliza a veces para anular la configuración de at.js a través de la función targetGlobalSettings() o transmitir datos de terceros a través de la función Data Providers. El Library Footer (pie de página de la biblioteca) se utiliza a veces para agregar oyentes de eventos personalizados de at.js.

Para replicar esta capacidad en etiquetas, utilice la acción Código personalizado de la extensión principal y secuencie la acción antes (Library Header) o después (Library Footer) de la acción Load Target. Esto se puede hacer en la misma regla que la acción Load Target (según se muestra a continuación) o en reglas independientes con eventos o configuraciones de pedidos que se activan de forma fiable antes o después de la regla que contiene Load Target:

Encabezado y pie de página de la biblioteca en la secuencia de Acciones (Actions)

Para obtener más información sobre los ejemplos de uso de los encabezados y pies de página personalizados, consulte los siguientes recursos:

Siguiente: "Añadir Adobe Analytics" >

recommendation-more-help
45774420-d03e-4a6b-94b5-cd639ae825b2