DocumentaciónExperience PlatformTutorial de SDK web

Validación de implementaciones de Web SDK con Experience Platform Debugger

Last update: Thu Jun 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Desarrollador

Obtenga información sobre cómo validar la implementación de SDK web de Adobe Experience Platform con Adobe Experience Platform Debugger.

Experience Platform Debugger es una extensión disponible para los navegadores Chrome y Firefox, que permite ver la tecnología de Adobe implementada en las páginas web. Descargue la versión para su navegador preferido:

  • Extensión de Firefox
  • Extensión de Chrome

Si nunca antes ha utilizado Debugger, es posible que desee ver este vídeo de información general de cinco minutos:

video poster

https://video.tv.adobe.com/v/35998?learn=on&enablevpops&captions=spa

En esta lección, utiliza la extensión de Adobe Experience Platform Debugger para reemplazar la propiedad de etiquetas codificada en el sitio de demostración de Luma con su propia propiedad.

Esta técnica se denomina cambio de entorno y será útil más adelante, cuando trabaje con etiquetas en su propio sitio web. Permite cargar el sitio web de producción en el explorador, pero con la biblioteca de etiquetas development. Esta capacidad permite realizar y validar cambios de etiquetas con seguridad en de forma independiente de las revisiones de código normales. Después de todo, esta separación de las versiones de etiquetas de marketing de las versiones de código normal es una de las principales razones por las que los clientes utilizan etiquetas.

Objetivos de aprendizaje

Al final de esta lección, podrá utilizar Debugger para lo siguiente:

  • Cargar una biblioteca de etiquetas alternativa
  • Validar que el evento XDM del lado del cliente captura y envía datos según lo esperado a Platform Edge Network.
  • Habilite Edge Trace para ver las solicitudes del lado del servidor enviadas por Platform Edge Network

Requisitos previos

Está familiarizado con las etiquetas de recopilación de datos y con el sitio de demostración de Luma, y ha completado las lecciones anteriores en el tutorial:

  • Configuración de un esquema XDM
  • Configuración de un área de nombres de identidad
  • Configuración de una secuencia de datos
  • Extensión web SDK instalada en la propiedad tag
  • Creación de elementos de datos
  • Creación de identidades
  • Creación de reglas de etiquetas

Carga de bibliotecas de etiquetas alternativas con Debugger

Experience Platform Debugger tiene una característica interesante que le permite reemplazar una biblioteca de etiquetas existente por otra diferente. Esta técnica es útil para la validación y nos permite omitir muchos pasos de implementación en este tutorial.

  1. Asegúrese de tener abierto el sitio web de demostración de Luma y seleccione el icono de extensión de Experience Platform Debugger

  2. Debugger se abrirá y mostrará algunos detalles de la implementación codificada (es posible que tenga que volver a cargar el sitio de Luma después de abrir Debugger).

  3. Confirme que Debugger está "conectado a Luma" como se muestra a continuación y, a continuación, seleccione el icono "bloquear" para bloquear Debugger en el sitio de Luma.

  4. Seleccione el botón Iniciar sesión e inicie sesión en Adobe Experience Cloud con su Adobe Id.

  5. Ahora, ve a Etiquetas Experience Platform en el panel de navegación izquierdo

    Pantalla de etiquetas de Debugger

  6. Seleccione la ficha Configuración

  7. A la derecha de donde muestra los códigos incrustados de página, abra el menú desplegable Acciones y seleccione Reemplazar

    Seleccionar acciones > Reemplazar

  8. Dado que se ha autenticado, Debugger va a extraer las propiedades y entornos de etiquetas disponibles. Seleccione su propiedad

  9. Seleccione su entorno Development

  10. Seleccione el botón Aplicar

    Seleccione la propiedad de etiqueta alternativa

  11. El sitio web de Luma volverá a cargar con su propia propiedad de etiquetas.

    propiedad de etiqueta reemplazada

A medida que continúa con el tutorial, utilizará esta técnica de asignación del sitio de Luma a su propia propiedad de etiquetas para validar la implementación de Platform Web SDK. Al utilizar etiquetas en su propio sitio web, puede utilizar esta misma técnica para validar las bibliotecas de etiquetas de desarrollo en el sitio web de producción.

Validar solicitudes de red del lado del cliente con Experience Platform Debugger

