DokumentationAEMAEM-TutorialsTutorials zu AEM as a Cloud Service

[Integration]{class="badge positive"}

Integrieren von AEM Headless und Target

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

Erstellt für:

  • Fortgeschrittener
  • Admin
  • Entwickler

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

Erfahren Sie, wie Sie AEM Headless mit Adobe Target integrieren können, indem Sie AEM-Inhaltsfragmente in Adobe Target exportieren und sie verwenden, um Headless-Erlebnisse mithilfe der Datei „legate.js“ des Adobe Experience Platform Web SDK zu personalisieren. Die React-WKND-App wird verwendet, um zu erforschen, wie eine personalisierte Target-Aktivität unter Verwendung von Inhaltsfragment-Angeboten zum Erlebnis hinzugefügt werden kann, um ein WKND-Abenteuer zu bewerben.

video poster

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

In diesem Tutorial werden die Schritte zum Einrichten von AEM und Adobe Target beschrieben:

  1. Erstellen der Adobe IMS-Konfiguration für Adobe Target in AEM Author
  2. Erstellen eines Adobe Target Cloud Service in AEM Author
  3. Anwenden von Adobe Target Cloud Service auf AEM Assets-Ordner in AEM Author
  4. Zulassen des Adobe Target Cloud Service in Adobe Admin Console
  5. Exportieren von Inhaltsfragmenten von AEM Author zu Target
  6. Erstellen einer Aktivität mit Inhaltsfragmentangeboten in Adobe Target
  7. Erstellen eines Experience Platform-Datenstroms in Experience Platform
  8. Integrieren der Personalisierung in eine React-basierte AEM Headless-App unter Verwendung des Adobe Web SDK

Adobe IMS-Konfiguration adobe-ims-configuration

Eine Adobe IMS-Konfiguration, die die Authentifizierung zwischen AEM und Adobe Target erleichtert.

In der Dokumentation finden Sie eine schrittweise Anleitung zum Erstellen einer Adobe IMS-Konfiguration.

video poster

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

Adobe Target Cloud Service adobe-target-cloud-service

In AEM wird ein Adobe Target Cloud Service erstellt, um den Export von Inhaltsfragmenten in Adobe Target zu erleichtern.

In der Dokumentation finden Sie eine schrittweise Anleitung, wie Sie einen Adobe Target Cloud Service erstellen.

video poster

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

Konfigurieren von Asset-Ordnern configure-asset-folders

Der in einer kontextsensitiven Konfiguration konfigurierte Adobe Target Cloud Service muss auf die AEM Assets-Ordnerhierarchie mit den Inhaltsfragmenten angewendet werden, die nach Adobe Target exportiert werden sollen.

Erweitern für Schritt-für-Schritt-Anweisungen
  1. Melden Sie sich beim AEM-Author-Service als DAM-Admin an.
  2. Navigieren Sie zu Assets > Dateien und suchen Sie den Asset-Ordner, auf den /conf angewendet wurde.
  3. Wählen Sie den Asset-Ordner aus und wählen Sie Eigenschaften in der oberen Aktionsleiste.
  4. Wählen Sie die Registerkarte Cloud-Services aus
  5. Stellen Sie sicher, dass die Cloud-Konfiguration auf die kontextabhängige Konfiguration (/conf) eingestellt ist, die die Konfiguration der Adobe Target Cloud Services enthält
  6. Wählen Sie Adobe Target aus dem Dropdown-Menü Cloud Service-Konfigurationen.
  7. Wählen Sie Speichern und schließen oben rechts.

video poster

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

Zugriffsberechtigung für die AEM Target-Integration permission

Die Adobe Target-Integration, die sich als developer.adobe.com-Projekt manifestiert, muss in der Adobe Admin Console die Produktrolle Editor erhalten, um Inhaltsfragmente in Adobe Target exportieren zu können.

