ドキュメントAEMAEM チュートリアルAEM as a Cloud Service のチュートリアル

[統合]{class="badge positive"}

AEM ヘッドレスと Target の統合

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 中級
  • 管理者
  • 開発者

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

AEM コンテンツフラグメントを Adobe Target に書き出すことで AEM ヘッドレスを Adobe Target と統合し、それらのコンテンツフラグメントと Adobe Experience Platform Web SDK の alloy.js を使用してヘッドレスエクスペリエンスをパーソナライズする方法を説明します。React WKND アプリを使用して、WKND アドベンチャーを促進するために、コンテンツフラグメントオファーを使用してパーソナライズされた Target アクティビティをエクスペリエンスに追加する方法を探索します。

video poster

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

このチュートリアルでは、AEM と Adobe Target の設定に関する手順を説明します。

  1. AEM オーサーでの Adobe Target の Adobe IMS 設定の作成
  2. AEM オーサーでの Adobe Target Cloud Service の作成
  3. AEM オーサーでの AEM Assets フォルダーへの Adobe Target Cloud Service の適用
  4. Adobe Admin Console での Adobe Target Cloud Service の権限
  5. AEM オーサーから Target へのコンテンツフラグメントの書き出し
  6. Adobe Target でのコンテンツフラグメントオファーを使用したアクティビティの作成
  7. Experience Platform での Experience Platform データストリームの作成
  8. Adobe Web SDK を使用して、パーソナライゼーションを React ベースの AEM ヘッドレスアプリに統合します。

Adobe IMS 設定 adobe-ims-configuration

AEM と Adobe Target 間の認証を容易にする Adobe IMS 設定。

Adobe IMS 設定の作成方法に関する詳しい手順については、ドキュメントを参照してください。

video poster

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

Adobe Target Cloud Service adobe-target-cloud-service

Adobe Target Cloud Service は、コンテンツフラグメントを Adobe Target に書き出しやすくするために、AEM で作成されます。

Adobe Target Cloud Service を作成する手順については、ドキュメントを参照してください。

video poster

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

アセットフォルダーの設定 configure-asset-folders

コンテキスト対応設定で設定された Adobe Target Cloud Service は、Adobe Target に書き出すコンテンツフラグメントを含む AEM Assets フォルダー階層に適用する必要があります。

詳しい手順については、展開してください
  1. AEM オーサーサービス ​に DAM 管理者としてログインします
  2. アセット／ファイル ​に移動し、/conf が適用されているアセットフォルダーを見つけます
  3. アセットフォルダーを選択し、アクションバーの「プロパティ」を選択します
  4. 「Cloud Services」タブを選択します
  5. クラウド設定が、Adobe Target Cloud Services 設定を含むコンテキスト対応設定（/conf）に設定されていることを確認します。
  6. Cloud Service 設定 ​ドロップダウンリストから「Adobe Target」を選択します。
  7. 右上の「保存して閉じる」を選択します。

video poster

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

AEM Target 統合の権限 permission

コンテンツフラグメントを Adobe Target に書き出すには、developer.adobe.com プロジェクトとして表示される Adobe Target 統合に、製品​ 編集者 ​の役割を Adobe Admin Console で付与する必要があります。

詳しい手順については、展開してください
  1. Adobe Admin Console で、Adobe Target 製品を管理できるユーザーとして Experience Cloud にログインします。
  2. Adobe Admin Console を開きます。
  3. 「製品」を選択してから、Adobe Target を開きます。
  4. 「製品プロファイル」タブで、「DefaultWorkspace」を選択します。
  5. 「API 資格情報」タブを選択します。
  6. このリストで developer.adobe.com アプリを見つけ、そのアプリの「製品の役割」を​ 編集者 ​に設定します。

video poster

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

Target へのコンテンツフラグメントの書き出し export-content-fragments

設定済みの AEM Assetsフォルダー階層の下に存在するコンテンツフラグメントは、コンテンツフラグメントオファーとして Adobe Target に書き出すことができます。これらのコンテンツフラグメントオファーは、Target における特殊な形式の JSON オファーであり、Target アクティビティで使用して、パーソナライズされたエクスペリエンスをヘッドレスアプリで提供できます。

