DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurser om AEM as a Cloud Service

[Integrering]{class="badge positive"}

Integrera AEM Headless och Target

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

Skapat för:

  • Mellanliggande
  • Administratör
  • Utvecklare

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

Lär dig integrera AEM Headless med Adobe Target genom att exportera AEM Content Fragments till Adobe Target och använda dem för att personalisera headless-upplevelser med Adobe Experience Platform Web SDK:s alloy.js. React WKND-appen används för att utforska hur en anpassad Target-aktivitet med hjälp av Content Fragments Offers kan läggas till i upplevelsen för att marknadsföra ett WKND-äventyr.

video poster

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

Självstudiekursen beskriver de steg som krävs för att konfigurera AEM och Adobe Target:

  1. Skapa Adobe IMS-konfiguration för Adobe Target i AEM
  2. Skapa Adobe Target-Cloud Service i AEM
  3. Använd Adobe Target-Cloud Service på AEM Assets-mappar i AEM författare
  4. Behörighet för Adobe Target-Cloud Servicen i Adobe Admin Console
  5. Exportera innehållsfragment från AEM författare till mål
  6. Skapa en aktivitet med Content Fragment-erbjudanden i Adobe Target
  7. Skapa en dataström i Experience Platform i Experience Platform
  8. Integrera personalisering i en React-baserad AEM Headless-app med Adobe Web SDK.

Adobe IMS-konfiguration adobe-ims-configuration

En Adobe IMS-konfiguration som underlättar autentiseringen mellan AEM och Adobe Target.

Granska dokumentationen om du vill ha stegvisa instruktioner om hur du skapar en Adobe IMS-konfiguration.

video poster

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

Adobe Target Cloud Service adobe-target-cloud-service

En Adobe Target-Cloud Service skapas i AEM för att underlätta export av innehållsfragment till Adobe Target.

Granska dokumentationen om du vill ha stegvisa instruktioner om hur du skapar en Adobe Target-Cloud Service.

video poster

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

Konfigurera resursmappar configure-asset-folders

Adobe Target-Cloud Servicen, som konfigureras i en kontextmedveten konfiguration, måste tillämpas på AEM Assets-mapphierarkin som innehåller de innehållsfragment som ska exporteras till Adobe Target.

Expandera för steg-för-steg-instruktioner
  1. Logga in på AEM författartjänsten som DAM-administratör
  2. Navigera till Assets > Filer och leta upp resursmappen som /conf har tillämpats på
  3. Markera resursmappen och välj Egenskaper i det övre åtgärdsfältet
  4. Markera fliken Cloud Service
  5. Kontrollera att molnkonfigurationen är inställd på den kontextmedvetna konfiguration (/conf) som innehåller konfigurationen för Adobe Target-Cloud Service.
  6. Välj Adobe Target i listrutan Cloud Service Configurations.
  7. Välj Spara och stäng längst upp till höger

video poster

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

Behörighet för integrering av AEM Target permission

Adobe Target-integreringen, som visas som ett developer.adobe.com-projekt, måste beviljas produktrollen Editor i Adobe Admin Console för att innehållsfragment ska kunna exporteras till Adobe Target.

Expandera för steg-för-steg-instruktioner
  1. Logga in på Experience Cloud som användare som kan administrera Adobe Target-produkten i Adobe Admin Console
  2. Öppna Adobe Admin Console
  3. Välj Produkter och öppna sedan Adobe Target
  4. Välj DefaultWorkspace på fliken Produktprofiler
  5. Välj fliken API-autentiseringsuppgifter
  6. Leta reda på din developer.adobe.com i den här listan och ställ in dess produktroll på Redigeraren

video poster

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

Exportera innehållsfragment till mål export-content-fragments

Innehållsfragment som finns under den konfigurerade AEM Assets-mapphierarkin kan exporteras till Adobe Target som innehållsfragmenterbjudanden. Dessa Content Fragment Offers, en speciell form av JSON-erbjudanden i Target, kan användas i Target-aktiviteter för att leverera personaliserade upplevelser i headless-appar.