Erweitern für Schritt-für-Schritt-Anweisungen
  1. Melden Sie sich bei Experience Cloud als eine Person an, die das Adobe Target-Produkt in Adobe Admin Console verwalten kann
  2. Öffnen Sie die Adobe Admin Console
  3. Wählen Sie Produkte und öffnen Sie dann Adobe Target
  4. Wählen Sie auf der Registerkarte Produktprofile die Option DefaultWorkspace.
  5. Wählen Sie die Registerkarte API-Anmeldeinformationen
  6. Suchen Sie Ihre developer.adobe.com-Anwendung in dieser Liste und setzen Sie ihre Produktrolle auf Editor

video poster

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

Exportieren von Inhaltsfragmenten in Target export-content-fragments

Inhaltsfragmente, die in der konfigurierten AEM-Assets-Ordnerhierarchie vorhanden sind, können als Inhaltsfragmentangebote in Adobe Target exportiert werden. Diese Inhaltsfragmentangebote, eine spezielle Form von JSON-Angeboten in Target, können in Target-Aktivitäten verwendet werden, um personalisierte Erlebnisse in Headless-Apps bereitzustellen.

Erweitern für Schritt-für-Schritt-Anweisungen

  1. Melden Sie sich bei AEM Author als DAM-Benutzerin bzw. -Benutzer an

  2. Navigieren Sie zu Assets > Dateien und suchen Sie im Ordner „Adobe Target aktiviert“ die Inhaltsfragmente, die als JSON in Target exportiert werden sollen

  3. Wählen Sie die Inhaltsfragmente aus, die nach Adobe Target exportiert werden sollen

  4. Wählen Sie Nach Adobe Target-Angebote exportieren in der oberen Aktionsleiste

    • Diese Aktion exportiert die vollständig hydrierte JSON-Darstellung des Inhaltsfragments als „Inhaltsfragmentangebot“ in Adobe Target

    • Die vollständig hydrierte JSON-Darstellung kann in AEM überprüft werden

      • Wählen Sie das Inhaltsfragment aus
      • Erweitern Sie die Seitenleiste
      • Wählen Sie das Symbol Vorschau in der linken Seitenleiste
      • Die JSON-Darstellung, die nach Adobe Target exportiert wird, wird in der Hauptansicht angezeigt

  5. Melden Sie sich bei Adobe Experience Cloud als eine Person in der Rolle „Editor“ für Adobe Target an

  6. Wählen Sie in Experience Cloud oben rechts in der Produktauswahl die Option Target, um Adobe Target zu öffnen

  7. Vergewissern Sie sich, dass der Standard-Arbeitsbereich im Arbeitsbereich-Umschalter oben rechts ausgewählt ist

  8. Wählen Sie die Registerkarte Angebote in der oberen Navigationsleiste

  9. Wählen Sie das Dropdown-Menü Typ und wählen Sie Inhaltsfragmente

  10. Überprüfen Sie, ob das aus AEM exportierte Inhaltsfragment in der Liste angezeigt wird

    • Bewegen Sie den Mauszeiger über das Angebot und wählen Sie die Schaltfläche Ansicht
    • Überprüfen Sie die Angebotsinformationen und sehen Sie den AEM-Deep-Link, der das Inhaltsfragment direkt im AEM-Author-Service öffnet

video poster

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

Target-Aktivität mit Inhaltsfragmentangeboten activity

In Adobe Target kann eine Aktivität erstellt werden, die die JSON-Ausgabe des Inhaltsfragmentangebots als Inhalt verwendet und so personalisierte Erlebnisse in der Headless-App mit in AEM erstellten und verwalteten Inhalten ermöglicht.

In diesem Beispiel verwenden wir eine einfache A/B-Aktivität, es kann aber jede Target-Aktivität verwendet werden.

