DocumentatieAEMTutorials voor AEMTutorials voor AEM as a Cloud Service

[Integratie]{class="badge positive"}

AEM Headless en Target integreren

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Van toepassing op:
  • Experience Manager as a Cloud Service

Gemaakt voor:

  • tussenpersoon
  • Beheerder
  • Ontwikkelaar

[AEM Headless as a Cloud Service]{class="badge informative"}

Leer hoe u AEM Headless kunt integreren met Adobe Target door AEM Content Fragments te exporteren naar Adobe Target en deze te gebruiken voor het aanpassen van ervaringen zonder kop met Adobe Experience Platform Web SDK alloy.js. ​ Reageer WKND App ​ wordt gebruikt om te onderzoeken hoe een gepersonaliseerde activiteit van het Doel gebruikend de Aanbiedingen van de Fragmenten van de Inhoud aan de ervaring kan worden toegevoegd, om een avontuur te bevorderen WKND.

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

In de zelfstudie worden de stappen beschreven die nodig zijn voor het instellen van AEM en Adobe Target:

  1. ​ creeer de Configuratie van Adobe IMS voor Adobe Target ​ in de Auteur van AEM
  2. ​ creeer Adobe Target Cloud Service ​ in de Auteur van AEM
  3. ​ pas Adobe Target Cloud Service op de omslagen van AEM Assets ​ in de Auteur van AEM toe
  4. ​ Toestemming Adobe Target Cloud Service ​ in Adobe Admin Console
  5. ​ de Fragmenten van de Inhoud van de Uitvoer ​ van de Auteur van AEM aan Doel
  6. ​ creeer een Activiteit gebruikend de Aanbiedingen van het Fragment van de Inhoud ​ in Adobe Target
  7. ​ creeer een DataStream van Experience Platform ​ in Experience Platform
  8. ​ integreer verpersoonlijking in React-Gebaseerde app van AEM Headless ​ gebruikend het Web SDK van Adobe.

Adobe IMS-configuratie adobe-ims-configuration

Een Adobe IMS-configuratie die verificatie tussen AEM en Adobe Target vergemakkelijkt.

Herzie ​ de documentatie ​ voor geleidelijke instructies op hoe te om een configuratie van Adobe te creëren IMS.

Adobe Target Cloud Service adobe-target-cloud-service

In AEM wordt een Adobe Target Cloud Service gemaakt om het exporteren van inhoudsfragmenten naar Adobe Target te vergemakkelijken.

Herzie ​ de documentatie ​ voor geleidelijke instructies op hoe te om een Adobe Target Cloud Service tot stand te brengen.

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

Elementmappen configureren configure-asset-folders

Adobe Target Cloud Service, geconfigureerd in een contextbewuste configuratie, moet worden toegepast op de AEM Assets-maphiërarchie die de Content Fragments bevat die naar Adobe Target moeten worden geëxporteerd.

