DocumentaciónAEMTutoriales de AEMTutoriales de AEM as a Cloud Service

[Integración]{class="badge positive"}

AEM Integración de Target y sin encabezado de

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Intermedio
  • Administrador
  • Desarrollador

[AEM sin encabezado as a Cloud Service]{class="badge informative"}

AEM Obtenga información sobre cómo integrar sin encabezado con Adobe Target AEM, mediante la exportación de fragmentos de contenido de a Adobe Target, y utilizarlos para personalizar experiencias sin encabezado mediante alloy.js del SDK web de Adobe Experience Platform. La aplicación React WKND se usa para explorar cómo se puede agregar a la experiencia una actividad de Target personalizada mediante Ofertas de fragmentos de contenido para promocionar una aventura WKND.

https://video.tv.adobe.com/v/3422160/?quality=12&learn=on&captions=spa

AEM El tutorial trata sobre los pasos necesarios para configurar la configuración de la aplicación y de Adobe Target:

  1. Crear la configuración de Adobe IMS para Adobe Target AEM en el autor de la
  2. Crear Cloud Service AEM de Adobe Target en el autor de la
  3. Aplicar el Cloud Service de Adobe Target a las carpetas de AEM Assets AEM en el autor de la
  4. Permiso para el Cloud Service de Adobe Target en Adobe Admin Console
  5. AEM Exportar fragmentos de contenido de Autor de a Destino
  6. Crear una actividad mediante ofertas de fragmentos de contenido en Adobe Target
  7. Crear una secuencia de datos de Experience Platform en Experience Platform
  8. AEM Integre la personalización en una aplicación sin encabezado basada en React mediante el SDK web de Adobe.

Configuración de IMS de Adobe adobe-ims-configuration

AEM Una configuración de IMS de Adobe que facilita la autenticación entre y Adobe Target

Revise la documentación para obtener instrucciones paso a paso sobre cómo crear una configuración de IMS de Adobe.

https://video.tv.adobe.com/v/3422143/?quality=12&learn=on&captions=spa

Cloud Service de Adobe Target adobe-target-cloud-service

Se crea un Cloud Service AEM de Adobe Target en la para facilitar la exportación de fragmentos de contenido a Adobe Target.

Revise la documentación para obtener instrucciones paso a paso sobre cómo crear un Cloud Service de Adobe Target.

https://video.tv.adobe.com/v/3422647/?quality=12&learn=on&captions=spa

Configuración de carpetas de recursos configure-asset-folders

El Cloud Service de Adobe Target, configurado en una configuración según el contexto, debe aplicarse a la jerarquía de carpetas de AEM Assets que contiene los fragmentos de contenido para exportar a Adobe Target.

Amplíe para obtener instrucciones paso a paso
  1. AEM Inicie sesión en servicio de autor de como administrador de DAM
  2. Vaya a Assets > Archivos y busque la carpeta de recursos a la que se ha aplicado /conf
  3. Seleccione la carpeta de recursos y seleccione Propiedades en la barra de acciones superior
  4. Seleccione la ficha Cloud Service
  5. Asegúrese de que la Configuración de nube está establecida en la configuración según el contexto (/conf) que contiene la configuración de Cloud Service de Adobe Target.
  6. Seleccione Adobe Target del menú desplegable Configuraciones de Cloud Service.
  7. Seleccione Guardar y cerrar en la parte superior derecha

https://video.tv.adobe.com/v/3422655/?quality=12&learn=on&captions=spa

AEM Permiso para la integración con Target de la permission

La integración de Adobe Target, que se manifiesta como un proyecto developer.adobe.com, debe tener la función de producto Editor en Adobe Admin Console para poder exportar fragmentos de contenido a Adobe Target.

Amplíe para obtener instrucciones paso a paso
  1. Inicie sesión en el Experience Cloud como usuario que puede administrar el producto Adobe Target en Adobe Admin Console
  2. Abrir Adobe Admin Console
  3. Seleccione Productos y luego abra Adobe Target
  4. En la ficha Perfiles de producto, seleccione DefaultWorkspace
  5. Seleccione la ficha Credenciales de API
  6. Busque su aplicación developer.adobe.com en esta lista y establezca su función del producto en Editor

https://video.tv.adobe.com/v/3422137/?quality=12&learn=on&captions=spa

Exportar fragmentos de contenido a Target export-content-fragments

Los fragmentos de contenido que existen bajo la jerarquía de carpetas de AEM Assets configurada se pueden exportar a Adobe Target como ofertas de fragmentos de contenido. Estas ofertas de fragmentos de contenido, una forma especial de ofertas JSON en Target, se pueden utilizar en actividades de Target para ofrecer experiencias personalizadas en aplicaciones sin encabezado.

