DocumentatieAEMTutorials voor AEMTutorials voor AEM as a Cloud Service

[Integratie]{class="badge positive"}

AEM zonder kop en doel integreren

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Beheerder
  • Ontwikkelaar

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

Leer hoe u AEM Headless met Adobe Target kunt integreren, door AEM Content Fragments naar Adobe Target te exporteren en ze te gebruiken voor het personaliseren van ervaringen zonder kop met behulp van alloy.js van Adobe Experience Platform Web SDK. Reageer WKND Appwordt 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.

video poster

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 opzetten van AEM en Adobe Target:

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

Adobe IMS-configuratie adobe-ims-configuration

Een configuratie van Adobe IMS die de authentificatie tussen AEM en Adobe Target vergemakkelijkt.

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

video poster

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

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 documentatievoor geleidelijke instructies op hoe te om een Cloud Service van Adobe Target tot stand te brengen.

video poster

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

Elementmappen configureren configure-asset-folders

De 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 AEM de dienst van de Auteur 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 Cloud Servicen lusje
  5. Zorg ervoor dat de Configuratie van de Wolk aan de context-bewuste config (/conf) wordt geplaatst die de configuratie van de Cloud Servicen van Adobe Target bevat.
  6. Selecteer Adobe Target van de Configuraties van de Cloud Service dropdown.
  7. Selecteer sparen & Sluiten in het hoogste recht

video poster

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

Toestemming voor de integratie AEM 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 het 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

video poster

https://video.tv.adobe.com/v/3428879/?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 Assetsbestaan 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 AEM Auteur 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 Cloudmet een gebruiker in de rol van de Redacteur voor Adobe Target

  6. Van het 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 AEM diepe verbinding die het Fragment van de Inhoud direct in de AEM dienst van de Auteur opent

video poster

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. Controleer de JSON Content Fragment Offer in het tekstgebied Inhoud. Dit is dezelfde JSON die beschikbaar is in AEM Auteur 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.

video poster

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

Experience Platform DataStream-id datastream-id

Een identiteitskaart van Adobe Experience Platform DataStreamwordt vereist voor AEM Geen apps om met Adobe Target in wisselwerking te staan gebruikend SDK van het Web van de 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 de configuratievraag van SDK van het Web van de Adobe.

video poster

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

Aanpassing toevoegen aan een app zonder koppen AEM 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 de Mobiele SDK van de Adobe.

Vereisten

  • Node.js 14
  • Git
  • WKND Gedeelde 2.1.4+geïnstalleerd op AEM als de Diensten van de Auteur van de Wolk en van Publish

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 u verbinding wilt maken met de app ~/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 zorg ervoor dat deze verbinding maakt met de geconfigureerde AEM. 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 de Adobeals pakket NPM.

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

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

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

    • edgeConfigId die identiteitskaart DataStreamis
    • 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 de SDK van het Web wordt aangeroepen, moet de locatie van de Adobe Target-activiteit (in ons voorbeeld wknd-adventure-promo ) worden ingesteld als de waarde in de array decisionScopes .

    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 wij AEM as a Cloud Service hebben gevormd om de Fragmenten van de Inhoud naar Adobe Target uit te voeren, de Aanbiedingen van de Fragments van de Inhoud in een Activiteit van Adobe Target gebruiken, en die Activiteit in een AEM Headless app te beluisteren, die de ervaring personaliseert.

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