14.3Offer decisioning用にAdobe Experience Platform Data Collection ClientプロパティとWeb SDKの設定を準備する

メモ

現在、Adobe Experience Platform Web SDK での Offer Decisioning の使用は、一部のユーザーが早期にアクセスできます。この機能は、すべての IMS 組織で使用できるわけではありません。

14.3.1データストリームの更新

演習0.2で、独自の​Datastream​を作成しました。 その後、ldap - Demo System Datastream​という名前を使用し、ldap​をLDAPに置き換えました。

この演習では、Datastream​が​Offer Decisioning​と連携するように設定する必要があります。

それには、https://experience.adobe.com/#/data-collection/に移動します。 そうすれば、これが見える。 「データストリーム」をクリックします。 Datastream​を検索します。 Datastream​をクリックして開きます。

WebSDK

そうすれば、これが見える。 「開発環境」をクリックします。

WebSDK

開発環境​には、Adobe Experience Platformの設定が表示されます。

WebSDK

Offer Decisioning​を有効にするには、Offer Decisioning​のチェックボックスをオンにします。

WebSDK

保存​をクリックします。

WebSDK

その後、あなたはここに戻る。 「ステージング環境」をクリックします。

WebSDK

Offer Decisioning​を有効にするには、Offer Decisioning​のチェックボックスをオンにします。

WebSDK

保存​をクリックします。

WebSDK

その後、あなたはここに戻る。 「実稼動環境」をクリックします。

WebSDK

Offer Decisioning​を有効にするには、Offer Decisioning​のチェックボックスをオンにします。

WebSDK

保存​をクリックします。

WebSDK

これで、Datastream​を​Offer Decisioning​で使用する準備が整いました。

14.3.2パーソナライズされたオファーを要求するためのAdobe Experience Platformデータ収集クライアントプロパティの設定

https://experience.adobe.com/#/data-collection/に移動し、クライアント​に移動します。 Adobe Experience Platformデータ収集クライアントのプロパティ(ldap - Demo System(DD/MM/YYYY)​という名前)を検索します。 Adobe Experience Platformデータ収集クライアントのプロパティをWeb用に開きます。

WebSDK

プロパティで、Rules​に移動し、ルール​All General Pages​を開きます。

WebSDK

クリックして、アクション AEP Web SDK — イベントを送信​を開きます。

WebSDK

そうすれば、これが見える。 判定範囲​のメニューオプションが表示されます。

WebSDK

EdgeとAdobe Experience Platformに送信されるリクエストごとに、1つ以上の​判定範囲​を指定できます。 判定範囲​は、次の2つの要素の組み合わせです。

  • 判定ID
  • プレースメント ID

まず、2つの要素を見つける場所を見てみましょう。

14.3.2.1 プレースメントIDの取得

プレースメントIDは、必要なアセットの場所とタイプを識別します。 例えば、LumaのWebサイトのホームページのヒーロー画像は、Web - ImageのプレースメントIDに対応します。

WebSDK

Webの配置IDを探すには、https://platform.adobe.comに移動します。

次に、「コンポーネント」に移動し、「配置」に移動します。 「Web - Image」をクリックして、詳細を確認します。

WebSDK

上の図に示すように、この例ではプレースメントIDはxcore:offer-placement:129048460001fd30です。 次の演習で必要になるように、 Web - Image用の配置の配置IDを書き留めます。

14.3.2.2 判定IDの取得

判定IDは、使用するパーソナライズされたオファーとフォールバックオファーの組み合わせを特定します。 前の練習では、独自のDecisionを作成し、ldap - Luma Decision​という名前を付けました。

ldapの判定IDを探すには、https://platform.adobe.comに移動します。

次に、Offersに移動し、Decisionsに移動します。 決定(ldap - Luma Decision​という名前)をクリックして選択します。

WebSDK

上の図に示すように、この例では、判定IDはxcore:offer-activity:1290525f4441fd6eです。 次の演習で必要になるように、判定ldap - Luma Decisionの判定IDを書き留めます。

判定範囲​を作成する必要がある2つの要素を取得したので、次の手順に進みます。この手順では、判定範囲のエンコードを行います。

14.3.2.3 BASE64エンコーディング

入力する必要がある​判定範囲​は、BASE64でエンコードされた文字列です。 BASE64でエンコードされたこの文字列は、以下に示すように、 配置IDと判定IDの組み合わせです。

{
  "activityId":"xcore:offer-activity:1290525f4441fd6e",
  "placementId":"xcore:offer-placement:129048460001fd30"
}

判定範囲​は、次の2つの方法で生成できます。

  • https://www.base64encode.org/のようなパブリックサービスを使用します。 前述のJSONコードを入力し、「エンコード」をクリックすると、BASE64エンコードされた文字列が下に表示されます。

    WebSDK

  • Adobe Experience PlatformからBASE64エンコードされた文字列を取得します。 これを行うには、https://platform.adobe.comに移動します。 次に、Decisionsに移動し、クリックしてDecisionを開きます。このDecision ldap - Luma Decision​という名前です。

    WebSDK

    ldap - Luma Decision​を開くと、この画面が表示されます。 配置Web - Imageを探し、コピー​ボタンをクリックします。 次に、「エンコードされた判定範囲」をクリックします。 これで、判定範囲​がクリップボードにコピーされます。

    WebSDK

次に、Launchに戻り、アクション​AEP Web SDK - Send Event​に移動します。

WebSDK

必ず「​を入力」オプションを選択し、BASE64でエンコードされた判定範囲を入力フィールドに貼り付けます。

WebSDK

AEP Web SDK - Send Event​で変更を保存するには、「変更を保持」をクリックします。

WebSDK

次に、「保存」または「ライブラリに保存」をクリックします。

WebSDK

Adobe Experience Platformデータ収集で、公開フロー​に移動し、コンテンツライブラリ​という名前の​開発ライブラリ​を開きます。 「+変更されたすべてのリソースを追加」をクリックし、「開発用に保存してビルド」をクリックします。 変更がデモWebサイトに公開されます。

WebSDK

一般ページ​を今読み込むたびに、Offer decisioningは、例えばデモWebサイトのホームページのように、該当するオファーの内容を評価し、表示するオファーの詳細を含む応答をWebサイトに返します。 Webサイトにオファーを表示するには、追加の設定が必要です。その設定は、次の手順でおこないます。

14.3.3 Adobe Experience Platformデータ収集クライアントプロパティを設定し、パーソナライズされたオファーを受け取って適用する

https://experience.adobe.com/#/data-collection/に移動し、プロパティ​に移動します。 Adobe Experience Platformデータ収集クライアントのプロパティ(ldap - Demo System(DD/MM/YYYY)​という名前)を検索します。 Adobe Experience Platformデータ収集クライアントのプロパティをWeb用に開きます。

WebSDK

プロパティで、Rules​に移動します。

WebSDK

Add Rule」をクリックします。

WebSDK

ルールの名前として、Homepage - Decision Received​を使用します。

WebSDK

14.3.3.1イベント

イベント」の下の「+追加」をクリックして、新しいイベントを追加します。

WebSDK

イベント設定​には、次のオプションを選択します。

  • 拡張機能: AEP Web SDK
  • イベントタイプ: 受信した決定

WebSDK

変更を保存」をクリックします。

WebSDK

14.3.3.2条件

これが見えます 条件​の下の​+追加​をクリックして、新しい条件を追加します。

WebSDK

条件設定​には、次のオプションを選択します。

  • 論理タイプ: 標準
  • 拡張機能コア
  • 条件タイプ: 値の比較
  • 名前: コア — 値の比較
  • 次の場合にtrueを返します。
    • %pageName%
    • Equals
    • Luma Home

WebSDK

変更を保存」をクリックします。

WebSDK

14.3.3.3.アクション

そうすれば、これが見える。 ACTIONS​の下の「+追加」をクリックして、新しいアクションを追加します。

WebSDK

アクション設定​に対して、次のオプションを選択します。

  • 拡張機能コア
  • アクションタイプカスタムコード
  • 言語: JavaScript

次に、「エディターを開く」をクリックします。

WebSDK

エディターに次のコードを貼り付けます。

event.decisions.forEach(function(payload) {
  payload.items.forEach(function(item) {
    console.log(">>>>> Offer Decisioning Web SDK Response", item);
    document.getElementById("brandhero").src = item.data.deliveryURL;
  });
});

WebSDK

保存」をクリックします。

WebSDK

変更を保存」をクリックします。

WebSDK

次に、「保存」または「ライブラリに保存」をクリックします。

WebSDK

Adobe Experience Platformデータ収集で、公開フロー​に移動し、コンテンツライブラリ​という名前の​開発ライブラリ​を開きます。 「+変更されたすべてのリソースを追加」をクリックし、「開発用に保存してビルド」をクリックします。 変更がデモWebサイトに公開されます。

WebSDK

この変更により、Adobe Experience Platformデータ収集のこのルールは、Web SDK応答の一部であるOffer decisioningからの応答をリッスンし、応答を受け取ると、オファーの画像がホームページに表示されるようになります。

LumaデモWebサイトを見ると、この画像が置き換えられます。

WebSDK

デフォルトのLumaヒーロー画像の代わりに、次のようなオファーが表示されます。

WebSDK

次の演習では、ステップバイステップのデモシナリオを実行します。

次の手順:14.4デモWebサイトを使用して判断をテストします。

モジュール14に戻る

すべてのモジュールに戻る

このページ