DocumentazioneAEMTutorial su AEMTutorial su AEM as a Cloud Service

[Integrazione]{class="badge positive"}

Integrare AEM Headless e Target

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

Creato per:

  • Intermedio
  • Amministratore
  • Sviluppatore

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

video poster

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

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

  1. Crea configurazione Adobe IMS per Adobe Target nell'istanza di creazione AEM
  2. Crea Cloud Service Adobe Target nell'Autore AEM
  3. Applicare il Cloud Service Adobe Target alle cartelle di AEM Assets in AEM Author
  4. Autorizzazione per il Cloud Service Adobe Target in Adobe Admin Console
  5. Esporta frammenti di contenuto da AEM Author a Target
  6. Crea un'attività utilizzando le offerte dei frammenti di contenuto in Adobe Target
  7. Creazione di uno stream di dati di Experience Platform in Experience Platform
  8. Integra la personalizzazione in un'app headless AEM basata su React tramite Adobe Web SDK.

Configurazione Adobe IMS 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.

video poster

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

Cloud Service Adobe Target 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.

video poster

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

Configurare le cartelle di risorse 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.

Espandi per istruzioni dettagliate
  1. Accedi al servizio AEM Author come amministratore DAM
  2. Passa a Assets > File, individua la cartella risorse a cui è applicato /conf
  3. Seleziona la cartella delle risorse e fai clic su Proprietà nella barra delle azioni in alto
  4. Seleziona la scheda Cloud Service
  5. Verificare che la configurazione cloud sia impostata sulla configurazione in base al contesto (/conf) che contiene la configurazione dei Cloud Service Adobe Target.
  6. Seleziona Adobe Target dal menu a discesa Configurazioni Cloud Service.
  7. Seleziona Salva e chiudi in alto a destra

video poster

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

Autorizzare l’integrazione di AEM Target 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.

Espandi per istruzioni dettagliate
  1. Accedi ad Experience Cloud come utente in grado di amministrare il prodotto Adobe Target in Adobe Admin Console
  2. Apri Adobe Admin Console
  3. Seleziona Prodotti, quindi apri Adobe Target
  4. Nella scheda Profili di prodotto, seleziona DefaultWorkspace
  5. Seleziona la scheda Credenziali API
  6. Individua l'app developer.adobe.com in questo elenco e imposta Product Role su Editor

video poster

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

Esportare frammenti di contenuto in Target 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.

Espandi per istruzioni dettagliate

  1. Accedi a AEM Author come utente DAM

  2. Passa a Assets > File e individua i frammenti di contenuto da esportare come JSON in Target nella cartella "Adobe Target enabled"

  3. Selezionare i frammenti di contenuto da esportare in Adobe Target

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

  5. Accedi a Adobe Experience Cloud con un utente con il ruolo di editor per Adobe Target

  6. Dall'Experience Cloud, seleziona Target dal commutatore del prodotto in alto a destra per aprire Adobe Target.

  7. Assicurati che il Workspace predefinito sia selezionato nel commutatore Workspace in alto a destra.

  8. Seleziona la scheda Offerte nella navigazione superiore

  9. Seleziona il menu a discesa Tipo e seleziona Frammenti di contenuto

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

video poster

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

Attività Target con offerte per frammenti di contenuto 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.

Espandi per istruzioni dettagliate

  1. Seleziona la scheda Attività nella navigazione superiore

  2. 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à

  3. 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à

  4. Rinomina l'attività selezionando rinomina in alto a sinistra

    • Assegna all’attività un nome significativo

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

  6. In Contenuto selezionare il contenuto predefinito e selezionare Cambia frammento di contenuto

  7. Seleziona il frammento di contenuto esportato da distribuire per questa esperienza e seleziona Fine

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

  9. Nella barra a sinistra, aggiungi un’esperienza e seleziona un’offerta di frammento di contenuto diversa da distribuire

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

  11. Seleziona Avanti e completa le impostazioni dell'attività

  12. Seleziona Salva e chiudi e assegnagli un nome significativo

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

video poster

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

ID dello stream di dati di Experience Platform datastream-id

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

Espandi per istruzioni dettagliate

  1. Passa a Adobe Experience Cloud

  2. Apri Experience Platform

  3. Seleziona Raccolta dati > Flussi di dati e seleziona Nuovo flusso di dati

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

  5. Seleziona Salva

  6. Seleziona Aggiungi servizio

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

  8. Seleziona Salva

  9. Sul lato destro, copiare l'ID Datastream per utilizzarlo nella chiamata di configurazione Adobe Web SDK.

video poster

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

Aggiungere personalizzazione a un’app AEM headless 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

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

  2. Apri la 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

    code language-none 
    ...
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:

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

  5. 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 Datastream
    • orgId 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'array decisionScopes.

    code language-javascript 
    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

    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}/>

  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

    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}/>

  3. 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>
          ...
    )
}

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

    Offerte esperienza

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.

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