Puede utilizar Debugger para validar las señalizaciones del lado del cliente activadas desde la implementación de Platform Web SDK para ver los datos enviados a Platform Edge Network:

  1. Vaya a Resumen en el panel de navegación izquierdo para ver los detalles de su propiedad de etiquetas

    Pestaña Resumen

  2. Ahora, ve a Experience Platform Web SDK en el panel de navegación izquierdo para ver las solicitudes de red

  3. Abrir la fila events

    Solicitud de Adobe Experience Platform Web SDK

  4. Observe cómo puede ver el tipo de evento web.webpagedetails.pageView que especificó en su acción Actualizar variable y otras variables integradas que se adhieren al grupo de campos AEP Web SDK ExperienceEvent

    Detalles del evento

  5. Desplácese hacia abajo hasta el objeto web, seleccione para abrirlo e inspeccione webPageDetails.name, webPageDetails.server y webPageDetails.siteSection. Deben coincidir con las variables de capa de datos digitalData correspondientes de la página principal

TIP
Para ver y comparar la capa de datos digitalData en la página principal:
  1. En la página de inicio de Luma, abra las herramientas para desarrolladores de navegadores. En el caso de Chrome, seleccione el botón F12 del teclado
  2. Seleccione la ficha Consola
  3. Escriba digitalData y seleccione Enter en el teclado para que aparezcan los valores de la capa de datos

Ficha Red

También puede validar los detalles del mapa de identidad:

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

  2. Vuelva a la página principal de Luma

  3. Abra la sección Experience Platform Web SDK en el panel de navegación izquierdo

    Web SDK en Debugger

  4. Seleccione la fila events para abrir los detalles en una ventana emergente

    Web SDK en Debugger

  5. Busque identityMap en la ventana emergente. Aquí debería ver lumaCrmId con tres claves authenticatedState, id y primary:
    Web SDK en Debugger

Validación de solicitudes del lado del cliente con herramientas de desarrollo del explorador

Estos tipos de detalles de solicitud también están visibles en la ficha Red de las herramientas para desarrolladores web del explorador (suponiendo que el sitio web esté cargando la biblioteca de etiquetas).

  1. Abra la ficha Red de las herramientas para desarrolladores web del explorador y vuelva a cargar la página. Filtre las llamadas con /ee para localizar la llamada, selecciónela y, a continuación, busque en la ficha Encabezados y en la ficha Carga útil

    Ficha Red

  2. Vaya a la pestaña Response y observe cómo se incluye el valor ECID en la respuesta.

    Ficha Red

    NOTE
    El valor ECID es visible en la respuesta de red. No se incluye en la parte identityMap de la solicitud de red, ni se almacena en este formato en una cookie.

Validar solicitudes de red del lado del servidor con Experience Platform Debugger

Como aprendió en la lección Configuración de un conjunto de datos, Platform Web SDK envía primero datos de su propiedad digital a Platform Edge Network. A continuación, Platform Edge Network realiza solicitudes adicionales del lado del servidor a los servicios correspondientes habilitados en el conjunto de datos. Puede validar las solicitudes del lado del servidor realizadas por Platform Edge Network mediante Edge Trace en Debugger.

Habilitar seguimiento de Edge

Para habilitar el seguimiento de Edge:

  1. En la navegación izquierda de Experience Platform Debugger, seleccione Registros

  2. Seleccione la ficha Edge y seleccione Conectar

    Conectar el seguimiento de Edge

  3. Está vacío por ahora

    Seguimiento de Edge conectado

  4. Actualice la página principal de Luma y vuelva a comprobar Experience Platform Debugger para ver cómo llegan los datos.

    Seguimiento de Edge de señalizaciones de Analytics

En este punto, no puede ver ninguna solicitud de Platform Edge Network que vaya a aplicaciones de Adobe porque no ha habilitado ninguna en el conjunto de datos. En lecciones futuras, utilice el seguimiento de Edge para ver las solicitudes salientes del lado del servidor a aplicaciones de Adobe y reenvío de eventos. Pero primero, obtenga información acerca de otra herramienta para validar las solicitudes del lado del servidor realizadas por Platform Edge Network: Adobe Experience Platform Assurance.

Siguiente:

NOTE
Gracias por dedicar su tiempo a conocer Adobe Experience Platform Web SDK. Si tiene preguntas, desea compartir comentarios generales o tiene sugerencias sobre contenido futuro, compártalas en esta publicación de debate de la comunidad de Experience League
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4