Integrazione

Integrare AEM Headless e Target

Ultimo aggiornamento: 2024-01-26
  • Creato per:
  • Intermediate
    Admin
    Developer

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.

 Espandi per istruzioni dettagliate
  1. Accedi a Servizio di authoring AEM come amministratore DAM
  2. Accedi a Risorse > File, individua la cartella di risorse con /conf applicato a
  3. Seleziona la cartella delle risorse e fai clic su Proprietà dalla barra delle azioni superiore
  4. Seleziona la Cloud Service scheda
  5. Assicurati che la configurazione cloud sia impostata sulla configurazione in base al contesto (/conf) che contiene la configurazione di Cloud Service Adobe Target.
  6. Seleziona Adobe Target dal Configurazioni Cloud Service a discesa.
  7. Seleziona Salva e chiudi in alto a destra

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.

 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 e quindi aprire Adobe Target
  4. Il giorno Profili di prodotto , seleziona DefaultWorkspace
  5. Seleziona la Credenziali API scheda
  6. Individua l’app developer.adobe.com in questo elenco e impostane le Ruolo prodotto a Editor

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.

 Espandi per istruzioni dettagliate
  1. Accedi a Autore AEM come utente DAM
  2. Accedi a Risorse > File, e individuare 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 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 nel ruolo Editor per Adobe Target
  6. Dalla sezione Experience Cloud, seleziona Target dallo switcher del prodotto in alto a destra per aprire Adobe Target.
  7. Assicurati che l’area di lavoro predefinita sia selezionata in Commutatore area di lavoro in alto a destra.
  8. Seleziona la Offerte scheda nella navigazione superiore
  9. Seleziona la Tipo e selezionando 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 Visualizza pulsante
    • Rivedi Informazioni offerta e visualizzare Collegamento profondo AEM che apre il frammento di contenuto direttamente nel servizio di authoring AEM

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.

 Espandi per istruzioni dettagliate
  1. Seleziona la Attività scheda nella navigazione superiore
  2. Seleziona + Crea attività, quindi seleziona il tipo di attività da creare.
    • In questo esempio viene creato un semplice Test A/B Tuttavia, le offerte di frammenti di contenuto possono alimentare qualsiasi tipo di attività
  3. In Crea attività procedura guidata
    • Seleziona Web
    • In entrata Scegli Compositore esperienza, seleziona Modulo
    • In entrata Scegli area di lavoro, seleziona Area di lavoro predefinita
    • In entrata Scegli proprietà, seleziona la Proprietà in cui è disponibile l’attività, oppure seleziona Nessuna restrizione di proprietà per consentirne l’utilizzo in tutte le Proprietà.
    • Seleziona Successivo per creare l’attività
  4. Rinominare 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, esegui il targeting di una posizione personalizzata denominata wknd-adventure-promo
  6. Sotto Contenuto seleziona il contenuto predefinito, quindi fai clic su Modifica frammento di contenuto
  7. Seleziona il frammento di contenuto esportato da distribuire per questa esperienza e fai clic su 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 Successivo e configura le regole di targeting in base alle esigenze dell’attività
    • In questo esempio, lascia il test A/B come suddivisione manuale 50/50.
  11. Seleziona Successivo, e completare le impostazioni dell'attività
  12. Seleziona Salva e chiudi e gli dia 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 del wknd-adventure-promo La posizione può ora essere integrata ed esposta in un’app headless AEM.


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.

 Espandi per istruzioni dettagliate
  1. Accedi 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 entrata Servizio seleziona Adobe Target
    • Attivato:
    • Token proprietà: Lascia vuoto
    • ID ambiente di destinazione: Lascia vuoto
      • L’ambiente di Target può essere impostato in Adobe Target all’indirizzo Administration > Hosts.
    • Spazio dei nomi ID di terze parti di destinazione: Lascia vuoto
  8. Seleziona Salva
  9. Sul lato destro, copia il ID flusso di dati da utilizzare in Adobe Web SDK chiamata di configurazione.

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.

    Offerte di esperienza

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.

In questa pagina