Erweitern für Schritt-für-Schritt-Anweisungen

  1. Wählen Sie die Registerkarte Aktivitäten in der oberen Navigationsleiste aus

  2. Wählen Sie + Aktivität erstellen, und wählen Sie dann die Art der zu erstellenden Aktivität

    • In diesem Beispiel wird ein einfacher A/B-Test erstellt – Inhaltsfragmentangebote unterstützen aber jeden Aktivitätstyp

  3. Im Assistenten Aktivität erstellen:

    • Wählen Sie Web aus
    • In Experience Composer auswählen wählen Sie Formular aus
    • Wählen Sie unter Arbeitsbereich auswählen die Option Standardarbeitsbereich aus
    • Wählen Sie unter Eigenschaft wählen die Eigenschaft aus, in der die Aktivität verfügbar ist, oder wählen Sie Keine Eigenschaftseinschränkungen, damit sie in allen Eigenschaften verwendet werden kann
    • Wählen Sie Weiter, um die Aktivität zu erstellen

  4. Benennen Sie die Aktivität um, indem Sie oben links Umbenennen wählen

    • Geben Sie der Aktivität einen aussagekräftigen Namen

  5. Legen Sie im ersten Erlebnis Speicherort 1 für die Zielaktivität fest

    • In diesem Beispiel wählen Sie einen benutzerdefinierten Speicherort namens wknd-adventure-promo

  6. Wählen Sie unter Inhalt den Standardinhalt aus, und wählen Sie Inhaltsfragment ändern

  7. Wählen Sie das exportierte Inhaltsfragment aus, das für dieses Erlebnis bereitgestellt werden soll, und wählen Sie Fertig

  8. Überprüfen Sie das JSON des Inhaltsfragmentangebots im Textbereich des Inhalts. Dies ist dasselbe JSON, das im AEM-Author-Service über die Aktion „Vorschau“ des Inhaltsfragments verfügbar ist.

  9. Fügen Sie in der linken Leiste ein Erlebnis hinzu und wählen Sie ein anderes Inhaltsfragmentangebot aus, das bereitgestellt werden soll

  10. Wählen Sie Weiter, und konfigurieren Sie die für die Aktivität erforderlichen Regeln für die Zielerfassung

    • In diesem Beispiel belassen Sie den A/B-Test bei einer manuellen 50/50-Aufteilung

  11. Wählen Sie Weiter und vervollständigen Sie die Aktivitätseinstellungen

  12. Wählen Sie Speichern und schließen und geben Sie der Datei einen aussagekräftigen Namen

  13. Wählen Sie in der Aktivität in Adobe Target die Option Aktivieren aus dem Dropdown-Menü „Inaktiv/Aktivieren/Archivieren“ oben rechts

Die Adobe Target-Aktivität, die auf den Speicherort wknd-adventure-promo abzielt, kann jetzt in eine AEM Headless-Anwendung integriert und angezeigt werden.

video poster

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

Experience Platform-Datenstrom-ID datastream-id

Eine Adobe Experience Platform-Datenstrom-ID ist für AEM Headless-Anwendungen erforderlich, um mit Adobe Target unter Verwendung des Adobe Web SDK zu interagieren.

Erweitern für Schritt-für-Schritt-Anweisungen

  1. Navigieren Sie zu Adobe Experience Cloud

  2. Öffnen Sie Experience Platform

  3. Wählen Sie Datenerfassung > Datenströme und wählen Sie Neuer Datenstrom

  4. Geben Sie im Assistenten für neue Datenströme Folgendes ein:

    • Name: AEM Target integration
    • Beschreibung: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • Ereignisschema: Leave blank

  5. Wählen Sie Speichern aus

  6. Wählen Sie Service hinzufügen aus

  7. Wählen Sie unter Service die Option Adobe Target

    • Aktiviert: Ja
    • Eigenschafts-Token: Leer lassen
    • Zielumgebungs-ID: Leer lassen
      • Die Zielumgebung kann in Adobe Target unter Administration > Hosts festgelegt werden
    • Target-Drittanbieter-ID-Namespace: Leer lassen

  8. Wählen Sie Speichern aus

  9. Kopieren Sie auf der rechten Seite die Datenstrom-ID für die Verwendung im Konfigurationsaufruf Adobe Web SDK

video poster

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

Hinzufügen der Personalisierung zu einer AEM Headless-App code

