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

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 le ayuda a 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, se usa el extensión de Adobe Experience Platform Debugger para reemplazar la propiedad de etiqueta codificada en la variable 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. Le permite cargar el sitio web de producción en su explorador, pero con su desarrollo biblioteca de etiquetas. 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 al Edge Network de Platform
  • Habilite el seguimiento de Edge para ver las solicitudes del lado del servidor enviadas por el Edge Network de Platform

Requisitos previos

Está familiarizado con las etiquetas de recopilación de datos y las Sitio de demostración de Luma y haya 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.

  1. Asegúrese de que tiene el Sitio web de demostración de Luma Abra y seleccione el icono Experience Platform Debugger extension.

  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 es "Conectado a Luma" como se muestra a continuación y, a continuación, seleccione el "bloquear" para bloquear Debugger en el sitio de Luma.

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

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

    Pantalla de etiquetas de Debugger

  6. Seleccione el Configuración pestaña

  7. A la derecha de donde muestra el Códigos incrustados de página, abra el Acciones y seleccione. Reemplazar

    Seleccione 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 Development entorno

  10. Seleccione el Aplicar botón

    Seleccione la propiedad de etiqueta alternativa

  11. El sitio web de Luma se 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 del SDK web de Platform. 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 del SDK web de Platform para ver los datos enviados al Edge Network de Platform:

  1. Ir a Resumen en el panel de navegación izquierdo, para ver los detalles de la propiedad de etiquetas

    Pestaña Resumen

  2. Ahora, vaya a SDK web de Experience Platform en el panel de navegación izquierdo para ver la Solicitudes de red

  3. Abra el eventos reñir

    Solicitud de SDK web de Adobe Experience Platform

  4. Observe cómo puede ver el web.webpagedetails.pageView tipo de evento especificado en su Actualizar variable acción y otras variables listas para usar que se ajustan a la variable AEP Web SDK ExperienceEvent grupo de campos

    Detalles del evento

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

TIP
Para ver y comparar digitalData capa de datos 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 en el teclado
  2. Seleccione el Consola pestaña
  3. Entrar digitalData y seleccione Enter en el teclado para que aparezcan los valores de la capa de datos

Pestaña Red

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

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

  2. Vuelva a la página principal de Luma

  3. Abra el SDK web de Experience Platform en el panel de navegación izquierdo

    SDK web en Debugger

  4. Seleccione el eventos fila para abrir los detalles en una ventana emergente

    SDK web en Debugger

  5. Busque la variable identityMap en la ventana emergente. Aquí debería ver lumaCrmId con tres claves authenticatedState, id y primary:
    SDK web 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 las herramientas para desarrolladores web del explorador Red (suponiendo que el sitio web esté cargando la biblioteca de etiquetas).

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

    Pestaña Red

  2. Vaya a la Respuesta y observe cómo se incluye el valor de ECID en la respuesta.

    Pestaña Red

    note note
    NOTE
    El valor ECID es visible en la respuesta de red. No se incluye en la identityMap parte 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 el Configuración de una secuencia de datos En esta lección, el SDK web de Platform envía primero datos de la propiedad digital al Edge Network de Platform. 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 el seguimiento de Edge en Debugger.

Habilitar seguimiento de Edge

Para habilitar el seguimiento de Edge:

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

  2. Seleccione el Edge y seleccione. Connect

    Conectar seguimiento de Edge

  3. Está vacío por ahora

    Seguimiento de Edge conectado

  4. Actualice la Página de inicio de Luma y compruebe Experience Platform Debugger de nuevo, para ver pasar los datos.

    Seguimiento de Edge de señalizaciones de Analytics

En este punto, no puede ver ninguna solicitud del Edge Network de Platform que vaya a aplicaciones de Adobe porque no ha habilitado ninguna en la secuencia de datos. En lecciones futuras, utilice el seguimiento de Edge para ver las solicitudes salientes del lado del servidor a las aplicaciones de Adobe y al 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 el SDK web de Adobe Experience Platform. Si tiene preguntas, desea compartir comentarios generales o tiene sugerencias sobre contenido futuro, compártalas en este Entrada de discusión de la comunidad Experience League
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4