Vergroten voor geleidelijke instructies
  1. Login aan de dienst van de Auteur van AEM als beheerder DAM
  2. Navigeer aan Assets > Dossiers, bepaal de plaats van de activa omslag die /conf heeft toegepast op
  3. Selecteer de activaomslag, en selecteer Eigenschappen van de hoogste actiebar
  4. Selecteer het lusje van de Diensten van de Wolk 0} {
  5. Zorg ervoor dat de Configuratie van de Wolk aan de context-bewuste config (/conf) wordt geplaatst die de configuratie van de Diensten van de Wolk van Adobe Target bevat.
  6. Selecteer Adobe Target van Cloud Service Configurations dropdown.
  7. Selecteer sparen & Sluiten in het hoogste recht
https://video.tv.adobe.com/v/3428907/?quality=12&learn=on&captions=dut

Toestemming voor de integratie met AEM Target permission

De integratie van Adobe Target, die zich als developer.adobe.com project manifesteert, moet de redacteur productrol in Adobe Admin Console worden verleend, om de Fragmenten van de Inhoud naar Adobe Target uit te voeren.

Vergroten voor geleidelijke instructies
  1. Meld u aan bij Experience Cloud als gebruiker die het Adobe Target-product in Adobe Admin Console kan beheren
  2. Open ​ Adobe Admin Console ​
  3. Selecteer Producten en open dan Adobe Target
  4. Op het lusje van Profielen van het Product, uitgezochte DefaultWorkspace
  5. Selecteer het API geloofsbrieven lusje
  6. Bepaal de plaats van uw developer.adobe.com app in deze lijst en plaats zijn Rol van het Product aan Redacteur
https://video.tv.adobe.com/v/3441979/?quality=12&learn=on&captions=dut

Inhoudsfragmenten exporteren naar doel export-content-fragments

De Fragmenten van de inhoud die onder de ​ gevormde de de de omslaghiërarchie van AEM Assets ​ bestaan kunnen aan Adobe Target als Aanbiedingen van het Fragment van de Inhoud worden uitgevoerd. Deze Content Fragment-aanbiedingen, een speciale vorm van JSON-aanbiedingen in Target, kunnen worden gebruikt in Target-activiteiten om persoonlijke ervaringen te bieden in toepassingen zonder kop.

Vergroten voor geleidelijke instructies

  1. Login aan de Auteur van AEM als gebruiker DAM

  2. Navigeer aan Assets > Dossiers, en bepaal de plaats van de Fragmenten van de Inhoud om als JSON aan Doel onder de "toegelaten Adobe Target"omslag uit te voeren

  3. Selecteer de inhoudsfragmenten die u wilt exporteren naar Adobe Target

  4. Selecteer Uitvoer aan Aanbiedingen van Adobe Target van de hoogste actiebar

    • Met deze actie exporteert u de volledig gehydrateerde JSON-weergave van het inhoudsfragment naar Adobe Target als een "Content Fragment-aanbieding"

    • De volledig gehydrateerde JSON-representatie kan in AEM worden bekeken

      • Selecteer het inhoudsfragment
      • Het zijpaneel uitbreiden
      • Selecteer pictogram van de Voorproef 0} {in het linkerzijpaneel
      • De JSON-representatie die naar Adobe Target wordt geëxporteerd, wordt weergegeven in de hoofdweergave

  5. Login aan ​ Adobe Experience Cloud ​ met een gebruiker in de rol van de Redacteur voor Adobe Target

  6. Van ​ Experience Cloud ​, uitgezochte Doel van de productschakelaar in hoogste recht om Adobe Target te openen.

  7. Zorg ervoor dat Standaard Workspace in de schakelaar van Workspace in het hoogste recht wordt geselecteerd.

  8. Selecteer het lusje van Aanbiedingen in de hoogste navigatie

  9. Selecteer Type dropdown, en het selecteren van de Fragmenten van de Inhoud

  10. Controleren of het uit AEM geëxporteerde inhoudsfragment in de lijst wordt weergegeven

    • Beweeg over de aanbieding, en selecteer de knoop van de Mening
    • Herzie het Info van de Aanbieding en zie de diepe verbinding van AEM die het Fragment van de Inhoud direct in de dienst van de Auteur van AEM opent
https://video.tv.adobe.com/v/3428913/?quality=12&learn=on&captions=dut

Doelactiviteit met Content Fragment-aanbiedingen activity

In Adobe Target kan een activiteit worden gemaakt die JSON-inhoud voor Content Fragment als inhoud gebruikt, waardoor persoonlijke ervaringen in een app zonder kop mogelijk zijn met inhoud die in AEM is gemaakt en beheerd.

In dit voorbeeld, gebruiken wij een eenvoudige activiteit A/B, nochtans kan om het even welke activiteit van het Doel worden gebruikt.

Vergroten voor geleidelijke instructies

  1. Selecteer het lusje van Activiteiten in de hoogste navigatie

  2. Selecteer + activiteit creëren, en selecteer dan het type van activiteit om tot stand te brengen.

    • Dit voorbeeld leidt tot een eenvoudige A/B Test maar de Aanbiedingen van het Fragment van de Inhoud kunnen om het even welk activiteitstype aandrijven

  3. In creeer de tovenaar van de Activiteit

    • Selecteer Web
    • In kies Composer van de Ervaring, uitgezochte Vorm
    • In kies Workspace, uitgezochte Standaard Workspace
    • In kies Bezit, selecteer het Bezit de Activiteit binnen beschikbaar is, of selecteer Geen Beperkingen van het Bezit om het toe te staan om in alle Eigenschappen worden gebruikt.
    • Selecteer daarna om de Activiteit tot stand te brengen

  4. Verander de naam van de Activiteit door te selecteren anders noemen in de linkerbovenkant

    • Geef de activiteit een betekenisvolle naam

  5. In de aanvankelijke Ervaring, plaats Plaats 1 voor de Activiteit om te richten

    • In dit voorbeeld, richt een douaneplaats genoemd wknd-adventure-promo

  6. Onder Inhoud selecteert de Standaardinhoud, en selecteert het Fragment van de Inhoud van de Verandering

  7. Selecteer het uitgevoerde Fragment van de Inhoud om voor deze ervaring te dienen, en selecteer Gereed

  8. Bekijk de JSON Content Fragment Offer in het tekstgebied Inhoud. Dit is dezelfde JSON die beschikbaar is in de AEM Author-service via de Voorvertoning van Content Fragment.

  9. Voeg in de linkertrack een ervaring toe en selecteer een andere Content Fragment-aanbieding die u wilt gebruiken

  10. Selecteer daarna, en vorm de het richten regels zoals vereist voor de activiteit

    • In dit voorbeeld laat u de A/B-test handmatig 50/50 splitsen.

  11. Selecteer daarna, en voltooi de activiteitenmontages

  12. Selecteer sparen & Sluiten en geef het een betekenisvolle naam

  13. Van de Activiteit in Adobe Target, activeert de uitgezochte ____ van Inactief/activeert/archivedropdown in het hoogste recht.

De Adobe Target-activiteit die gericht is op de wknd-adventure-promo -locatie kan nu worden geïntegreerd en weergegeven in een AEM Headless-app.

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

Experience Platform DataStream-id datastream-id

Een ​ identiteitskaart van Adobe Experience Platform DataStream ​ wordt vereist voor AEM Headless apps om met Adobe Target in wisselwerking te staan gebruikend ​ SDK van het Web van Adobe ​.

Vergroten voor geleidelijke instructies

  1. Ga aan ​ Adobe Experience Cloud ​

  2. Open Experience Platform

  3. Selecteer de Inzameling van Gegevens > de stromen van Gegevens en selecteer Nieuwe DataStream

  4. In de Nieuwe tovenaar DataStream, ga binnen:

    • Naam: AEM Target integration
    • Beschrijving: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • Gebeurtenisschema: Leave blank

  5. Selecteer sparen

  6. Selecteer toevoegen de Dienst

  7. In de Dienst uitgezochte Adobe Target

    • Toegelaten: ja
    • Token van het bezit: verlaten leeg
    • Identiteitskaart van het Milieu van het doel: Verlof
      • Het milieu van het Doel kan in Adobe Target bij Beleid > Gastheren worden geplaatst.
    • De Namespace van identiteitskaart van de Derde van het doel: verlaten leeg

  8. Selecteer sparen

  9. Op de rechterkant, kopieer identiteitskaart van 0} Datastream voor gebruik in ​ Adobe Web SDK ​ configuratievraag.

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