In diesem Tutorial geht es um die Personalisierung einer einfachen React-App mit Inhaltsfragmentangeboten in Adobe Target über das Adobe Experience Platform Web SDK. Dieser Ansatz kann verwendet werden, um jedes JavaScript-basierte Web-Erlebnis zu personalisieren.

Android™- und iOS-Mobilgeräte können mit dem Adobe Mobile SDK nach ähnlichen Mustern personalisiert werden.

Voraussetzungen

  • Node.js 14
  • Git
  • WKND Shared 2.1.4+ auf Author- und Publish-Service in AEM as a Cloud installiert

Setup

  1. Laden Sie den Quell-Code für die Beispiel-React-App von Github.com herunter

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

  2. Öffnen Sie die Code-Basis unter ~/Code/aem-guides-wknd-graphql/personalization-tutorial in Ihrer bevorzugten IDE

  3. Aktualisieren Sie den Host des AEM-Dienstes, mit dem die App eine Verbindung herstellen soll ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

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

  4. Führen Sie die App aus und stellen Sie sicher, dass sie eine Verbindung zum konfigurierten AEM-Dienst herstellt. Führen Sie in der Befehlszeile Folgendes aus:

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

  5. Installieren Sie das Adobe Web SDK als NPM-Paket.

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

    Das Web SDK kann im Code verwendet werden, um die JSON-Datei für Inhaltsfragmentangebote nach Ort der Aktivität abzurufen.

    Beim Konfigurieren des Web SDK sind zwei IDs erforderlich:

    • edgeConfigId, die Datenstrom-ID
    • orgId, die Adobe-Organisations-ID für AEM as a Cloud Service/Target, die unter Experience Cloud > Profil > Kontoinformationen > Aktuelle Organisations-ID gefunden werden kann

    Beim Aufrufen des Web SDK muss der Ort der Adobe Target-Aktivität (in unserem Beispiel wknd-adventure-promo) als Wert im Array decisionScopes festgelegt werden.

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

Implementierung

  1. Erstellen Sie eine React-Komponente AdobeTargetActivity.js, um Adobe Target-Aktivitäten anzuzeigen:

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

    Die React-Komponente „AdobeTargetActivity“ wird wie folgt aufgerufen:

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

  2. Erstellen Sie eine React-Komponente AdventurePromo.js, um das JSON des Abenteuers zu rendern, das Adobe Target bereitstellt.

    Diese React-Komponente nutzt die vollständig erweiterte JSON-Datei, die ein Abenteuer-Inhaltsfragment darstellt und im Werbestil angezeigt wird. Die React-Komponenten, die die von Adobe Target-Inhaltsfragment-Angeboten bereitgestellte JSON anzeigen, können je nach den in Adobe Target exportierten Inhaltsfragmenten so vielfältig und komplex sein wie erforderlich.

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

    Diese React-Komponente wird wie folgt aufgerufen:

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

  3. Fügen Sie die AdobeTargetActivity-Komponente zur Home.js der React-Anwendung über der Liste der Abenteuer hinzu.

    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. Wenn die React-Anwendung nicht ausgeführt wird, starten Sie sie mit npm run start neu.

    Öffnen Sie die React-Anwendung in zwei verschiedenen Browsern, damit der A/B-Test verschiedenen Erlebnisse für jeden Browser bereitstellen kann. Wenn in beiden Browsern dasselbe Abenteuerangebot angezeigt wird, versuchen Sie, einen der Browser zu schließen und erneut zu öffnen, bis das andere Erlebnis angezeigt wird.

    Die folgende Abbildung zeigt die beiden unterschiedlichen Inhaltsfragmentangebote, die für die wknd-adventure-promo-Aktivität angezeigt werden, basierend auf der Logik von Adobe Target.

    Erlebnisangebote

Herzlichen Glückwunsch!

Jetzt haben wir AEM as a Cloud Service für den Export von Inhaltsfragmenten in Adobe Target konfiguriert, die Inhaltsfragmentangebote in einer Adobe Target-Aktivität verwendet und diese Aktivität in einer AEM Headless-Anwendung angezeigt, um das Erlebnis zu personalisieren.

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