Expandera för steg-för-steg-instruktioner

  1. Logga in på AEM författare som DAM-användare

  2. Navigera till Assets > Filer och leta upp Content Fragments som ska exporteras som JSON till Target under mappen"Adobe Target enabled"

  3. Markera de innehållsfragment som ska exporteras till Adobe Target

  4. Välj Exportera till Adobe Target-erbjudanden i det övre åtgärdsfältet

    • Den här åtgärden exporterar den fullständigt hydrerade JSON-representationen av Content Fragment till Adobe Target som ett"Content Fragment Offer"

    • Den fullständigt hydrerade JSON-representationen kan granskas i AEM

      • Markera innehållsavsnittet
      • Expandera sidopanelen
      • Välj ikonen Förhandsgranska på den vänstra panelen
      • JSON-representationen som exporteras till Adobe Target visas i huvudvyn

  5. Logga in på Adobe Experience Cloud med en användare i redigeringsrollen för Adobe Target

  6. I Experience Cloud väljer du Mål i produktväljaren i det övre högra hörnet för att öppna Adobe Target.

  7. Kontrollera att Workspace-standardinställningen är markerad i Workspace-väljaren i det övre högra hörnet.

  8. Välj fliken Erbjudanden i den övre navigeringen

  9. Markera listrutan Typ och välj Innehållsfragment

  10. Kontrollera att det innehållsfragment som exporteras från AEM visas i listan

    • Hovra över erbjudandet och välj knappen Visa
    • Granska erbjudandeinformationen och se den AEM djupa länken som öppnar innehållsfragmentet direkt i AEM författartjänst

video poster

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

Målaktivitet med Content Fragment Offers activity

I Adobe Target kan en aktivitet skapas som använder Content Fragment Offer JSON som innehåll, vilket ger personaliserade upplevelser i headless-appar med innehåll som skapas och hanteras i AEM.

I det här exemplet använder vi en enkel A/B-aktivitet, men alla Target-aktiviteter kan användas.

Expandera för steg-för-steg-instruktioner

  1. Välj fliken Aktiviteter i den övre navigeringen

  2. Välj + Skapa aktivitet och välj sedan den typ av aktivitet som ska skapas.

    • I det här exemplet skapas ett enkelt A/B-test, men Content Fragment-erbjudanden kan påverka alla aktivitetstyper

  3. I guiden Skapa aktivitet

    • Välj Webb
    • Välj Formulär i Välj Experience Composer
    • I Välj Workspace väljer du Workspace (standard)
    • I Välj egenskap markerar du den egenskap som aktiviteten är tillgänglig i eller väljer Inga egenskapsbegränsningar för att den ska kunna användas i alla egenskaper.
    • Välj Nästa för att skapa aktiviteten

  4. Byt namn på aktiviteten genom att välja Byt namn överst till vänster

    • Ge aktiviteten ett beskrivande namn

  5. Ange Plats 1 för aktiviteten som mål i den initiala upplevelsen

    • I det här exemplet anger du en anpassad plats med namnet wknd-adventure-promo som mål

  6. Under Innehåll markerar du standardinnehållet och väljer Ändra innehållsfragment

  7. Markera det exporterade innehållsfragment som ska användas för den här upplevelsen och välj Klar

  8. Granska JSON-erbjudandet för innehållsfragment i textområdet Innehåll. Det är samma JSON som finns i AEM Author-tjänsten via funktionen Förhandsgranska för innehållsfragment.

  9. Lägg till en upplevelse i den vänstra listen och välj ett annat erbjudande om innehållsfragment som ska användas

  10. Välj Nästa och konfigurera målreglerna som krävs för aktiviteten

    • I det här exemplet lämnar du A/B-testningen som en manuell delning på 50/50.

  11. Välj Nästa och fyll i aktivitetsinställningarna

  12. Välj Spara och stäng och ge den ett beskrivande namn

  13. I Aktivitet i Adobe Target väljer du Aktivera i listrutan Inaktiv/Aktivera/arkiv i det övre högra hörnet.

Adobe Target-aktiviteten som riktar sig till platsen wknd-adventure-promo kan nu integreras och visas i en AEM Headless-app.

video poster

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

Experience Platform DataStream ID datastream-id

Ett Adobe Experience Platform Datastream-ID krävs för att AEM Headless-appar ska kunna interagera med Adobe Target med Adobe Web SDK.

