パーソナライズされたコンテンツのレンダリング

Adobe Experience Platform Web SDKは、Adobe TargetやOffer decisioningなど、Adobe時のパーソナライゼーションソリューションからのパーソナライズされたコンテンツの取得をサポートします。 Visual Experience Composerを使用してAdobe Target内で作成されたコンテンツは、SDKで自動的に取得およびレンダリングできます。フォームベースのExperience ComposerまたはOffer decisioningを使用してAdobe Target内で作成されたコンテンツは、SDKで自動的にレンダリングできません。代わりに、SDKを使用してこのコンテンツを要求し、手動でコンテンツをレンダリングする必要があります。

コンテンツの自動レンダリング

イベントをサーバーに送信する際に、renderDecisionsオプションをtrueに設定できます。これにより、SDKは、自動レンダリングの対象となるパーソナライズされたコンテンツを自動的にレンダリングします。

alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
    "commerce": {
      "order": {
        "purchaseID": "a8g784hjq1mnp3",
        "purchaseOrderNumber": "VAU3123",
        "currencyCode": "USD",
        "priceTotal": 999.98
      }
    }
  }
});

パーソナライズされたコンテンツのレンダリングは非同期的なので、特定のコンテンツのレンダリングが完了するタイミングを前提にしないでください。

コンテンツの手動レンダリング

パーソナライゼーションコンテンツにアクセスするには、コールバック関数を指定できます。この関数は、SDKがサーバーから正常な応答を受け取った後に呼び出されます。コールバックにはresultオブジェクトが提供され、このオブジェクトには、返されたパーソナライゼーションコンテンツを含むpropositionsプロパティを含めることができます。イベントを送信する際にコールバック関数を提供する方法の例を以下に示します。

alloy("sendEvent", {
    xdm: {}
  }).then(function(result) {
    if (result.propositions) {
      // Manually render propositions
    }
  });

この例では、result.propositionsが存在する場合、はイベントに関連するパーソナライゼーションの提案を含む配列です。デフォルトでは、自動レンダリングの対象となる提案のみが含まれます。

propositions配列は次の例のようになります。

