Integrazione

Integrare AEM Headless e Target

AEM headless as a Cloud Service

Scopri come integrare AEM headless con Adobe Target esportando frammenti di contenuto AEM in Adobe Target e utilizzarli per personalizzare esperienze headless utilizzando alloy.js dell’SDK web Adobe Experience Platform. Il App WKND di React viene utilizzato per esplorare il modo in cui un’attività Target personalizzata che utilizza le offerte con frammenti di contenuto può essere aggiunta all’esperienza, per promuovere un’avventura WKND.

Il tutorial illustra i passaggi necessari per configurare AEM e Adobe Target:

1. Creare una configurazione Adobe IMS per Adobe Target in AEM Author
2. Creazione di un Cloud Service Adobe Target in AEM Author
3. Applicare il Cloud Service Adobe Target alle cartelle AEM Assets in AEM Author
4. Autorizzare il Cloud Service Adobe Target in Adobe Admin Console
5. Esporta frammenti di contenuto da AEM Author a Target
6. Creare un’attività utilizzando le offerte dei frammenti di contenuto in Adobe Target
7. Creazione di uno stream di dati di Experience Platform nell’Experience Platform
8. Integrare la personalizzazione in un’app AEM headless basata su React utilizzando l’SDK per web di Adobe.

Configurazione Adobe IMS

Configurazione Adobe IMS che facilita l’autenticazione tra AEM e Adobe Target.

Revisione la documentazione istruzioni dettagliate su come creare una configurazione Adobe IMS.

Cloud Service Adobe Target

Nell’AEM viene creato un Cloud Service Adobe Target per facilitare l’esportazione dei frammenti di contenuto in Adobe Target.

Revisione la documentazione istruzioni dettagliate sulla creazione di un Cloud Service Adobe Target.

Configurare le cartelle di risorse

Il Cloud Service Adobe Target, configurato in una configurazione in base al contesto, deve essere applicato alla gerarchia di cartelle di AEM Assets che contiene i frammenti di contenuto da esportare in Adobe Target.

Autorizzare l’integrazione di AEM Target

L’integrazione Adobe Target, che si manifesta come progetto developer.adobe.com, deve ottenere il Editor ruolo del prodotto in Adobe Admin Console, per esportare i frammenti di contenuto in Adobe Target.

Esportare frammenti di contenuto in Target

Frammenti di contenuto esistenti in gerarchia di cartelle di AEM Assets configurata può essere esportato in Adobe Target come Offerte con frammenti di contenuto. Queste offerte di frammenti di contenuto, una forma speciale di offerte JSON in Target, possono essere utilizzate nelle attività di Target per fornire esperienze personalizzate in app headless.

Attività Target con offerte per frammenti di contenuto

In Adobe Target, è possibile creare un’attività che utilizza come contenuto il codice JSON per l’offerta di frammenti di contenuto, consentendo esperienze personalizzate in app headless con contenuti creati e gestiti nell’AEM.

In questo esempio utilizziamo una semplice attività A/B, ma è possibile utilizzare qualsiasi attività Target.

ID dello stream di dati di Experience Platform

Un Datastream Adobe Experience Platform È necessario un ID per consentire alle app AEM headless di interagire con Adobe Target utilizzando Adobe Web SDK.

Aggiungere personalizzazione a un’app AEM headless

Questo tutorial esplora come personalizzare una semplice app React utilizzando le offerte dei frammenti di contenuto in Adobe Target tramite Adobe Experience Platform Web SDK. Questo approccio può essere utilizzato per personalizzare qualsiasi esperienza web basata su JavaScript.

Le esperienze mobili Android™ e iOS possono essere personalizzate seguendo modelli simili utilizzando SDK mobile di Adobe.

Prerequisiti

• Node.js 14
• Git
• WKND condiviso 2.1.4+ installato sui servizi di authoring e pubblicazione di AEM as a Cloud

Configurazione

1. Scarica il codice sorgente per l’app React di esempio da Github.com

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

2. Apri base di codice in ~/Code/aem-guides-wknd-graphql/personalization-tutorial nell’IDE preferito

3. Aggiorna l’host del servizio AEM a cui desideri che l’app si connetta ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

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

4. Esegui l’app e accertati che si connetta al servizio AEM configurato. Dalla riga di comando, esegui:

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

5. Installare Adobe Web SDK come pacchetto NPM.

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

   L’SDK per web può essere utilizzato nel codice per recuperare il JSON offerta frammento di contenuto per posizione di attività.

   Durante la configurazione dell’SDK web, sono necessari due ID:

   • edgeConfigId che è il ID flusso di dati
   • orgId l'ID organizzazione dell'Adobe as a Cloud Service/target dell'AEM reperibile all'indirizzo Experience Cloud > Profilo > Informazioni account > ID organizzazione corrente

   Quando si richiama l’SDK per web, la posizione dell’attività Adobe Target (nel nostro esempio, wknd-adventure-promo) deve essere impostato come valore nella sezione decisionScopes array.

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

Implementazione

1. Creare un componente React AdobeTargetActivity.js per far emergere le attività di 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} />);
   };
   

   Il componente React di AdobeTargetActivity viene richiamato utilizzando come segue:

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

2. Creare un componente React AdventurePromo.js per eseguire il rendering dell’avventura JSON Adobe Target serve.

   Questo componente React utilizza il JSON completo di idratazione che rappresenta un frammento di contenuto di avventura e viene visualizzato in modo promozionale. I componenti React che visualizzano il codice JSON servito da Offerte con frammenti di contenuto di Adobe Target possono essere vari e complessi come richiesto in base ai frammenti di contenuto esportati in 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%;
   }
   

   Questo componente React viene richiamato come segue:

   <AdventurePromo adventure={adventureJSON}/>
   

3. Aggiungere il componente AdobeTargetActivity a quello dell’app React Home.js sopra l'elenco delle avventure.

   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. Se l’app React non è in esecuzione, riavvia utilizzando npm run start.

   Apri l’app React in due browser diversi, quindi consenti al test A/B di distribuire le diverse esperienze a ciascun browser. Se entrambi i browser mostrano la stessa offerta di avventura, prova a chiudere/riaprire uno dei browser fino a visualizzare l’altra esperienza.

   L’immagine seguente mostra le due diverse offerte di frammenti di contenuto visualizzate per wknd-adventure-promo Attività, in base alla logica di Adobe Target.

   

Congratulazioni.

Ora che abbiamo configurato l’AEM as a Cloud Service per esportare i frammenti di contenuto in Adobe Target, abbiamo utilizzato le offerte di frammenti di contenuto in un’attività Adobe Target e abbiamo fatto emergere tale attività in un’app AEM headless, personalizzando l’esperienza.

Risorse Business.Adobe.com