Añadir Adobe Analytics

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

Creado para:

  • Principiante
  • Intermedio
  • Desarrollador

En esta lección, debe implementar la extensión de Adobe Analytics y creará reglas para enviar datos a Adobe Analytics.

Adobe Analytics es una solución líder del sector que le permite comprender a sus clientes como personas y dirigir su negocio con inteligencia de clientes.

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
  • Ahora, las configuraciones de Edge son datastreams

Objetivos de aprendizaje

Al final de esta lección, debe poder:

  1. Añadir la extensión de Adobe Analytics
  2. Configurar variables globales mediante la extensión
  3. Añadir la señalización de vistas de página
  4. Añadir variables adicionales mediante reglas
  5. Añadir seguimiento de clics y otras señalizaciones basadas en eventos
  6. Añadir complementos de Analytics

Se pueden implementar muchas cosas para Analytics en etiquetas. Esta lección no está completa, pero le ofrece una visión general fiable de las principales técnicas que necesita para implementarlo todo en su sitio.

Requisitos previos

Ya debería haber completado las lecciones de Configurar etiquetas y Agregar el servicio de identidad.

Además, necesita al menos un ID de grupo de informes y un servidor de seguimiento. Si no dispone de un grupo de informes de prueba o desarrollo que pueda utilizar para este tutorial, cree uno. Si no está seguro de cómo hacerlo, consulte la documentación. Puede obtener un servidor de seguimiento desde su implementación actual, su asesor de Adobe o su representante del servicio de atención al cliente.

Añadir la extensión de Analytics

La extensión de Analytics consta de dos partes principales:

  1. La configuración de la extensión, que administra la configuración de biblioteca principal de AppMeasurement.js y puede configurar variables globales.

  2. Acciones de reglas para hacer lo siguiente:

    1. Configurar variables
    2. Borrar variables
    3. Enviar la señalización de Analytics

Para añadir la extensión de Analytics

  1. Ir a Extensiones > Catálogo

  2. Localice la extensión de Adobe Analytics

  3. Haga clic en Instalar

    Instalación de la extensión de Analytics

  4. En Administración de biblioteca > Grupos de informes, escriba los identificadores de los grupos de informes que desee usar en cada entorno de etiquetas. Si los usuarios tienen acceso a Adobe Analytics, tenga en cuenta que cuando empiece a escribir en el cuadro, verá una lista previamente rellenada de todos los grupos de informes. (Está bien utilizar un grupo de informes para todos los entornos en este tutorial, pero en la vida real le recomendamos utilizar grupos de informes independientes, como se muestra en la imagen siguiente)

    Especifique los ID de los grupos de informes

    TIP
    Se recomienda usar la opción Administrar la biblioteca por mí como la configuración de Administración de biblioteca, ya que facilita la tarea de mantener la biblioteca AppMeasurement.js actualizada.

  5. En General > Servidor de seguimiento, ingrese su servidor de seguimiento, por ejemplo tmd.sc.omtrdc.net. Introduzca el servidor de seguimiento SSL si su sitio es compatible con https://.

    Especifique los servidores de seguimiento .

  6. En la sección Variables globales, en Configuración adicional, establezca la variable Nombre de página con el elemento de datos Page Name. Haga clic en el icono de elemento de datos para abrir el modal y elegir el elemento de datos de la página Page Name.

  7. Haga clic en Guardar en biblioteca

    Configure la variable Nombre de página (Page Name) y guarde .

NOTE
Las variables globales se pueden configurar en la configuración de la extensión o en las acciones de reglas. Tenga en cuenta que al configurar variables en la configuración de la extensión, la capa de datos debe definirse antes de los códigos de incrustación de etiquetas.

Envío de la señalización de vista de página

Ahora creará una regla para activar la señalización de Analytics, que enviará la variable Nombre de página (Page Name) establecida en la configuración de la extensión.

Ya ha creado la regla "All Pages - Library Loaded" en la lección Añadir un elemento de datos, una regla y una biblioteca de este tutorial, que se activa en cada página cuando se carga la biblioteca de etiquetas. Usted también podría utilizar esta regla para Analytics, sin embargo esta configuración requiere que todos los atributos de capa de datos utilizados en la señalización de Analytics se definan antes que los códigos incrustados de etiqueta. Para permitir una mayor flexibilidad de recopilación de datos, cree una regla de “todas las páginas” nueva con DOM Ready preparado para activar la señalización de Analytics.

