Show Menu
TOPICS×

Uso de la capa de datos del cliente de Adobe para integrar componentes principales y Adobe Launch

Los componentes principales se pueden integrar con Adobe Launch mediante la capa de datos del cliente de Adobe. En este documento se describe cómo configurar Adobe Launch para rastrear los eventos de clics de los componentes de imagen como ejemplo.
Cuando se configura, Launch generará el siguiente resultado en la consola del explorador cuando se haga clic en un componente de imagen principal.

Iniciar integración con AEM

El primer Adobe Launch debe estar integrado con el sitio de AEM.

Paso 1: Creación de una integración en Adobe I/O

Inicie sesión en Adobe I/O para inicio y configurar una integración.
  1. Ir a
    https://console.adobe.io
    .
  2. Inicie sesión con su Adobe ID.
  3. En la sección Inicio rápido, haga clic en
    Crear integración
    .
  4. Select
    Access an API
    and click
    Continue
    .
  5. Seleccione
    Experience Platform Launch API
    debajo de Adobe Experience Platform y haga clic en
    Continuar
    .

Paso 2: Creación de una configuración de IMS en AEM

En AEM, debe definir la integración que comenzó a configurar en Adobe I/O.
  1. Vaya a la página de inicio de AEM, haga clic en
    Herramientas -> Seguridad -> Configuraciones
    de Adobe IMS.
  2. Haga clic en
    Crear
    .
  3. Como Solución
    ​de Cloud, seleccione
    Adobe Launch
    .
  4. Marque
    Crear nuevo certificado
    .
  5. Introduzca un alias para el certificado, como
    aem-launch-certificate
    .
  6. Haga clic en
    Crear certificado
    y, en la ventana emergente, haga clic en
    Aceptar
    para crear el certificado.
  7. Haga clic en
    Descargar clave
    pública y, en la ventana emergente, haga clic en
    Descargar
    .

Paso 3: Finalizar la configuración de Adobe I/O

Con el certificado y la clave creados en la configuración de AEM IMS, puede finalizar la configuración de Adobe I/O.
  1. Vuelva a la consola de Adobe I/O como en el paso 1.
  2. En la ventana
    Crear una nueva integración
    , introduzca un nombre y una descripción como capa
    de datos de
    AEM Launch.
  3. En Certificados
    de claves
    públicas, cargue el certificado que ha creado en el paso 2.
  4. Seleccione el perfil
    Iniciar - Prod
    .
  5. Click
    Create integration
    .
  6. Haga clic en
    Continuar para ver los detalles
    de la integración. Necesitará estos detalles más adelante para finalizar la configuración de IMS en su instancia de AEM.

Paso 4: Finalizar la configuración de IMS

Con los detalles de la integración de Adobe I/O, puede finalizar la configuración de AEM IMS.
  1. En la ficha AEM, en la ficha Configuración
    de cuenta técnica de
    Adobe IMS del paso 2, haga clic en
    Siguiente
    .
  2. Introduzca un título como, por ejemplo, la configuración de
    IMS para Adobe Launch
    .
  3. En la ficha Adobe I/O, copie la clave de
    API (ID de cliente)
    .
  4. En la ficha AEM, pegue la clave copiada anterior en el campo
    Clave de
    API.
  5. En Adobe I/O, haga clic en
    Recuperar secreto
    de cliente y cópielo.
  6. En la ficha AEM, péguela en el campo Secreto del
    cliente
    .
  7. En la ficha Adobe I/O, seleccione la ficha
    JWT
    y copie la URL como
    https://ims-na1.adobelogin.com
    .
  8. En la ficha AEM, pegue la dirección URL en el campo
    Servidor
    de autorización.
  9. En la ficha Adobe I/O, copie la carga útil JWT (el código entre llaves).
  10. En la ficha AEM, péguela en el campo
    Carga útil
    .
  11. Haga clic en
    Crear
    para crear la configuración de IMS en AEM.

Paso 5a: Creación de una propiedad en Adobe Launch

Una propiedad define las funciones que Launch puede insertar en el sitio.
  1. Vaya a Adobe Launch en
    https://launch.adobe.com
    .
  2. Inicie sesión con su Adobe ID.
  3. Haga clic en
    Nueva propiedad
    .
  4. Escriba un nombre como
    Iniciar capa
    de datos de AEM.
  5. Escriba su dominio.
  6. Haga clic en
    Guardar
    .

Paso 5b: Creación de una regla en el lanzamiento

Con la propiedad que ha creado, puede definir una regla que especifique lo que debe suceder cuando se produce una acción.
  1. Haga clic en la propiedad recientemente agregada del paso 5
    Iniciar capa
    de datos de AEM.
  2. Seleccione la ficha
    Reglas
    y haga clic en
    Crear nueva regla
    .
  3. Escriba un nombre como, por ejemplo, clic
    en una
    imagen.
  4. Haga clic en el botón
    +
    debajo de
    Eventos
    .
  5. Seleccione
    Core
    as
    Extension
    ,
    Haga clic
    como
    Tipo de evento
    e introduzca
    .cmp-image
    ​como selector CSS.
  6. Haga clic en
    Mantener cambios
    .
  7. Haga clic en el botón
    +
    debajo de
    Acciones
    .
  8. Seleccione
    Core
    as
    Extension
    ,
    Custom Code
    as
    Action Type
    y haga clic en
    Abrir editor
    .
  9. En el editor, introduzca el código siguiente:
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. Haga clic en
    Guardar
    .
  11. Haga clic en
    Mantener cambios
    .
  12. Haga clic en
    Guardar
    para crear la nueva regla.