詳しい手順については、展開してください

  1. AEM オーサー ​に DAM ユーザーとしてログインします。

  2. アセット／ファイル ​に移動し、「Adobe Target 有効」フォルダーの下で、JSON として Target に書き出すコンテンツフラグメントを見つけます。

  3. Adobe Target に書き出すコンテンツフラグメントを選択します。

  4. 上部のアクションバーの「Adobe Target オファーに書き出し」を選択します。

    • このアクションは、コンテンツフラグメントの完全にハイドレートされた JSON 表現を、「コンテンツフラグメントオファー」として Adobe Target に書き出します。

    • 完全にハイドレートされた JSON 表現を AEM で確認できます。

      • コンテンツフラグメントを選択します。
      • サイドパネルを展開します。
      • 左側のパネルの「プレビュー」アイコンを選択します。
      • Adobe Target に書き出される JSON 表現がメインビューに表示されます。

  5. Adobe Target の編集者の役割を持つユーザーで Adobe Experience Cloud にログインします。

  6. Experience Cloud で、右上の製品スイッチャーから「Target」を選択して、Adobe Target を開きます。

  7. 右上の​ ワークスペーススイッチャー ​でデフォルトのワークスペースが選択されていることを確認します。

  8. 上部のナビゲーションで「オファー」タブを選択します。

  9. 「タイプ」ドロップダウンを選択し、「コンテンツフラグメント」を選択します。

  10. AEM から書き出したコンテンツフラグメントがリストに表示されることを確認します。

    • オファーにポインタを合わせて、「表示」ボタンを選択します。
    • オファー情報 ​を確認し、AEM オーサーサービスでコンテンツフラグメントを直接開く AEM ディープリンク ​を参照します。

video poster

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

コンテンツフラグメントオファーを使用した Target アクティビティ activity

Adobe Target では、コンテンツフラグメントオファー JSON をコンテンツとして使用するアクティビティを作成できるので、AEM で作成および管理されたコンテンツを使用するヘッドレスアプリで、パーソナライズされたエクスペリエンスを提供できます。

この例では、単純な A/B アクティビティを使用しますが、任意の Target アクティビティを使用できます。

詳しい手順については、展開してください

  1. 上部のナビゲーションで「アクティビティ」タブを選択します。

  2. 「+ アクティビティを作成」を選択したあと、作成するアクティビティのタイプを選択します。

    • この例では、単純な A/B テスト ​を作成しますが、コンテンツフラグメントオファーはあらゆるタイプのアクティビティを強化できます。

  3. アクティビティを作成 ​ウィザードで以下を行います。

    • 「Web」を選択します。
    • Experience Composer を選択 ​で「フォーム」を選択します。
    • ワークスペースを選択 ​で「デフォルトのワークスペース」を選択します。
    • プロパティを選択 ​で、アクティビティを使用できるプロパティを選択するか、「プロパティの制限なし」を選択してすべてのプロパティで使用できるようにします。
    • 「次へ」を選択して、アクティビティを作成します。

  4. 左上の「名前変更」を選択して、アクティビティの名前を変更します。

    • アクティビティに意味のある名前を付けます。

  5. 初期のエクスペリエンスで、ターゲットとするアクティビティの「場所 1」を設定します。

    • この例では、wknd-adventure-promo という名前のカスタムの場所をターゲットにします。

  6. コンテンツ ​の下の「デフォルトコンテンツ」を選択し、「コンテンツフラグメントを変更」を選択します。

  7. このエクスペリエンス用に書き出したコンテンツフラグメントを選択し、「完了」を選択します。

  8. コンテンツテキスト領域でコンテンツフラグメントオファー JSON を確認します。これは、コンテンツフラグメントのプレビューアクションを使用して AEM オーサーサービスで入手できる JSON と同じです。

  9. 左側のパネルで、エクスペリエンスを追加し、提供する別のコンテンツフラグメントオファーを選択します。

  10. 「次へ」を選択し、アクティビティの必要に応じてターゲティングルールを設定します。

    • この例では、A/B テストを手動で 50/50 に分割したままにします。

  11. 「次へ」を選択し、アクティビティの設定を完了します。

  12. 「保存して閉じる」を選択し、意味のある名前を付けます。

  13. Adobe Target のアクティビティで、右上の非アクティブ／アクティベート／アーカイブドロップダウンから「アクティベート」を選択します。

wknd-adventure-promo の場所をターゲットにする Adobe Target アクティビティを AEM ヘッドレスアプリに統合して公開できるようになりました。

video poster

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

Experience Platform データストリーム ID datastream-id

AEM ヘッドレスアプリで Adobe Web SDK を使用して Adobe Target とやり取りするには、Adobe Experience Platform データストリーム ID が必要です。