Para enviar la señalización de vista de página

  1. Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla

    Añadir regla

  2. Asigne un nombre a la regla All Pages - DOM Ready.

  3. Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

    Asignar un nombre a la regla y añadir un evento

  4. Seleccione Tipo de evento > DOM Ready (tenga en cuenta que el orden de la regla es "50").

  5. Haga clic en Conservar cambios
    Configuración del evento

  6. 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

  7. Seleccione Extensión > Adobe Analytics

  8. Seleccione Tipo de acción > Enviar señalización

  9. Deje Tracking configurado como s.t(). Si desea realizar una llamada a s.tl() en una regla de evento de clic, también puede hacerlo usando la acción “Enviar señalización”.

  10. Haga clic en el botón Conservar cambios

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

  11. Haga clic en Guardar en biblioteca y compilar

    Haga clic en Guardar en biblioteca y crear

Valide la señalización de vista de página.

Después de crear una regla para enviar una señalización de Analytics, debe poder ver la solicitud en Experience Cloud Debugger.

  1. Abra el sitio web de Luma en el explorador Chrome.

  2. Haga clic en el icono de Debugger Abrir el Experience Cloud Debugger para abrir Adobe Experience Cloud Debugger

  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. Haga clic para abrir la pestaña de Analytics.

  5. Amplíe el nombre del grupo de informes para mostrar todas las solicitudes realizadas.

  6. Confirme que la solicitud se ha activado con la variable y el valor del nombre de la página.

    Validación de la visita individual a la página

NOTE
Si el nombre de la página no se muestra, vuelva a los pasos de esta página para asegurarse de que no se ha perdido nada.

Añadir variables con reglas

Cuando configuró la extensión de Analytics, rellenó la variable pageName en la configuración de la extensión. Esta ubicación es perfecta para rellenar otras variables globales, como eVars y props, siempre y cuando el valor esté disponible en la página antes de que se cargue el código incrustado de etiqueta.

En las reglas que utilizan la acción Set Variables hay una ubicación más flexible para establecer variables (así como eventos). Las reglas permiten configurar diferentes variables y eventos de Analytics en condiciones diferentes. Por ejemplo, puede configurar prodView solo en las páginas de detalles del producto y el evento purchase solo en páginas de confirmación de pedido. Esta sección enseña cómo configurar variables mediante el uso de reglas.

Caso de uso

Las páginas de detalles del producto (PDP) son puntos importantes para la recopilación de datos en sitios de minoristas. Normalmente, le interesa que Analytics registre que se produjo una vista de producto y qué producto se visitó. Esto resulta útil para saber qué productos son más populares entre sus clientes. En un sitio multimedia, las páginas de artículos o vídeos pueden utilizar técnicas de seguimiento similares a las que usará en esta sección. Al cargar una página de detalles del producto, quizá quiera colocar dicho valor en un de tipo de página (“Page Type”) eVar, así como configurar ciertos eventos y el ID del producto. Esto nos permite ver lo siguiente en nuestro análisis:

  1. ¿Cuántas veces se cargan las páginas de detalles del producto?
  2. ¿Qué productos específicos se ven y cuántas veces?
  3. ¿Cómo afectan otros factores (campañas, búsquedas, etc.) a la cantidad de PDP que se cargan?

Creación de elementos de datos para el tipo de página

Primero, debe identificar qué páginas son las páginas de detalles del producto. Esto se hace con un elemento de datos.

Para crear un elemento de datos para el tipo de página

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

  2. Haga clic en Agregar elemento de datos

    Añadir un elemento de datos nuevo

  3. Asigne un nombre al elemento de datos Page Type.

  4. Seleccione Tipo de elemento de datos > Variable JavaScript

  5. Usar digitalData.page.category.type como nombre de variable de JavaScript

  6. Compruebe las opciones Limpiar texto y Forzar minúsculas

  7. Haga clic en Guardar en biblioteca

    Añadir un elemento de datos nuevo para el tipo de página

Creación de un elemento de datos para su ID de producto

A continuación, recopile el ID de producto de la PDP actual con un elemento de datos.

Para crear el elemento de datos para el ID de producto

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

  2. Haga clic en Agregar elemento de datos

    Añadir un elemento de datos nuevo

  3. Asigne un nombre al elemento de datos Product Id.

  4. Seleccione Tipo de elemento de datos > Variable JavaScript

  5. Usar digitalData.product.0.productInfo.sku como nombre de variable de JavaScript

  6. Compruebe las opciones Limpiar texto y Forzar minúsculas

  7. Haga clic en Guardar en biblioteca

    Añadir un elemento de datos nuevo para el tipo de página

Añadir la extensión Adobe Analytics Product String

Si está familiarizado con las implementaciones de Adobe Analytics, probablemente ya sepa manejar la variable de productos. La variable de productos tiene una sintaxis específica y se utiliza de formas ligeramente distintas según el contexto. Para facilitar la tarea de rellenar la variable de productos en las etiquetas, ya se han creado tres extensiones adicionales en el mercado de la extensión de etiquetas. En esta sección, se añade una extensión creada por la asesoría de Adobe para usarla en la PDP.

