Añadir Adobe Target

Última actualización: 5 de junio de 2025
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Desarrollador

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:
  • Platform Launch (lado del cliente) ahora es tags
  • Platform Launch Server Side ahora está 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@test.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.