[Integrazione]{class="badge positive"}
Integrare AEM Headless e Target
[AEM headless as a Cloud Service]{class="badge informative"}
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. L'app WKND React viene utilizzata per esplorare come aggiungere all'esperienza un'attività Target personalizzata che utilizza offerte con frammenti di contenuto, per promuovere un'avventura WKND.
Il tutorial illustra i passaggi necessari per configurare AEM e Adobe Target:
- Crea configurazione Adobe IMS per Adobe Target nell'istanza di creazione AEM
- Crea Cloud Service Adobe Target nell'Autore AEM
- Applicare il Cloud Service Adobe Target alle cartelle di AEM Assets in AEM Author
- Autorizzazione per il Cloud Service Adobe Target in Adobe Admin Console
- Esporta frammenti di contenuto da AEM Author a Target
- Crea un'attività utilizzando le offerte dei frammenti di contenuto in Adobe Target
- Creazione di uno stream di dati di Experience Platform in Experience Platform
- Integra la personalizzazione in un'app headless AEM basata su React tramite Adobe Web SDK.
Configurazione Adobe IMS :headding-anchor:adobe-ims-configuration
Configurazione Adobe IMS che facilita l’autenticazione tra AEM e Adobe Target.
Consulta la documentazione per istruzioni dettagliate su come creare una configurazione Adobe IMS.
Cloud Service Adobe Target :headding-anchor:adobe-target-cloud-service
Nell’AEM viene creato un Cloud Service Adobe Target per facilitare l’esportazione dei frammenti di contenuto in Adobe Target.
Consulta la documentazione per istruzioni dettagliate su come creare un Cloud Service Adobe Target.
Configurare le cartelle di risorse :headding-anchor:configure-asset-folders
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.
- Accedi al servizio AEM Author come amministratore DAM
- Passa a Assets > File, individua la cartella risorse a cui è applicato
/conf
- Seleziona la cartella delle risorse e fai clic su Proprietà nella barra delle azioni in alto
- Seleziona la scheda Cloud Service
- Verificare che la configurazione cloud sia impostata sulla configurazione in base al contesto (
/conf
) che contiene la configurazione dei Cloud Service Adobe Target. - Seleziona Adobe Target dal menu a discesa Configurazioni Cloud Service.
- Seleziona Salva e chiudi in alto a destra
Autorizzare l’integrazione di AEM Target :headding-anchor:permission
Per esportare i frammenti di contenuto in Adobe Target, è necessario assegnare all'integrazione Adobe Target, che si presenta come progetto developer.adobe.com, il ruolo di prodotto Editor in Adobe Admin Console.
- Accedi ad Experience Cloud come utente in grado di amministrare il prodotto Adobe Target in Adobe Admin Console
- Apri Adobe Admin Console
- Seleziona Prodotti, quindi apri Adobe Target
- Nella scheda Profili di prodotto, seleziona DefaultWorkspace
- Seleziona la scheda Credenziali API
- Individua l'app developer.adobe.com in questo elenco e imposta Product Role su Editor
Esportare frammenti di contenuto in Target :headding-anchor:export-content-fragments
I frammenti di contenuto presenti nella gerarchia di cartelle di AEM Assets configurata possono essere esportati in Adobe Target come Offerte di 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.
-
Accedi a AEM Author come utente DAM
-
Passa a Assets > File e individua i frammenti di contenuto da esportare come JSON in Target nella cartella "Adobe Target enabled"
-
Selezionare i frammenti di contenuto da esportare in Adobe Target
-
Seleziona Esporta in offerte Adobe Target dalla barra delle azioni superiore
-
Questa azione esporta la rappresentazione JSON completa di tutti i dati del frammento di contenuto in Adobe Target come "Offerta frammento di contenuto"
-
La rappresentazione JSON completamente idratata può essere rivista in AEM
- Seleziona il frammento di contenuto
- Espandi il pannello laterale
- Seleziona l'icona Anteprima nel pannello laterale sinistro
- La rappresentazione JSON esportata in Adobe Target viene visualizzata nella vista principale
-
-
Accedi a Adobe Experience Cloud con un utente con il ruolo di editor per Adobe Target
-
Dall'Experience Cloud, seleziona Target dal commutatore del prodotto in alto a destra per aprire Adobe Target.
-
Assicurati che il Workspace predefinito sia selezionato nel commutatore Workspace in alto a destra.
-
Seleziona la scheda Offerte nella navigazione superiore
-
Seleziona il menu a discesa Tipo e seleziona Frammenti di contenuto
-
Verifica che il frammento di contenuto esportato dall’AEM venga visualizzato nell’elenco
- Passa il puntatore del mouse sull'offerta e seleziona il pulsante Visualizza
- Rivedi le Informazioni sull'offerta e osserva il collegamento diretto AEM che apre il frammento di contenuto direttamente nel servizio di authoring AEM
Attività Target con offerte per frammenti di contenuto :headding-anchor:activity
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.
-
Seleziona la scheda Attività nella navigazione superiore
-
Selezionare + Crea attività, quindi selezionare il tipo di attività da creare.
- Questo esempio crea un semplice test A/B, ma le offerte di frammenti di contenuto possono alimentare qualsiasi tipo di attività
-
Nella procedura guidata Crea attività
- Seleziona Web
- In Scegli Compositore esperienza, seleziona Modulo
- In Scegli Workspace, seleziona Workspace predefinito
- In Scegli proprietà, seleziona la proprietà in cui l'attività è disponibile oppure seleziona Nessuna restrizione proprietà per consentirne l'utilizzo in tutte le proprietà.
- Seleziona Successivo per creare l'attività
-
Rinomina l'attività selezionando rinomina in alto a sinistra
- Assegna all’attività un nome significativo
-
Nell'esperienza iniziale, imposta Posizione 1 per l'attività di destinazione
- In questo esempio, eseguire il targeting di una posizione personalizzata denominata
wknd-adventure-promo
- In questo esempio, eseguire il targeting di una posizione personalizzata denominata
-
In Contenuto selezionare il contenuto predefinito e selezionare Cambia frammento di contenuto
-
Seleziona il frammento di contenuto esportato da distribuire per questa esperienza e seleziona Fine
-
Rivedi il JSON per l’offerta di frammenti di contenuto nell’area di testo del contenuto; si tratta dello stesso JSON disponibile nel servizio di authoring di AEM tramite l’azione Anteprima del frammento di contenuto.
-
Nella barra a sinistra, aggiungi un’esperienza e seleziona un’offerta di frammento di contenuto diversa da distribuire
-
Seleziona Avanti e configura le regole di targeting in base alle esigenze per l'attività
- In questo esempio, lascia il test A/B come suddivisione manuale 50/50.
-
Seleziona Avanti e completa le impostazioni dell'attività
-
Seleziona Salva e chiudi e assegnagli un nome significativo
-
Dall'attività in Adobe Target, seleziona Attiva dal menu a discesa Inattivo/Attiva/Archivia in alto a destra.
L'attività Adobe Target che esegue il targeting della posizione wknd-adventure-promo
può ora essere integrata ed esposta in un'app headless AEM.
ID dello stream di dati di Experience Platform :headding-anchor:datastream-id
È necessario un ID Adobe Experience Platform Datastream per consentire alle app headless AEM di interagire con Adobe Target utilizzando Adobe Web SDK.
-
Passa a Adobe Experience Cloud
-
Apri Experience Platform
-
Seleziona Raccolta dati > Flussi di dati e seleziona Nuovo flusso di dati
-
Nella procedura guidata Nuovo flusso di dati, immetti:
- Nome:
AEM Target integration
- Descrizione:
Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
- Schema evento:
Leave blank
- Nome:
-
Seleziona Salva
-
Seleziona Aggiungi servizio
-
In Servizio seleziona Adobe Target
- Abilitato: Sì
- Token proprietà: Lascia vuoto
- ID ambiente di destinazione: Lascia vuoto
- L'ambiente di destinazione può essere impostato in Adobe Target in Amministrazione > Host.
- Spazio dei nomi ID di terze parti di destinazione: Lascia vuoto
-
Seleziona Salva
-
Sul lato destro, copiare l'ID Datastream per utilizzarlo nella chiamata di configurazione Adobe Web SDK.
Aggiungere personalizzazione a un’app AEM headless :headding-anchor:code
Questo tutorial illustra come personalizzare una semplice app React utilizzando le offerte relative ai 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 l'SDK mobile di Adobe.
Prerequisiti
- Node.js 14
- Git
- Installazione di WKND Shared 2.1.4+ in AEM as a Cloud Author e nei servizi Publish
Configurazione
-
Scarica il codice sorgente per l'app React di esempio da Github.com
code language-shell $ mkdir -p ~/Code $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Apri la base di codice in
~/Code/aem-guides-wknd-graphql/personalization-tutorial
nell'IDE preferito -
Aggiorna l'host del servizio AEM a cui desideri che l'app si connetta
~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development
code language-none ... REACT_APP_HOST_URI=https://publish-p1234-e5678.adobeaemcloud.com/ ...
-
Esegui l’app e accertati che si connetta al servizio AEM configurato. Dalla riga di comando, esegui:
code language-shell $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial $ npm install $ npm run start
-
Installa Adobe Web SDK come pacchetto NPM.
code language-shell $ 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 è l'ID DatastreamorgId
l'ID organizzazione Adobe AEM as a Cloud Service/Target disponibile all'indirizzo Experience Cloud > Profilo > Informazioni account > ID organizzazione corrente
Quando si richiama Web SDK, la posizione dell'attività Adobe Target (nel nostro esempio,
wknd-adventure-promo
) deve essere impostata come valore nell'arraydecisionScopes
.code language-javascript import { createInstance } from "@adobe/alloy"; const alloy = createInstance({ name: "alloy" }); ... alloy("config", { ... }); alloy("sendEvent", { ... });
Implementazione
-
Creare un componente React
AdobeTargetActivity.js
per far emergere le attività di 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} />); };
Il componente React di AdobeTargetActivity viene richiamato utilizzando come segue:
code language-jsx <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>
-
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
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%; }
Questo componente React viene richiamato come segue:
code language-jsx <AdventurePromo adventure={adventureJSON}/>
-
Aggiungi il componente AdobeTargetActivity a
Home.js
dell'app React sopra l'elenco delle avventure.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> ... ) }
-
Se l'app React non è in esecuzione, riavviare 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 l'attività
wknd-adventure-promo
, in base alla logica di Adobe Target.
Congratulazioni.
Ora che abbiamo configurato AEM as a Cloud Service per esportare frammenti di contenuto in Adobe Target, abbiamo utilizzato le Offerte di frammenti di contenuto in un’attività Adobe Target e abbiamo visualizzato tale attività in un’app AEM headless, personalizzando l’esperienza.