Amplíe para obtener instrucciones paso a paso

  1. AEM Inicie sesión en Author como usuario de DAM

  2. Vaya a Assets > Archivos y busque los fragmentos de contenido que desea exportar como JSON a Target en la carpeta "Adobe Target habilitado"

  3. Seleccione los fragmentos de contenido que desea exportar a Adobe Target

  4. Seleccione Exportar a ofertas de Adobe Target en la barra de acciones superior

    • Esta acción exporta la representación JSON completamente hidratada del fragmento de contenido a Adobe Target como una "Oferta de fragmento de contenido"

    • AEM La representación de JSON completamente hidratada se puede revisar en la sección de

      • Seleccione el fragmento de contenido
      • Expandir el panel lateral
      • Seleccione el icono Vista previa en el panel lateral izquierdo
      • La representación JSON exportada a Adobe Target se muestra en la vista principal

  5. Inicie sesión en Adobe Experience Cloud con un usuario en la función de editor de Adobe Target

  6. En el Experience Cloud, seleccione Destino del conmutador de productos en la parte superior derecha para abrir Adobe Target.

  7. Asegúrese de que Workspace predeterminado está seleccionado en el conmutador Workspace en la parte superior derecha.

  8. Seleccione la ficha Ofertas en la barra de navegación superior

  9. Seleccione el menú desplegable Tipo y seleccione Fragmentos de contenido

  10. AEM Compruebe que el fragmento de contenido exportado desde el que aparece la lista aparece en la lista.

    • Pase el ratón sobre la oferta y seleccione el botón Ver
    • AEM AEM Revise la Información de la oferta y vea el vínculo profundo que abre el fragmento de contenido directamente en el servicio de autor de la

https://video.tv.adobe.com/v/3422671/?quality=12&learn=on&captions=spa

Actividad de Target que utiliza ofertas de fragmentos de contenido activity

En Adobe Target AEM, se puede crear una actividad que utilice la oferta de fragmento de contenido JSON como contenido, lo que permite experiencias personalizadas en una aplicación sin encabezado con contenido creado y administrado en la.

En este ejemplo, utilizamos una actividad A/B simple, aunque se puede utilizar cualquier actividad de Target.

Amplíe para obtener instrucciones paso a paso

  1. Seleccione la ficha Actividades en la barra de navegación superior

  2. Seleccione + Crear actividad y, a continuación, seleccione el tipo de actividad que desea crear.

    • Este ejemplo crea una Prueba A/B simple, pero las ofertas de fragmentos de contenido pueden activar cualquier tipo de actividad

  3. En el asistente Crear actividad

    • Seleccionar Web
    • En Elegir Compositor de experiencias, seleccione Formulario
    • En Elegir Workspace, seleccione Workspace predeterminado
    • En Elegir propiedad, seleccione la propiedad en la que está disponible la actividad o seleccione Sin restricciones de propiedad para permitir que se utilice en todas las propiedades.
    • Seleccione Siguiente para crear la actividad

  4. Cambie el nombre de la actividad seleccionando Rename en la parte superior izquierda

    • Dé un nombre significativo a la actividad

  5. En la experiencia inicial, establezca Ubicación 1 para la actividad en destino

    • En este ejemplo, establezca como destino una ubicación personalizada denominada wknd-adventure-promo

  6. En Contenido, seleccione el contenido predeterminado y seleccione Cambiar fragmento de contenido

  7. Seleccione el fragmento de contenido exportado para esta experiencia y seleccione Listo

  8. AEM Revise el JSON de oferta de fragmento de contenido en el área de texto Contenido; se trata del mismo JSON disponible en el servicio de autor a través de la acción de previsualización de fragmento de contenido.

  9. En el carril izquierdo, añada una experiencia y seleccione una oferta de fragmento de contenido diferente para ofrecer

  10. Seleccione Siguiente y configure las reglas de segmentación según sea necesario para la actividad

    • En este ejemplo, deje la prueba A/B como una división manual al 50/50.

  11. Seleccione Siguiente y complete la configuración de la actividad

  12. Seleccione Guardar y cerrar y asígnele un nombre significativo

  13. En la lista desplegable Actividad en Adobe Target, seleccione Activar en la lista desplegable Inactiva/Activar/Archivar de la parte superior derecha.

La actividad de Adobe Target AEM que se dirige a la ubicación wknd-adventure-promo ahora se puede integrar y exponer en una aplicación sin encabezado de la aplicación de.

https://video.tv.adobe.com/v/3422663/?quality=12&learn=on&captions=spa

ID de flujo de datos de Experience Platform datastream-id

Se requiere un ID de Adobe Experience Platform AEM Datastream para que las aplicaciones sin encabezado de la aplicación interactúen con Adobe Target mediante el SDK web de Adobe.

