Carga e implementación de pruebas de extremo a extremo

La prueba de extensiones implica el uso de la API de Adobe Experience Platform Launch y/o de las herramientas de la línea de comandos para cargar los paquetes de extensión y, a continuación, el uso de la interfaz de usuario de Platform Launch para instalar el paquete de extensión en una propiedad y ejercer sus funciones dentro de una biblioteca y versión de Platform Launch.

Los pasos básicos para lograrlo son estos:

  1. Validación de la extensión
  2. Creación de una integración de Adobe I/O
  3. Carga del paquete de extensión
  4. Creación de una propiedad de desarrollo
  5. Instalación de la extensión
  6. Creación de recursos para probar la extensión
  7. Publicación de cambios
  8. Instalación de Platform Launch en un sitio de prueba
  9. Prueba

Al realizar la prueba (paso 9 anterior), cuando descubra problemas que deben solucionarse, deberá:

  1. Actualizar el código de extensión
  2. Crear un nuevo paquete de extensión
  3. Cargar el nuevo paquete de extensión (la extensión instalada hará referencia a este nuevo paquete automáticamente)
  4. Actualizar los recursos según sea necesario
  5. Volver a publicar
  6. Prueba

A medida que recorramos los pasos a continuación, supondremos que usa Mac OS con node y npm instalados y disponibles.

Validación de la extensión

Una vez que su equipo esté satisfecho con el rendimiento de su extensión y los resultados que ven en la herramienta Sandbox, debe estar preparado para cargar el paquete de extensión en Platform Launch.

Antes de cargar, compruebe que estén presentes los campos o la configuración requeridos. Por ejemplo, revisar su manifiesto de extensión, su configuración de extensión, sus vistas y sus módulos de biblioteca (como mínimo) sería una buena práctica.

Un ejemplo específico es el archivo de logotipo: añada una línea "iconPath": "example.svg", al archivo extension.json e incluya ese archivo de imagen de logotipo en el proyecto. Esta es la ruta relativa al icono que se mostrará para la extensión en Platform Launch. No debería comenzar con una barra oblicua. Debe hacer referencia a un archivo SVG con una extensión .svg. El SVG debería aparecer como aparece normalmente cuando se renderiza como cuadrado y nuestra interfaz de usuario lo escala. Consulte How to Scale SVG (cómo escalar SVG) para obtener más detalles.

NOTA

En el caso de las extensiones públicas, incluya un elemento en su extension.json con un vínculo a su listado de Exchange. El manifiesto de extensión debe incluir una entrada como esta: "exchangeUrl":"https://www.adobeexchange.com/experiencecloud.details.12345.html" que apunte a la dirección URL de su listado de Exchange.

Creación de una integración de Adobe I/O

Para utilizar la API o las herramientas de la línea de comandos, necesita una cuenta técnica de Adobe I/O. Crearemos la cuenta técnica en la consola de I/O y luego usaremos la herramienta Uploader para cargar el paquete de extensión.

Para obtener información sobre cómo crear una cuenta técnica para utilizarla con Platform Launch, consulte la guía Access Tokens (acceso a tókens).

IMPORTANTE

Para crear una integración en Adobe I/O, debe ser administrador de organización de Experience Cloud o desarrollador de organización de Experience Cloud.

Si no puede crear una integración, es probable que no tenga los permisos correctos y tenga que hablar con uno de sus administradores de organización para completar los pasos o asignarle como desarrollador para que pueda hacerlo usted mismo.

Carga del paquete de extensión

Con las credenciales listas, ya puede probar el paquete de extensión de extremo a extremo.

Cuando carga el paquete de extensión por primera vez, pasa a un estado de development. Esto significa que solo es visible con su propia compañía de Platform Launch y solo con una propiedad de Platform Launch que se haya marcado para el desarrollo de extensiones (que se verá más adelante).

Por ahora, vuelva a la línea de comandos del directorio que contiene el paquete .zip.

npx @adobe/reactor-uploader

npx le permite descargar y ejecutar un paquete npm sin instalarlo realmente en su equipo. Es la forma más sencilla de ejecutar el Uploader.

