Validación de implementaciones de Web SDK con Experience Platform Debugger
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:
Si nunca antes ha utilizado Debugger, es posible que desee ver este vídeo de información general de cinco minutos:
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:
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.
-
Asegúrese de tener abierto el sitio web de demostración de Luma y seleccione el icono de extensión de Experience Platform Debugger
-
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).
-
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.
-
Seleccione el botón Iniciar sesión e inicie sesión en Adobe Experience Cloud con su Adobe Id.
-
Ahora, ve a Etiquetas Experience Platform en el panel de navegación izquierdo
-
Seleccione la ficha Configuración
-
A la derecha de donde muestra los códigos incrustados de página, abra el menú desplegable Acciones y seleccione Reemplazar
-
Dado que se ha autenticado, Debugger va a extraer las propiedades y entornos de etiquetas disponibles. Seleccione su propiedad
-
Seleccione su entorno
Development
-
Seleccione el botón Aplicar
-
El sitio web de Luma volverá a cargar con su propia propiedad de etiquetas.
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:
-
Vaya a Resumen en el panel de navegación izquierdo para ver los detalles de su propiedad de etiquetas
-
Ahora, ve a Experience Platform Web SDK en el panel de navegación izquierdo para ver las solicitudes de red
-
Abrir la fila events
-
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 camposAEP Web SDK ExperienceEvent
-
Desplácese hacia abajo hasta el objeto
web
, seleccione para abrirlo e inspeccionewebPageDetails.name
,webPageDetails.server
ywebPageDetails.siteSection
. Deben coincidir con las variables de capa de datosdigitalData
correspondientes de la página principal
digitalData
en la página principal:- 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 - Seleccione la ficha Consola
- Escriba
digitalData
y seleccioneEnter
en el teclado para que aparezcan los valores de la capa de datos
También puede validar los detalles del mapa de identidad:
-
Inicie sesión en el sitio de Luma con las credenciales
test@test.com
/test
-
Vuelva a la página principal de Luma
-
Abra la sección Experience Platform Web SDK en el panel de navegación izquierdo
-
Seleccione la fila events para abrir los detalles en una ventana emergente
-
Busque identityMap en la ventana emergente. Aquí debería ver
lumaCrmId
con tres claves authenticatedState, id y primary:
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).
-
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 -
Vaya a la pestaña Response y observe cómo se incluye el valor ECID en la respuesta.
NOTE
El valor ECID es visible en la respuesta de red. No se incluye en la parteidentityMap
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:
-
En la navegación izquierda de Experience Platform Debugger, seleccione Registros
-
Seleccione la ficha Edge y seleccione Conectar
-
Está vacío por ahora
-
Actualice la página principal de Luma y vuelva a comprobar Experience Platform Debugger para ver cómo llegan los datos.
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.