Amplíe para obtener instrucciones paso a paso

  1. Vaya a Adobe Experience Cloud

  2. Abrir Experience Platform

  3. Seleccione Recopilación de datos > Flujos de datos y seleccione Nuevo flujo de datos

  4. En el asistente Nuevo flujo de datos, introduzca:

    • Nombre: AEM Target integration
    • Descripción: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • Esquema de evento: Leave blank

  5. Seleccionar Guardar

  6. Seleccionar Agregar servicio

  7. En Servicio, seleccione Adobe Target

    • Habilitado: Sí
    • Token de propiedad: Dejar en blanco
    • Id. de entorno de destino: Dejar en blanco
      • El entorno de destino se puede establecer en Adobe Target en Administración > Hosts.
    • Espacio de nombres de ID de terceros de destino: Dejar en blanco

  8. Seleccionar Guardar

  9. En el lado derecho, copie la ID de secuencia de datos para usarla en la llamada de configuración del SDK web de Adobe.

https://video.tv.adobe.com/v/3422182/?quality=12&learn=on&captions=spa

AEM Adición de personalización a una aplicación sin encabezado de code

Este tutorial explora la personalización de una aplicación React simple mediante ofertas de fragmentos de contenido en Adobe Target a través de Adobe Experience Platform Web SDK. Este método se puede utilizar para personalizar cualquier experiencia web basada en JavaScript.

Las experiencias móviles de Android™ y iOS se pueden personalizar siguiendo patrones similares mediante el SDK móvil de Adobe.

Requisitos previos

  • Node.js 14
  • Git
  • AEM WKND compartido 2.1.4+ instalado en los servicios de Publish y Autor de as a Cloud Manager de

Configuración de

  1. Descargue el código fuente de la aplicación React de ejemplo de Github.com

    code language-shell 
    $ mkdir -p ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Abrir base de código en ~/Code/aem-guides-wknd-graphql/personalization-tutorial en su IDE favorito

  3. AEM Actualice el host del servicio de al que desea que se conecte la aplicación ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

    code language-none 
    ...
REACT_APP_HOST_URI=https://publish-p1234-e5678.adobeaemcloud.com/
...

  4. AEM Ejecute la aplicación y asegúrese de que se conecte al servicio de configuración de la aplicación de la aplicación de. Desde la línea de comandos, ejecute:

    code language-shell 
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
$ npm install
$ npm run start

  5. Instale Adobe Web SDK como paquete NPM.

    code language-shell 
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
$ npm install @adobe/alloy

    El SDK web se puede utilizar en el código para recuperar la oferta de fragmento de contenido JSON por ubicación de actividad.

    Al configurar el SDK web, se requieren dos ID:

    • edgeConfigId, que es el ID de secuencia de datos
    • orgId el ID de organización de Adobe de AEM as a Cloud Service/Target que se puede encontrar en Experience Cloud > Perfil > Información de cuenta > ID de organización actual

    Al invocar el SDK web, la ubicación de la actividad de Adobe Target (en nuestro ejemplo, wknd-adventure-promo) debe establecerse como el valor en la matriz decisionScopes.

    code language-javascript 
    import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
...
alloy("config", { ... });
alloy("sendEvent", { ... });

Implementación

  1. Cree un componente de React AdobeTargetActivity.js para las actividades de Adobe Target.

    src/components/AdobeTargetActivity.js

    code language-javascript 
    import React, { useEffect } from 'react';
import { createInstance } from '@adobe/alloy';

const alloy = createInstance({ name: 'alloy' });

alloy('configure', {
  'edgeConfigId': 'e3db252d-44d0-4a0b-8901-aac22dbc88dc', // AEP Datastream ID
  'orgId':'7ABB3E6A5A7491460A495D61@AdobeOrg',
  'debugEnabled': true,
});