Para añadir la extensión Adobe Analytics Product String

  1. Vaya a la página Extensiones > Catálogo.

  2. Busque la extensión Adobe Analytics Product String mediante los servicios de Adobe Consulting y haga clic en Instalar
    Añadir la extensión de cadena de producto de Adobe Analytics mediante la asesoría de Adobe

  3. Dedique un momento a leer las instrucciones.

  4. Haga clic en Guardar en biblioteca

    Guarde la extensión y créela en la biblioteca .

Creación de la regla para las páginas de detalles del producto

Utilice ahora los nuevos elementos de datos y la extensión para crear la regla de página de detalles del producto. Para esta funcionalidad, cree otra regla de carga de página que se active por el evento DOM Ready. Utilice una condición para que solo se active en las páginas de detalles del producto y la configuración de pedido para que se active antes de la regla que envía la señalización.

Para generar la regla de las PDP

  1. Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla

    Añadir regla

  2. Asigne un nombre a la regla Product Details - DOM Ready - 40.

  3. Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

    Asignar un nombre a la regla y añadir un evento

  4. Seleccione Tipo de evento > DOM Ready

  5. Establezca Order en 40, de modo que la regla se ejecute antes de la regla que contiene la acción Analytics > Send Beacon

  6. Haga clic en Conservar cambios
    Configuración del evento

  7. En Condiciones, haga clic en Haga clic en el icono + para abrir la pantalla de Condition Configuration
    Haga clic en el icono + para añadir una condición nueva

    1. Seleccione Tipo de condición > Comparación de valor

    2. Utilice el selector de elementos de datos y seleccione Page Type en el primer campo.

    3. Seleccione Contiene de la lista desplegable de operadores de comparación

    4. En el siguiente tipo de campo product-page (es la parte única del valor de tipo de página extraído de la capa de datos en PDP).

    5. Haga clic en Conservar cambios

      Definición de la condición

  8. 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

  9. Seleccione Extensión > Cadena de producto de Adobe Analytics

  10. Seleccione Tipo de acción > Definir s.products

  11. En la sección Evento de comercio electrónico de Analytics, seleccione prodView

  12. En la sección Variables de capa de datos para datos de producto, use el selector de elementos de datos para elegir el elemento de datos Product Id

  13. Haga clic en Conservar cambios

    Añadir la variable de cadena de producto con la extensión de cadena de producto de Adobe Analytics

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

    Añadir otra acción para la cadena de producto

  15. Seleccione Extensión > Adobe Analytics

  16. Seleccione Tipo de acción > Establecer variables

  17. Seleccione eVar 1 > Definir como e introduzca product detail page

  18. Establezca event1 y deje los valores opcionales en blanco.

  19. En Eventos, haga clic en el botón Agregar otro

  20. Configure el evento prodView y deje los valores opcionales en blanco

  21. Haga clic en Conservar cambios

    Establecer variables de Analytics en una regla de PDP

  22. Haga clic en Guardar en biblioteca y compilar

    Guarde la regla

Validación de los datos de página de detalles del producto

Acaba de crear una regla que establece variables antes de que se envíe la señalización. Ahora debería poder ver los datos nuevos que salen en la visita en Experience Cloud Debugger.

Para validar los datos de página de detalles del producto

  1. Abra el sitio web de Luma en el explorador Chrome.

  2. Vaya a cualquier página de detalles del producto.

  3. Haga clic en el icono de Debugger Abrir el Experience Cloud Debugger para abrir Adobe Experience Cloud Debugger

  4. Haga clic en la pestaña Analytics.

  5. Amplíe su grupo de informes.

  6. Observe las variables de detalles de producto que ahora se encuentran en Debugger, concretamente que se ha configurado eVar1 en “página de detalles de producto”, que la variable Events se ha configurado en “event1” y “prodView”, que la variable de productos se ha configurado con el ID del producto que está viendo y que el Nombre de página (Page Name) sigue incluyendo la extensión.

    Validación de la visita individual a la página

Cuando se carga una página, normalmente activa una señalización de carga de página activada por la función s.t(). Esto aumenta automáticamente una métrica page view para la página enumerada en la variable pageName.

Sin embargo, algunas veces no se desea aumentar las vistas de página del sitio, ya que la acción que se está realizando es de menor importancia o quizás diferente de una vista de página. En este caso, utilice la función s.tl(), que comúnmente se denomina solicitud de “vínculo de seguimiento”. Aunque se denomina solicitud de vínculo de seguimiento, no es necesario activarla al hacer clic en un vínculo. Se puede activar mediante cualquiera de los eventos disponibles en el generador de reglas de etiquetas, incluido su propio JavaScript personalizado.

En este tutorial, se activará una llamada s.tl() mediante uno de los eventos JavaScript más interesantes, un evento Enters Viewport.

El ejemplo de uso