Paso 6: Publicación de la regla de inicio

Para que la nueva regla esté disponible para el sitio de AEM, debe publicarla.
  1. En la ficha
    Adobe Launch
    , seleccione la ficha
    Publishing
    .
  2. Haga clic en
    Añadir nueva biblioteca
    .
  3. Introduzca un
    Nombre
    como corresponda, como
    demo-1
    .
  4. Para
    Entornos
    , seleccione según corresponda, como
    Desarrollo (desarrollo)
    .
  5. Haga clic en
    Añadir un recurso
    .
  6. Seleccione
    Reglas -> clic en la imagen -> Última
    y haga clic en
    Seleccionar y crear una nueva revisión
    .
  7. Haga clic en
    Guardar y crear para desarrollo
    .
  8. En la ventana emergente, haga clic en
    Aplicar actualizaciones y continuar
    .
  9. Cuando se cree la biblioteca, haga clic en el icono de puntos suspensivos y seleccione
    Enviar para aprobación
    .
  10. En la ventana emergente, haga clic en
    Enviar
    .
  11. Haga clic en el icono de puntos suspensivos y seleccione
    Generar para ensayo
    .
  12. Cuando la compilación haya terminado, haga clic en el icono de puntos suspensivos y seleccione
    Aprobar para publicación
    .
  13. En la ventana emergente, haga clic en
    Aprobar
    .
  14. Haga clic en el icono de puntos suspensivos y seleccione
    Generar y publicar en producción
    .
  15. En la ventana emergente, haga clic en
    Publicar
    .

Paso 7: Habilitar las configuraciones de nube para el sitio

Para utilizar la integración, debe asignarse en AEM como configuración de nube.
  1. En la consola de AEM, haga clic en
    Herramientas -> General -> Navegador
    de configuración.
  2. Consulte los ejemplos
    de componentes
    principales y haga clic en
    Propiedades
    .
  3. Compruebe las configuraciones de
    Cloud
    y haga clic en
    Guardar y cerrar
    .

Paso 8: Creación de una integración de inicio con su sitio en AEM

Se necesita una integración de Launch para que AEM funcione con Launch
  1. En la consola de AEM, haga clic en
    Herramientas -> Cloud Services -> Adobe Launch Configurations
    .
  2. Seleccione Ejemplos
    de componentes
    principales y haga clic en
    Crear
    .
  3. Introduzca un
    Título
    , como la configuración
    ​Iniciar.
  4. Seleccione la configuración de IMS que creó en el paso 4.
  5. Como
    Compañía
    , selecciónela según corresponda.
  6. Como
    propiedad
    , seleccione la propiedad Launch recientemente agregada, creada en el paso 5.
  7. Mueva el control deslizante
    Incluir código de producción en Autor
    a la derecha y haga clic en
    Siguiente
    .
  8. Haga clic en
    Siguiente
    .
  9. Haga clic en
    Siguiente
    .
  10. Haga clic en
    Crear
    .

Paso 9: Conexión del sitio de AEM al lanzamiento de la integración

Para que AEM utilice la integración de Launch, debe asignarse como configuración de nube.
  1. En la consola de AEM, haga clic en
    Sitios
    y compruebe el sitio
    de
    componentes principales.
  2. Haga clic en
    Propiedades
    .
  3. Select the
    Advanced
    tab.
  4. Como Configuración
    de
    nube, seleccione los ejemplos
    de componentes
    principales y haga clic en
    Seleccionar
    .
  5. Click
    Save & Close
    .

Paso 10: Verifique que la lógica de inicio se aplique a la página

Pruebe que los pasos hasta ahora han tenido éxito.
  1. Abra la página Imagen de la biblioteca de componentes principales en modo de previsualización:
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Haga clic en una imagen y compruebe que el mensaje
    A Core Image was clicked
    se muestra en la consola del explorador.

Iniciar la integración con AEM y la capa de datos

Ahora que la integración entre AEM y Launch está configurada, podemos integrarla con la capa de datos.

Paso 1: Creación de una regla en Adobe Launch

Repita los pasos del paso 5 para agregar una nueva regla en Adobe Launch con los siguientes valores.
  • Nombre:
    image-click-data-layer
  • EVENTOS:
    • Extensión: Núcleo
    • Tipo de evento: DOM Ready
  • ACCIONES:
    • Extensión: Núcleo
    • Tipo de acción: Código personalizado
    • Código:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

Paso 2: Publicación de la regla de inicio para que esté disponible en el sitio de AEM

Repita los pasos del paso 6 para publicar la nueva regla.

Paso 3: Verifique que la lógica de inicio se aplique a la página

  1. Abra la página Imagen de la biblioteca de componentes principales en modo de previsualización:
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Haga clic en una imagen y compruebe que se muestra el siguiente mensaje en la consola del explorador: