Edge Decisioning API を使用したオファーの配信

概要と前提条件

Adobe Experience Platform Web SDK は、Adobe Experience Cloud のお客様が Experience Platform Edge Network を通じて Experience Cloud の様々なサービスを操作できるようにする、クライアントサイド JavaScript ライブラリです。

Experience Platform Web SDK では、意思決定管理を含む Adobe のパーソナライゼーションソリューションのクエリをサポートしており、API またはオファーライブラリを使用して作成した、パーソナライズされたオファーを取得およびレンダリングできます。詳しい手順については、オファーの作成についてのドキュメントを参照してください。

Platform Web SDK を使用して Offer Decisioning を実装するには、次の 2 つの方法があります。1 つ目は、開発者が対象の、web サイトやプログラミングに関する知識を必要とする方法です。もう 1 つは、Adobe Experience Platform のユーザーインターフェイスを使用して、HTML ページのヘッダーで参照する小さなスクリプトのみを必要とするオファーを設定する方法です。

Platform Web SDK を使用してパーソナライズされたオファーを配信する方法の詳細については、Offer Decisioning に関するドキュメントを参照してください。

メモ

現在、Adobe Experience Platform Web SDK での意思決定管理は、一部のユーザーに対する早期アクセスで利用いただけます。この機能は、一部の組織ではご利用いただけきません。

Adobe Experience Platform Web SDK

Platform Web SDK は、次の SDK を置き換えます。

  • Visitor.js
  • AppMeasurement.js
  • AT.js
  • DIL.js

SDK は、これらのライブラリを組み合わせることができず、最初から新しく実装されます。これを使用するには、まず次の手順に従う必要があります。

  1. 組織が SDK を使用するための適切な権限を持っていることと、権限を正しく設定していることを確認します。

  2. Adobe Experience Cloud のアカウントにある「データ収集」タブでデータストリームを設定します。

  3. SDK をインストールします。SDK ページのインストールに記載されているように、複数の方法があります。このページでは、様々な実装方法を使用して説明を続けます。

SDK を使用するには、スキーマおよびデータストリームを定義する必要があります。

オファーをパーソナライズするには、パーソナライズ機能やプロファイルを個別に設定する必要があります。

Offer Decisioning の SDK を設定するには、次の 2 つの手順に従います。

オプション 1 - Launch を使用したタグ拡張機能と実装のインストール

コーディングの経験が少ないユーザーにとって、より使いやすいオプションです。

  1. タグプロパティの作成

  2. 埋め込みコードの追加

  3. 「データストリーム」ドロップダウンから設定を選択し、作成したデータストリームを使用して、Platform Web SDK 拡張機能をインストールして設定します。詳しくは、拡張機能に関するドキュメントを参照してください。

    Adobe Experience Platform Web SDK

    拡張機能の設定

  4. 必要なデータ要素を作成します。少なくとも、Platform Web SDK ID マップおよび Platform Web SDK XDM オブジェクトデータ要素を作成する必要があります。

    ID マップ

    XDM オブジェクト

  5. ルールを作成します。

    Platform Web SDK のイベントの送信アクションを追加し、関連する decisionScopes をそのアクションの設定に追加します。

    オファーをレンダリング

    オファーをリクエスト

  6. 設定したすべての関連するルール、データ要素、拡張機能を含むライブラリを作成して公開します。

オプション 2 - 事前にビルドされたスタンドアロンバージョンを使用して手動で実装

Web SDK が事前にビルドされたスタンドアロンインストールを使用した Offer Decisioning を使用するために必要な手順を次に示します。このガイドは、SDK を初めて実装する場合を想定しています。そのため、すべての手順が当てはまるとは限りません。このガイドは、ある程度の開発経験も前提としています。

オプション 2 から次の JavaScript スニペットを含める:HTML ページの「<head> 」セクションに表示されるこのページのビルド済みスタンドアロンバージョン。

