Integración

AEM Integración de Target y sin encabezado de

AEM sin encabezado as a Cloud Service

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. El Aplicación React WKND se utiliza para explorar cómo se puede añadir a la experiencia una actividad de Target personalizada mediante Ofertas de fragmentos de contenido para promocionar una aventura WKND.

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 IMS de Adobe para Adobe Target en AEM Author
2. Crear Cloud Service de Adobe Target en AEM Author
3. Aplicar el Cloud Service de Adobe Target a las carpetas de AEM Assets en AEM Author
4. Permiso del Cloud Service de Adobe Target en Adobe Admin Console
5. Exportar fragmentos de contenido de Autor de AEM a Target
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 Integración de la personalización en una aplicación sin encabezado basada en React mediante el SDK web de Adobe.

Configuración de IMS de Adobe

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

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

Cloud Service de Adobe Target

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

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

Configuración de carpetas de recursos

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.

AEM Permiso para la integración con Target de la

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

Exportar fragmentos de contenido a Target

Fragmentos de contenido que existen en jerarquía de carpetas de AEM Assets configurada se puede 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.

Actividad de Target que utiliza ofertas de fragmentos de contenido

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.

ID de flujo de datos de Experience Platform

Un Flujo de datos Adobe Experience Platform AEM Se requiere un ID para que las aplicaciones sin encabezado de la interactúen con Adobe Target mediante SDK web de Adobe.

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

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 SDK web de Adobe Experience Platform. 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 utilizando SDK móvil de Adobe.

Requisitos previos

• Node.js 14
• Git
• WKND compartido 2.1.4+ AEM instalado en los servicios de autor y publicación de as a Cloud

Configuración de

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

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

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

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

   ...
   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:

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

5. Instale el SDK web de Adobe como paquete NPM.

   $ 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 flujo de datos
   • orgId AEM El ID de organización de Adobe as a Cloud Service/de destino que se puede encontrar en Experience Cloud > Perfil > Información de la 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 decisionScopes matriz.

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

Implementación

1. Creación de un componente de React AdobeTargetActivity.js para que aparezcan actividades de Adobe Target.

   src/components/AdobeTargetActivity.js

   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:

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

2. Creación de un componente de React AdventurePromo.js para procesar la aventura que sirve Adobe Target JSON.

   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

   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

   .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:

   <AdventurePromo adventure={adventureJSON}/>
   

3. Añadir el componente AdobeTargetActivity a la aplicación de React Home.js encima de la lista de aventuras.

   src/components/Home.js

   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 wknd-adventure-promo Actividad, según la lógica de Adobe Target.

   

Enhorabuena.

AEM Ahora que hemos configurado la exportación de fragmentos de contenido a Adobe Target, hemos utilizado las ofertas de fragmentos de contenido en una actividad de Adobe Target AEM y hemos as a Cloud Service la exportación de los fragmentos de contenido a, hemos utilizado dicha actividad en una aplicación sin encabezado de y hemos personalizado la experiencia.

Recursos de Business.Adobe.com