El Uploader le pedirá que introduzca varios datos. El ID de cuenta técnica, la clave de API y otros datos se pueden recuperar de la consola de Adobe I/O. Vaya a la página Integraciones en la consola de I/O. Seleccione la organización correcta en el menú desplegable, busque la integración correcta y seleccione View.

  • ¿Cuál es la ruta a la clave privada? /path/to/private.key. Este es el lugar donde guardó la clave privada en el paso 2 anterior.
  • ¿Cuál es su ID de organización? Copie o pegue esto desde la página de información general de la consola de I/O que dejó abierta anteriormente.
  • ¿Cuál es su ID de cuenta técnica? Copie/pegue desde la consola de I/O.
  • ¿Cuál es su clave de API? Copie/pegue desde la consola de I/O.
  • ¿Qué es el secreto del cliente? Copie/pegue desde la consola de I/O.
  • ¿Cuál es la ruta al extension_package que desea cargar? /path/to/extension_package.zip. Si invoca el cargador desde el directorio que contiene el paquete .zip, solo puede seleccionarlo en la lista en lugar de escribir la ruta.

El paquete de extensión se cargará y el cargador le proporcionará el ID del extension_package.

NOTA

Al cargar o aplicar parches, los paquetes de extensión se colocan en un estado pendiente mientras el sistema extrae el paquete y lo implementa de forma asíncrona. Mientras se lleva a cabo este proceso, puede sondear el extension_package ID para ver su estado mediante la API y, en Platform Launch, verá una tarjeta de extensión en el catálogo marcada como Pendiente.

NOTA

Si tiene pensado ejecutar el cargador con frecuencia, poner toda esta información cada vez que lo haga puede ser un lastre. También puede pasarlas como argumento desde la línea de comandos. Consulte la sección Command Line Arguments (argumentos de la línea de comandos) de los documentos de NPM para obtener más información.

Creación de una propiedad de desarrollo

Al iniciar sesión en Platform Launch, verá primero la pantalla Propiedades. Una propiedad es un contenedor para las etiquetas que desea implementar y se puede utilizar en uno o varios sitios.

Aquí puede ver mi propiedad 'test', pero la primera vez que inicie sesión no verá ninguna propiedad en la pantalla. Seleccione Nueva propiedad para crear una. Escriba un nombre y una dirección URL. Probablemente quiera usar la dirección URL del sitio de prueba o de la página donde probará la extensión. Este campo de dominio lo pueden usar algunas extensiones o una condición que utilice la extensión Core (que veremos más adelante). Tenga en cuenta que localhost no funcionará, por lo que si está en una dirección URL localhost, utilice cualquier valor para esta prueba, como ejemplo.com.

Debido a que desea utilizar esta propiedad para la prueba de desarrollo de extensiones, también debe expandir Opciones avanzadas y asegurarse de marcar la casilla Configurar para desarrollo de extensiones.

Seleccione Guardar en la parte inferior para guardar la nueva propiedad.

De este modo, volverá a la pantalla Propiedades. Seleccione el nombre de la propiedad que acaba de crear. Esta es la pantalla Información general de una propiedad. Aquí no hay mucho, pero hay vínculos a cada área del sistema, con los enlaces de navegación globales en la parte superior.

Instalación de la extensión

Para instalar la extensión en esta propiedad, seleccione el vínculo Extensiones en los vínculos de navegación principales de la parte superior.

Verá la extensión Core en esta pantalla Instalada. La extensión Core contiene toda la funcionalidad de administración de etiquetas en Platform Launch. Para añadir la extensión, seleccione el Catálogo:

El catálogo muestra los iconos de tarjeta de cada extensión disponible. Si la extensión no se muestra en el catálogo, asegúrese de completar los pasos anteriores en las secciones Configurar y crear el paquete de extensión de la Consola de administración de Adobe más arriba. El paquete de extensión también puede aparecer como Pendiente si Platform Launch no ha completado el procesamiento inicial.