詳しい手順については、展開してください

  1. Adobe Experience Cloud に移動します。

  2. Experience Platform を開きます。

  3. データ収集／データストリーム ​を選択し、「新しいデータストリーム」を選択します。

  4. 新しいデータストリームウィザードで、次のように入力します。

    • 名前：AEM Target integration
    • 説明：Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • イベントスキーマ：Leave blank

  5. 「保存」を選択します

  6. 「サービスを追加」を選択します。

  7. サービス ​で「Adobe Target」を選択します

    • 有効：はい
    • プロパティトークン：空白のままにします
    • ターゲット環境 ID：空白のままにします
      • ターゲット環境は、Adobe Target の​ 管理／ホスト ​で設定できます。
    • ターゲットサードパーティ ID 名前空間：空白のままにします

  8. 「保存」を選択します

  9. 右側で、Adobe Web SDK 設定呼び出しで使用する​ データストリーム ID をコピーします。

video poster

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

AEM ヘッドレスアプリへのパーソナライゼーションの追加 code

このチュートリアルでは、Adobe Experience Platform Web SDK 経由で Adobe Target のコンテンツフラグメントオファーを使用して、シンプルな React アプリをパーソナライズする方法を説明します。このアプローチを使用すると、JavaScript ベースの web エクスペリエンスをパーソナライズできます。

Android™ および iOS のモバイルエクスペリエンスは、アドビの Mobile SDK を使用して類似したパターンに従ってパーソナライズできます。

前提条件

  • Node.js 14
  • Git
  • WKND Shared 2.1.4+ が、クラウドオーサーおよびパブリッシュサービスとして AEM にインストールされている

セットアップ

  1. Github.com からサンプル React アプリのソースコードをダウンロードします。

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

  2. お気に入りの IDE で ~/Code/aem-guides-wknd-graphql/personalization-tutorial にあるコードベースを開きます。

  3. アプリを ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development に接続する AEM サービスのホストを更新します。

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

  4. アプリを実行し、設定済みの AEM サービスに接続していることを確認します。コマンドラインから、次を実行します。

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

  5. Adobe Web SDK を NPM パッケージとしてインストールします。

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

    Web SDK をコード内で使用すると、アクティビティの場所別にコンテンツフラグメントオファー JSON を取得できます。

    Web SDK を設定する場合、次の 2 つの ID が必要です。

    • edgeConfigId：データストリーム ID
    • orgId：Experience Cloud／プロファイル／アカウント情報／現在の組織 ID で確認できる AEM as a Cloud Service／Target アドビ組織 ID

    Web SDK を呼び出す際は、Adobe Target アクティビティの場所（この例では、wknd-adventure-promo）を、decisionScopes 配列の値として設定する必要があります。

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

実装

  1. React コンポーネント AdobeTargetActivity.js を作成して、Adobe Target アクティビティを表示します。

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

    AdobeTargetActivity React コンポーネントは、次のように呼び出します。

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

  2. React コンポーネント AdventurePromo.js を作成して、Adobe Target が提供するアドベンチャー JSON をレンダリングします。

    この React コンポーネントは、アドベンチャーコンテンツのフラグメントを表す完全にハイドレートされた JSON を取得し、プロモーション方法で表示します。Adobe Target コンテンツフラグメントオファーから提供される JSON を表示する React コンポーネントは、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%;
}

    この React コンポーネントは、次のように呼び出されます。

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

  3. AdobeTargetActivity コンポーネントを、アドベンチャーのリストの上にある React アプリの Home.js に追加します。

    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. React アプリが実行されていない場合は、npm run start を使用して再起動します。

    2 つの異なるブラウザーで React アプリを開き、A/B テストが各ブラウザーに異なるエクスペリエンスを提供できるようにします。両方のブラウザーに同じアドベンチャーオファーが表示される場合は、もう一方のエクスペリエンスが表示されるまで、ブラウザーの 1 つを閉じて再度開きます。

    次の画像は、Adobe Target のロジックに基づいて、wknd-adventure-promo アクティビティに対して表示される 2 つの異なるコンテンツフラグメントオファーを示しています。

    エクスペリエンスオファー

おめでとうございます。

コンテンツフラグメントを Adobe Target に書き出すように AEM as a Cloud Service を設定し、Adobe Target アクティビティでコンテンツフラグメントオファーを使用し、このアクティビティを AEM ヘッドレスアプリに表示して、エクスペリエンスをパーソナライズしました。

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