javascript
    <script>
        !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
        []).push(o),n[o]=function(){var u=arguments;return new Promise(
        function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
        (window,["alloy"]);
    </script>
    <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js" async></script>

SDK 設定をセットアップするには、アドビアカウント内から 2 つの ID(edgeConfigId および orgId)が必要です。edgeConfigId は、前提条件で設定する必要があるデータストリーム ID と同じです。

edgeConfigID やデータストリーム ID の検索には、データ収集に移動し、「データストリーム」を選択します。orgId を検索するには、自分のプロファイルに移動します。

このページの手順に従って、JavaScript で SDK を設定します。設定関数では、必ず edgeConfigId と orgId を使用します。このドキュメントでは、設定に存在するオプションのパラメーターについても説明します。最終的な設定は、次のようになります。

javascript
    alloy("configure", {
        "edgeConfigId": "12345678-0ABC-DEF-GHIJ-KLMNOPQRSTUV",
        "orgId":"ABCDEFGHIJKLMNOPQRSTUVW@AdobeOrg",
        "debugEnabled": true,
        "edgeDomain": "edge.adobedc.net",
        "clickCollectionEnabled": true,
        "idMigrationEnabled": true,
        "thirdPartyCookiesEnabled": true,
        "defaultConsent":"in"
    });

デバッグで使用する Debugger Chrome 拡張機能をインストールします。詳細はこちら https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob をご覧ください。

次に、デバッガー内でアカウントにログインします。次に、ログに移動し、正しいワークスペースに接続されていることを確認します。次に、オファーから base64 エンコードされたバージョンの決定範囲をコピーします。

Web サイトの編集時に、設定および sendEvent 関数と共にスクリプトを使用して、決定範囲を Adobe に送信します。

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    });

応答の処理方法の例については、次を参照してください。

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    }).then(function(result) {
        Object.entries(result).forEach(([key, value]) => {
            console.log(key, value);
        });
    });

デバッガーを使用して、Edge ネットワークに正常に接続されたことを確認できます。

メモ

ログの Edge への接続が表示されない場合は、広告ブロッカーを無効にする必要がある可能性があります。

オファーの作成方法および使用している書式に戻ります。決定で満たされた条件に基づいて、オファーが、Adobe Experience Platform 内で作成する際に指定した情報を含むユーザーに返されます。

この例では、返される JSON は次のようになります。

json
{
   "name":"ABC Test",
   "description":"This is a test offer",
   "link":"https://sampletesting.online/",
   "image":"https://sample-demo-URL.png"
}

応答オブジェクトを処理し、必要なデータを解析します。複数の決定範囲を 1 回の sendEvent 呼び出しで送信できるため、応答が若干異なって見える場合があります。

json
    {
        "id": "abrxgl843d913",
        "scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
        "items":
        [
            {
                "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                "etag": "1",
                "schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
                "data": {
                    "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                    "format": "application/json",
                    "language": [
                        "en-us"
                    ],
                    "content": "{\"name\":\"ABC Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
                }
            }
        ]
    }
]
}
json
{
    "propositions":
    [
    {
        "renderAttempted": false,
        "id": "e15ecb09-993e-4b66-93d8-0a4c77e3d913",
        "scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
        "items":
        [
            {
                "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                "etag": "1",
                "schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
                "data": {
                    "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                    "format": "application/json",
                    "language": [
                        "en-us"
                    ],
                    "content": "{\"name\":\"Claire Hubacek Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
                }
            }
        ]
    }
    ]
}

この例では、web ページでオファー固有の詳細を処理して使用するために必要なパスは result['decisions'][0]['items'][0]['data']['content'] です。

JS 変数を設定するには:

javascript
const offer = JSON.parse(result['decisions'][0]['items'][0]['data']['content']);

let offerURL = offer['link'];
let offerDescription = offer['description'];
let offerImageURL = offer['image'];

document.getElementById("offerDescription").innerHTML = offerDescription;
document.getElementById('offerImage').src = offerImageURL;

制限事項

キャッピングなど、一部のオファー制約は現在、モバイル Experience Edge ワークフローではサポートされていません。キャッピングフィールド値は、1 つのオファーをすべてのユーザーに対して提示できる回数を指定します。詳しくは、オファーへの制約の追加を参照してください。

このページ