En este caso de uso, desea saber si las personas se desplazan hacia abajo en nuestra página de inicio de Luma lo suficientemente lejos como para ver la sección Productos destacados de nuestra página. Hay cierta discordia interna en nuestra empresa sobre si las personas visitan esa sección o no, por lo que quiere usar Analytics para averiguarlo.

Creación de la regla en etiquetas

  1. Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla
    Añadir regla

  2. Asigne un nombre a la regla Homepage - Featured Products enters Viewport.

  3. Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

    Agregar regla de productos destacados

  4. Seleccione Tipo de evento > Entra a la ventanilla. Así se muestra un campo en el que debe introducir el selector de CSS que identificará el elemento de la página que debería activar la regla cuando entre a la vista en el navegador.

  5. Vuelva a la página principal de Luma y desplácese hasta la sección Productos destacados.

  6. Haga clic con el botón derecho en el espacio entre el título "PRODUCTOS DESTACADOS" y los elementos de esta sección y seleccione Inspect en el menú contextual. Así puede acercarse a lo que busca.

  7. Justo por ahí, posiblemente justo debajo de la sección seleccionada, está buscando un elemento div con class="we-productgrid aem-GridColumn aem-GridColumn--default--12". Busque este elemento.

  8. Haga clic con el botón derecho en este elemento y seleccione Copiar > Selector de copia

    Configuración del evento de Ingreso a la ventanilla

  9. Vuelva a las etiquetas y pegue este valor del portapapeles en el campo denominado Elements matching the CSS selector.

    1. Aparte, le corresponde decidir cómo identificar los selectores de CSS. Este método es poco fiable, ya que ciertos cambios en la página podrían inhabilitar dicho selector. Tenga esto en cuenta esto cuando use cualquier selector de CSS en etiquetas.

  10. Haga clic en Conservar cambios
    Configuración del evento de Ingreso a la ventanilla

  11. En Condiciones (Conditions), haga clic en el icono + para añadir una nueva condición.

  12. Seleccione Tipo de condición > Comparación de valor

  13. Utilice el selector de elementos de datos y seleccione Page Name en el primer campo.

  14. Seleccione Igual a en la lista desplegable de operadores de comparación

  15. en el siguiente tipo de campo content:luma:us:en (es el nombre de la página principal tal como se extrae de la capa de datos; solo queremos que esta regla se ejecute en la página principal).

  16. Haga clic en Conservar cambios

    Configuración de la condición de página principal

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

  18. Seleccione Extensión > Adobe Analytics

  19. Seleccione Tipo de acción > Establecer variables

  20. Configure eVar3 como Home Page - Featured Products.

  21. Configure prop3 como Home Page - Featured Products.

  22. Configure la variable Events como event3.

  23. Haga clic en Conservar cambios

    Configuración del evento de Ingreso a la ventanilla

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

  25. Seleccione Extensión > Adobe Analytics

  26. Seleccione Tipo de acción > Enviar señalización

  27. Elija la opción de seguimiento s.tl()

  28. En el campo Nombre del vínculo, escriba Scrolled down to Featured Products. Este valor se colocará en el informe de vínculos personalizados de Analytics.

  29. Haga clic en Conservar cambios

    Señalización de productos destacados de configuración

  30. Haga clic en Guardar en biblioteca y compilar

    Guarde la regla y créela

Ahora debe asegurarse de que esta visita entra cuando se desplaza hacia abajo hasta la sección Productos destacados de la página principal del sitio. Cuando carga la página principal por primera vez, no debe realizarse la solicitud, pero después de desplazarse hacia abajo y de que la sección sea visible, la visita se activa con los valores nuevos.

  1. Abra el sitio de Luma en el navegador Chrome y asegúrese de que se encuentra en la parte superior de la página principal.

  2. Haga clic en el icono de depurador Abra el Experience Cloud Debugger para abrir Adobe Experience Cloud Debugger

  3. Haga clic en la pestaña Analytics.

  4. Amplíe las visitas de su grupo de informes.

  5. Observe la visita individual de vista de página normal para la página principal con el nombre de la página, etc., (pero nada en eVar3 o prop3).

    Debugger con una vista de página

  6. Con Debugger abierto, desplácese hacia abajo por el sitio hasta que vea la sección Productos destacados

  7. Vuelva a ver Debugger y debería haber aparecido otra visita de Analytics. Esta visita debe tener los parámetros asociados con la visita de “s.tl()” configurada, concretamente:

    1. LinkType = "link_o" (lo que significa que la visita es una visita de vínculo personalizado, no una visita de vista de página).

    2. LinkName = "Scrolled down to Featured Products"

    3. prop3 = "Home Page - Featured Products"

    4. eVar3 = "Home Page - Featured Products"

    5. Events = "event3"

      Debugger con una vista de página