Si sabe que ha hecho todo correctamente y aún no ve el paquete de extensión como Pendiente o Fallido en el catálogo, puede visitar la API directamente para comprobar el estado del paquete de extensión. Para obtener más información al respecto, consulte Obtener un ExtensionPackage en los documentos de la API.

Si el paquete de extensión ha terminado de procesarse, la tarjeta tendrá un botón Instalar que podrá seleccionar:

Esto mostrará la pantalla de configuración que creó para su extensión (si es que la tiene). Añada la información necesaria para configurar la extensión y seleccione Guardar en la parte inferior. Si la extensión no tiene configuración, se instalará en cuanto seleccione Instalar.

Este es un ejemplo con la extensión de Facebook:

Ahora debería ver la pantalla Extensiones instaladas con la extensión Core y la extensión.

Creación de recursos para probar la extensión

Las extensiones proporcionan nuevas capacidades a los usuarios de Platform Launch. Estas se muestran casi siempre en Elementos de datos o en el Generador de reglas. Hablaremos de ambas áreas a continuación.

Elementos de datos

Elementos de datos existen en Platform Launch para ayudar a los usuarios a mantener valores. Cada elemento de datos es una asignación o un indicador a los datos de origen. Un solo elemento de datos es una variable cuyo valor puede asignarse a cadenas de consulta, direcciones URL, valores de cookies, variables JavaScript, etc.

Las extensiones pueden definir tipos de elementos de datos si es necesario para que funcione la extensión o simplemente por comodidad para los usuarios. Cuando una extensión proporciona tipos de elementos de datos, aparecen en una lista desplegable para los usuarios en la pantalla Crear nuevo elemento de datos:

Cuando un usuario selecciona la extensión desde el menú desplegable Extensión, la lista desplegable Tipo de elemento de datos se rellena con cualquier tipo de elemento de datos que proporciona la extensión. A continuación, el usuario puede asignar cada elemento de datos a su valor de origen. Los elementos de datos se pueden utilizar cuando se generan reglas en el Evento de cambio de elemento de datos o en el Evento de código personalizado para activar una regla que se va a ejecutar. También se puede utilizar un elemento de datos en la condición de elemento de datos u otras condiciones, excepciones o acciones de una regla.

Una vez creado el elemento de datos (con la asignación configurada), los usuarios pueden hacer referencia a los datos de origen simplemente haciendo referencia al elemento de datos. Si el origen del valor cambia alguna vez (rediseños del sitio, etc.) los usuarios solo deberán actualizar la asignación una vez en Platform Launch, y todos los elementos de datos recibirán automáticamente el nuevo valor de origen.

Reglas

Seleccione el vínculo Reglas en las opciones de navegación arriba y, a continuación, seleccione Añadir regla:

Primero asigne un nombre a la regla (cualquier nombre vale). La pantalla Crear nueva regla está configurada como una sentencia if-then:

Si se produce un evento, las condiciones pasan y no hay excepciones, la acción se activa. Este mismo flujo existe en extensiones donde puede crear o aprovechar eventos, condiciones, excepciones, elementos de datos o acciones.

Continuando con el ejemplo de Facebook, vamos a añadir un evento cada vez que se cargue una página en nuestro sitio:

Con el Tipo de evento Window Loaded, cada vez que se cargue una página en nuestro sitio, se activará esta regla. Seleccione Guardar. Para este ejemplo, omitamos Condiciones y Excepciones porque queremos que esta regla se active para cualquier página de nuestro sitio: nuestra regla "global" al cargar, por así decirlo.

En Acciones, seleccione Añadir. En esta pantalla de configuración de acción, podemos elegir la extensión con la que queremos trabajar y la acción que queremos que se produzca cuando se active esta regla. Vamos a elegir Píxel de Facebook en Extensión y Enviar vista de página en Tipo de acción:

Seleccione Mantener cambios en la parte inferior y Guardar regla en la siguiente pantalla. Al probar la extensión, puede seleccionar cualquier evento, condición, etc. que proporcione la extensión en cualquier número de reglas.

Publicación de los cambios

En la navegación principal, seleccione Publicación y, a continuación, seleccione el vínculo Añadir nueva biblioteca:

Una biblioteca es un conjunto de instrucciones que indican cómo interactúan las extensiones, los elementos de datos y las reglas entre sí y con el sitio web. Las bibliotecas se compilan en compilaciones. Una biblioteca puede contener tantos cambios como desee aplicar o probar a la vez.

En la pantalla Crear nueva biblioteca, añada un nombre y elija un Entorno. Platform Launch proporciona un entorno de desarrollo predeterminado con el nombre útil Development, por lo que debe seleccionarlo en la lista Entorno. Por ahora, añadiremos todos los recursos disponibles, así que seleccione Añadir todos los recursos cambiados.

NOTA

Cuando se añade un recurso a una biblioteca, se toma una instantánea de dicho recurso en ese momento exacto y se añade a la biblioteca. Cuando realice cambios en los recursos más adelante (por ejemplo, como resultado de las correcciones que necesita), también deberá actualizar la biblioteca para incluir los cambios más recientes en los recursos. El botón Añadir todos los recursos cambiados también es útil para este propósito.

A continuación, seleccione Guardar en la parte inferior. Ahora que todos nuestros cambios están incluidos en esta biblioteca dev, vamos a construirla:

Una vez completado el proceso de versionado, verá el indicador de éxito verde junto al nombre de la biblioteca:

La biblioteca de Platform Launch ahora está publicada y a la espera de usarse. Ahora tenemos que indicar a nuestra página de prueba que busque esta biblioteca para poder probar el comportamiento del usuario final en un explorador.

Instalación de Platform Launch en un sitio de prueba

Las instrucciones de instalación están disponibles en la pestaña Entornos, así que vayamos allí.

En esta página, verá todos los entornos disponibles y podrá crear más. Publicamos nuestra biblioteca en el entorno de desarrollo, así que vamos a obtener las instrucciones de instalación de ese entorno haciendo clic en el icono del cuadro en la columna Instalar en la fila Desarrollo.

Ahora estamos viendo las instrucciones de instalación para el entorno de desarrollo. Todo lo que hay que hacer aquí es copiar la etiqueta <script> en el cuadro, así que seleccione el botón de copia.

La instalación se completa colocando esta etiqueta <script> dentro de la sección <head> del documento o la plantilla del sitio. Ahora solo tiene que visitar el sitio de prueba para probar el comportamiento de la biblioteca de Platform Launch.

Prueba

Al validar la extensión en el sitio o la página de prueba, hay algunos comandos de consola que pueden resultar útiles:

  • _satellite.setDebug(true); colocará Platform Launch en modo de depuración y generará instrucciones de registro útiles para la consola.
  • El objeto _satellite._container contiene toda clase de información útil sobre la biblioteca implementada, incluidos detalles sobre la versión, los elementos de datos, las reglas y las extensiones incluidas.

En última instancia, el objetivo es probar la funcionalidad de la biblioteca implementada para asegurarse de que el código que escribió en el paquete de extensión se comporte como se espera cuando Platform Launch lo ha compilado en una biblioteca.

Cuando descubre cambios que deben realizarse en el paquete de extensión, el proceso de iteración es similar al proceso de desarrollo.

  1. Modifique el código del proyecto.
  2. Valide los cambios con la herramienta Sandbox.
  3. Utilice la herramienta Packager para crear un nuevo paquete .zip
  4. Utilice la herramienta Uploader para cargar el nuevo paquete .zip; puede seguir las mismas instrucciones que se han indicado anteriormente para la carga inicial, pero notará que esta vez, dado que ya hay un paquete de extensión con ese nombre en modo de desarrollo, este sobrescribirá el otro en lugar de crear uno nuevo. Si desea ahorrarse tiempo para no tener que introducir credenciales constantemente, puede consultar la documentación de reactor-uploader y pasar argumentos en la línea de comandos.
  5. Esta vez podemos omitir el paso de instalación.
  6. Modificar recursos: si ha cambiado la configuración de cualquiera de los componentes de la extensión, querrá actualizar esos recursos en la interfaz de usuario de Platform Launch.
  7. Añada los cambios más recientes en la biblioteca y vuelva a compilar.
  8. Haga más pruebas.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free