Expandera för steg-för-steg-instruktioner

  1. Navigera till Adobe Experience Cloud

  2. Öppna Experience Platform

  3. Välj Datasamling > Datastreams och välj Ny datastream

  4. I guiden New DataStream anger du:

    • Namn: AEM Target integration
    • Beskrivning: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • Händelseschema: Leave blank

  5. Välj Spara

  6. Välj Lägg till tjänst

  7. In Service select Adobe Target

    • Aktiverad: Ja
    • Egenskapstoken: Lämna tomt
    • Målmiljö-ID: Lämna tomt
      • Målmiljön kan anges i Adobe Target på Administration > Värdar.
    • Tredjeparts-ID-målnamnområde: Lämna tomt

  8. Välj Spara

  9. Till höger kopierar du Datastream ID för användning i konfigurationsanropet Adobe Web SDK.

video poster

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

Lägg till personalisering i en AEM Headless-app code

I den här självstudiekursen utforskas hur du anpassar en enkel React-app med Content Fragment-erbjudanden i Adobe Target via Adobe Experience Platform Web SDK. Den här metoden kan användas för att personalisera alla JavaScript-baserade webbupplevelser.

Android™- och iOS-mobilupplevelser kan anpassas efter liknande mönster med Adobe Mobile SDK.

Förutsättningar

  • Node.js 14
  • Git
  • WKND Shared 2.1.4+ har installerats på AEM som molnförfattare och Publish-tjänster

Konfigurera

  1. Hämta källkoden för exempelappen React från Github.com

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

  2. Öppna kodbasen på ~/Code/aem-guides-wknd-graphql/personalization-tutorial i din favoritutvecklingsmiljö

  3. Uppdatera den AEM tjänstvärd som du vill att appen ska ansluta till ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

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

  4. Kör programmet och kontrollera att det är anslutet till den konfigurerade AEM. Kör från kommandoraden:

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

  5. Installera Adobe Web SDK som ett NPM-paket.

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

    Web SDK kan användas i kod för att hämta JSON-erbjudandet för innehållsfragment per aktivitetsplats.

    När du konfigurerar Web SDK krävs två ID:

    • edgeConfigId som är DataStream ID
    • orgId det AEM as a Cloud Service/Target-organisations-ID som finns på Experience Cloud > Profil > Kontoinformation > Aktuellt organisations-ID

    När Web SDK anropas måste Adobe Target-aktivitetsplatsen (i vårt exempel wknd-adventure-promo) anges som värdet i decisionScopes-arrayen.

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

Implementering

  1. Skapa en React-komponent AdobeTargetActivity.js för att visa Adobe Target-aktiviteter.

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

    Komponenten AdobeTargetActivity React anropas med följande:

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

  2. Skapa en React-komponent AdventurePromo.js för att återge äventyret med JSON Adobe Target-servrar.

    Den här React-komponenten tar det fullständigt hydrerade JSON-programmet som representerar ett äventyrligt innehållsfragment och visas på ett kampanjsätt. Reaktionskomponenterna som visar JSON som betjänas från Adobe Target Content Fragment Offers kan vara så varierade och komplexa som krävs baserat på de innehållsfragment som exporteras till 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%;
}

    Reaktionskomponenten anropas enligt följande:

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

  3. Lägg till AdobeTargetActivity-komponenten i React-appens Home.js ovanför listan med äventyr.

    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. Om React-appen inte körs kan du börja använda npm run start igen.

    Öppna appen React i två olika webbläsare så att A/B-testet kan leverera de olika upplevelserna till olika webbläsare. Om båda webbläsarna visar samma äventyr kan du prova att stänga/öppna en av webbläsarna igen tills den andra visas.

    Bilden nedan visar de två olika Content Fragment-erbjudandena som visas för aktiviteten wknd-adventure-promo, baserat på Adobe Target logik.

    Upplevelserbjudanden

Grattis!

Nu när vi har konfigurerat AEM as a Cloud Service att exportera innehållsfragment till Adobe Target, använde vi Content Fragments i en Adobe Target Activity och hittade den aktiviteten i en AEM Headless-app för att personalisera upplevelsen.

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