[
  {
    "id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
    "scope": "__view__",
    "items": [
      {
        "id": "11223344",
        "schema": "https://ns.adobe.com/personalization/dom-action",
        "data": {
          "content": "<h2 style=\"color: yellow\">An HTML proposition.</h2>",
          "selector": "#hero",
          "type": "setHtml"
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  },
  {
    "id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
    "scope": "__view__",
    "items": [
      {
        "id": "11223345",
        "schema": "https://ns.adobe.com/personalization/dom-action",
        "data": {
          "content": "<h2 style=\"color: yellow\">Another HTML proposition.</h2>",
          "selector": "#sidebar",
          "type": "setHtml"
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  }
]

この例では、renderDecisionsコマンドの実行時にtrueオプションが設定されていないので、SDKはコンテンツの自動レンダリングを試みませんでした。 sendEventただし、SDKは、自動レンダリングの対象となるコンテンツを自動的に取得し、必要に応じて手動でレンダリングするようにユーザーに提供します。各提案オブジェクトのrenderAttemptedプロパティがfalseに設定されていることに注意してください。

代わりにrenderDecisionsオプションをtrueに設定してイベントを送信した場合、SDKは（前述のように）自動レンダリングの対象となる提案をレンダリングしようとしました。その結果、各提案オブジェクトのrenderAttemptedプロパティがtrueに設定されます。この場合、これらの提案を手動でレンダリングする必要はありません。

これまでは、自動レンダリングの対象となるパーソナライゼーションコンテンツ(Adobe TargetのVisual Experience Composerを使用して作成されたすべてのコンテンツ)についてのみ説明しました。自動レンダリングの対象とならないパーソナライゼーションコンテンツを取得するには、イベントの送信時にdecisionScopesオプションを設定して、コンテンツをリクエストする必要があります。スコープとは、サーバーから取得する特定の提案を識別する文字列です。

次に例を示します。

alloy("sendEvent", {
    xdm: {},
    decisionScopes: ['salutation', 'discount']
  }).then(function(result) {
    if (result.propositions) {
      // Manually render propositions
    }
  });

この例では、提案がsalutationスコープまたはdiscountスコープに一致するサーバー上で見つかった場合、提案が返され、result.propositions配列に含まれます。 renderDecisionsオプションやdecisionScopesオプションの設定方法に関係なく、自動レンダリングの条件を満たす提案は引き続きpropositions配列に含まれます。 propositions配列の例を次に示します。

[
  {
    "id": "AT:cZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ2",
    "scope": "salutation",
    "items": [
      {
        "schema": "https://ns.adobe.com/personalization/json-content-item",
        "data": {
          "id": "4433221",
          "content": {
            "salutation": "Welcome, esteemed visitor!"
          }
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  },
  {
    "id": "AT:FZJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ0",
    "scope": "discount",
    "items": [
      {
        "schema": "https://ns.adobe.com/personalization/html-content-item",
        "data": {
          "id": "4433222",
          "content": "<div>50% off your order!</div>",
          "format": "text/html"
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  },
  {
    "id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
    "scope": "__view__",
    "items": [
      {
        "id": "11223344",
        "schema": "https://ns.adobe.com/personalization/dom-action",
        "data": {
          "content": "<h2 style=\"color: yellow\">An HTML proposition.</h2>",
          "selector": "#hero",
          "type": "setHtml"
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  },
  {
    "id": "AT:PyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ8",
    "scope": "__view__",
    "items": [
      {
        "id": "11223345",
        "schema": "https://ns.adobe.com/personalization/dom-action",
        "data": {
          "content": "<h2 style=\"color: yellow\">Another HTML proposition.</h2>",
          "selector": "#sidebar",
          "type": "setHtml"
        },
        "meta": {}
      }
    ],
    "renderAttempted": false
  }
]

この時点で、適切に提案コンテンツをレンダリングできます。この例では、discount範囲に一致する提案は、Adobe TargetのフォームベースのExperience Composerを使用して構築されたHTML提案です。ページ上にIDがdaily-specialの要素があり、discount提案からdaily-special要素にコンテンツをレンダリングする場合は、次の手順を実行します。

resultオブジェクトから提案を抽出します。
各提案をループし、スコープdiscountの提案を探します。
提案が見つかった場合は、提案の各項目をループし、HTMLコンテンツの項目を探します。（想定するよりも確認する方が良い）。
HTMLコンテンツを含む項目が見つかった場合は、ページ上でdaily-special要素を探し、そのHTMLをパーソナライズされたコンテンツに置き換えます。

コードは次のようになります。

alloy("sendEvent", {
  xdm: {},
  decisionScopes: ['salutation', 'discount']
}).then(function(result) {
  var propositions = result.propositions;

  var discountProposition;
  if (propositions) {
    // Find the discount proposition, if it exists.
    for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      if (proposition.scope === "discount") {
        discountProposition = proposition;
        break;
      }
    }
  }

  var discountHtml;
  if (discountProposition) {
    // Find the item from proposition that should be rendered.
    // Rather than assuming there a single item that has HTML
    // content, find the first item whose schema indicates
    // it contains HTML content.
    for (var j = 0; j < discountProposition.items.length; j++) {
      var discountPropositionItem = discountProposition.items[i];
      if (discountPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
        discountHtml = discountPropositionItem.data.content;
        break;
      }
    }
  }

  if (discountHtml) {
    // Discount HTML exists. Time to render it.
    var dailySpecialElement = document.getElementById("daily-special");
    dailySpecialElement.innerHTML = discountHtml;
  }
});

ヒント

Adobe Targetを使用する場合、スコープはサーバー上のmboxに対応しますが、個々にリクエストされるのではなく、すべて同時にリクエストされる点が異なります。グローバルmboxは常に返されます。

フリッカーの管理

SDKは、パーソナライゼーションプロセス中にちらつきを管理する機能を提供します。

パーソナライズされたコンテンツのレンダリング

コンテンツの自動レンダリング

コンテンツの手動レンダリング

フリッカーの管理

adobe.com 上のリソース

このページ

次を表示：

トレーニング

ドキュメント

コミュニティ

サポート

リソース

アドビアカウント

Adobe