export default function AdobeTargetActivity({ activityLocation, OfferComponent }) {
  const [offer, setOffer] = React.useState();

  useEffect(() => {
    async function sendAlloyEvent() {
      // Get the activity offer from Adobe Target
      const result = await alloy('sendEvent', {
        // decisionScopes is set to an array containing the Adobe Target activity location
        'decisionScopes': [activityLocation],
      });

      if (result.propositions?.length > 0) {
        // Find the first proposition for the active activity location
        var proposition = result.propositions?.filter((proposition) => { return proposition.scope === activityLocation; })[0];

        // Get the Content Fragment Offer JSON from the Adobe Target response
        const contentFragmentOffer = proposition?.items[0]?.data?.content || { status: 'error', message: 'Personalized content unavailable'};

        if (contentFragmentOffer?.data) {
          // Content Fragment Offers represent a single Content Fragment, hydrated by
          // the byPath GraphQL query, we must traverse the JSON object to retrieve the
          // Content Fragment JSON representation
          const byPath = Object.keys(contentFragmentOffer.data)[0];
          const item = contentFragmentOffer.data[byPath]?.item;

          if (item) {
            // Set the offer to the React state so it can be rendered
            setOffer(item);

            // Record the Content Fragment Offer as displayed for Adobe Target Activity reporting
            // If this request is omitted, the Target Activity's Reports will be blank
            alloy("sendEvent", {
                xdm: {
                    eventType: "decisioning.propositionDisplay",
                    _experience: {
                        decisioning: {
                            propositions: [proposition]
                        }
                    }
                }
            });
          }
        }
      }
    };

    sendAlloyEvent();

  }, [activityLocation, OfferComponent]);

  if (!offer) {
    // Adobe Target offer initializing; we render a blank component (which has a fixed height) to prevent a layout shift
    return (<OfferComponent></OfferComponent>);
  } else if (offer.status === 'error') {
    // If Personalized content could not be retrieved either show nothing, or optionally default content.
    console.error(offer.message);
    return (<></>);
  }

  console.log('Activity Location', activityLocation);
  console.log('Content Fragment Offer', offer);

  // Render the React component with the offer's JSON
  return (<OfferComponent content={offer} />);
};

    El componente React de actividad de Adobe Target se invoca de la siguiente manera:

    code language-jsx 
    <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>

  2. Cree un componente de React AdventurePromo.js para procesar los servidores de Adobe Target JSON de aventura.

    Este componente de React toma el JSON completamente hidratado, que representa un fragmento de contenido de aventura y se muestra de forma promocional. Los componentes de React que muestran el JSON atendido desde Ofertas de fragmentos de contenido de Adobe Target pueden ser tan variados y complejos como sea necesario en función de los fragmentos de contenido que se exportan a Adobe Target.

    src/components/AdventurePromo.js

    code language-javascript 
    import React from 'react';

import './AdventurePromo.scss';

/**
* @param {*} content is the fully hydrated JSON data for a WKND Adventure Content Fragment
* @returns the Adventure Promo component
*/
export default function AdventurePromo({ content }) {
    if (!content) {
        // If content is still loading, then display an empty promote to prevent layout shift when Target loads the data
        return (<div className="adventure-promo"></div>)
    }

    const title = content.title;
    const description = content?.description?.plaintext;
    const image = content.primaryImage?._publishUrl;

    return (
        <div className="adventure-promo">
            <div className="adventure-promo-text-wrapper">
                <h3 className="adventure-promo-eyebrow">Promoted adventure</h3>
                <h2 className="adventure-promo-title">{title}</h2>
                <p className="adventure-promo-description">{description}</p>
            </div>
            <div className="adventure-promo-image-wrapper">
                <img className="adventure-promo-image" src={image} alt={title} />
            </div>
        </div>
    )
}

    src/components/AdventurePromo.scss

    code language-css 
    .adventure-promo {
    display: flex;
    margin: 3rem 0;
    height: 400px;
}

.adventure-promo-text-wrapper {
    background-color: #ffea00;
    color: black;
    flex-grow: 1;
    padding: 3rem 2rem;
    width: 55%;
}

.adventure-promo-eyebrow {
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
}

.adventure-promo-description {
    line-height: 1.75rem;
}

.adventure-promo-image-wrapper {
    height: 400px;
    width: 45%;
}

.adventure-promo-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
}

    Este componente React se invoca de la siguiente manera:

    code language-jsx 
    <AdventurePromo adventure={adventureJSON}/>

  3. Agregue el componente AdobeTargetActivity al Home.js de la aplicación React sobre la lista de aventuras.

    src/components/Home.js

    code language-javascript 
    import AdventurePromo from './AdventurePromo';
import AdobeTargetActivity from './AdobeTargetActivity';
...
export default function Home() {
    ...
    return(
        <div className="Home">

          <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>

          <h2>Current Adventures</h2>
          ...
    )
}

  4. Si la aplicación React no se está ejecutando, reinicie con npm run start.

    Abra la aplicación React en dos exploradores diferentes, de modo que permita que la prueba A/B ofrezca las diferentes experiencias a cada explorador. Si ambos navegadores muestran la misma oferta de aventura, intente cerrar o volver a abrir uno de los navegadores hasta que se muestre la otra experiencia.

    La siguiente imagen muestra las dos ofertas de fragmentos de contenido diferentes que se muestran para la actividad wknd-adventure-promo, según la lógica de Adobe Target.

    Ofertas de experiencia

Enhorabuena.

Ahora que hemos configurado AEM as a Cloud Service para exportar fragmentos de contenido a Adobe Target, hemos utilizado las ofertas de fragmentos de contenido en una actividad de Adobe Target AEM y hemos mostrado esa actividad en una aplicación sin encabezado de, personalizando la experiencia.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69