Aanpassing toevoegen aan een AEM Headless-app code

Dit leerprogramma verkent het personaliseren van een eenvoudige Reactie app gebruikend de Aanbiedingen van het Fragment van de Inhoud in Adobe Target via ​ SDK van het Web van Adobe Experience Platform ​. Deze aanpak kan worden gebruikt om elke JavaScript-webbeleving aan te passen.

De mobiele ervaringen van Android™ en van iOS kunnen na gelijkaardige patronen worden gepersonaliseerd gebruikend ​ Adobe Mobiele SDK ​.

Vereisten

Instellen

  1. Download de broncode voor steekproef React app van ​ Github.com ​

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

  2. Codebasis openen bij ~/Code/aem-guides-wknd-graphql/personalization-tutorial in uw favoriete IDE

  3. Werk de host van de AEM-service bij waarmee de app verbinding moet maken ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

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

  4. Voer de app uit en controleer of deze verbinding maakt met de geconfigureerde AEM-service. Voer vanaf de opdrachtregel de volgende handelingen uit:

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

  5. Installeer het ​ Web SDK van Adobe ​ als pakket NPM.

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

    Web SDK kan in code worden gebruikt om de Aanbieding JSON van het Fragment van de Inhoud door activiteitenplaats te halen.

    Wanneer het vormen van het Web SDK, zijn er twee vereiste identiteitskaart:

    • edgeConfigId die ​ identiteitskaart DataStream ​ is
    • orgId AEM as a Cloud Service/Doel Adobe Org ID die in Experience Cloud > Profiel > de info van de Rekening > Huidige identiteitskaart van het Org kan worden gevonden

    Wanneer u de Web SDK aanroept, moet de locatie van de Adobe Target-activiteit (in ons voorbeeld wknd-adventure-promo ) worden ingesteld als de waarde in de decisionScopes -array.

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

Implementatie

  1. Maak een React-component AdobeTargetActivity.js om Adobe Target-activiteiten te oppervlakken.

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

    De component AdobeTargetActivity React wordt als volgt aangeroepen:

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

  2. Maak een React-component AdventurePromo.js om het avontuur te renderen dat JSON Adobe Target-servers biedt.

    Deze React component neemt volledig gehydrateerde JSON die een fragment van de avontuurinhoud vertegenwoordigt, en op een promotionele manier toont. De React componenten die JSON tonen die van de Aanbiedingen van het Fragment van de Inhoud van Adobe Target wordt onderhouden kunnen zo gevarieerd en complex zijn zoals vereist gebaseerd op de Inhoudsfragmenten die naar Adobe Target worden uitgevoerd.

    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%;
}

    Deze component React wordt als volgt aangeroepen:

    code language-jsx 
    <AdventurePromo adventure={adventureJSON}/>

  3. Voeg de component AdobeTargetActivity toe om de toepassing Home.js boven de lijst met avonturen te Reageren.

    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. Als de React-app niet wordt uitgevoerd, start u deze opnieuw met npm run start .

    Open de React-app in twee verschillende browsers, zodat de A/B-test de verschillende ervaringen voor elke browser kan weergeven. Als in beide browsers dezelfde avontuuraanbieding wordt weergegeven, probeert u een van de browsers te sluiten of opnieuw te openen totdat de andere ervaring wordt weergegeven.

    In de onderstaande afbeelding ziet u de twee verschillende Content Fragment-aanbiedingen die worden weergegeven voor de wknd-adventure-promo Activity, op basis van Adobe Target-logica.

    de aanbiedingen van de Ervaring

Gefeliciteerd!

Nu we AEM as a Cloud Service hebben geconfigureerd voor het exporteren van inhoudsfragmenten naar Adobe Target, hebben we de Content Fragments-aanbiedingen in een Adobe Target-activiteit gebruikt, en hebben we die activiteit opgezocht in een AEM Headless-app, die de ervaring personaliseert.

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