ドキュメントExperience Platformデータ収集

セレクターなしでHTML オファーをレンダリング

最終更新日： 2026年6月16日

作成対象：

  • Developer

このパターンは、提案書にHTML コンテンツが含まれている場合に使用しますが、その提案書を適用する場所（セレクター）と適用方法（アクションタイプ）を指定する必要があります。 これは、スコープでキーが設定されたmetadata オブジェクトを使用してapplyPropositionsを呼び出すことによって実行できます。 サポートされているactionType値はsetHtml、replaceHtml、appendHtmlです。

​1. ちらつきの管理（オプション）

レンダリング中にコンテンツを非表示にする場合は、レンダリング完了後にコンテンツを表示する責任があります。 詳しくは、ちらつきの管理を参照してください。

​2. レンダリングするスコープの提案をリクエスト

alloy("sendEvent", {
  personalization: {
    decisionScopes: ["discount", "salutation"]
  },
  xdm: { }
}).then(({ propositions = [] }) => {
  // Render in the next step
});

詳しくは、personalization.decisionScopesを参照してください。

​3. applyPropositions個のメタデータを含むオファーのレンダリング

alloy("sendEvent", {
  personalization: {
    decisionScopes: ["discount", "salutation"]
  },
  xdm: { }
}).then(({ propositions = [] }) => {
  return alloy("applyPropositions", {
    propositions,
    metadata: {
      salutation: {
        selector: "#salutation",
        actionType: "setHtml"
      },
      discount: {
        selector: "#daily-special",
        actionType: "replaceHtml"
      }
    }
  }).then(({ propositions: renderedPropositions = [] }) => {
    return { renderedPropositions };
  });
});

​4. レンダリングされた提案の表示イベントを記録

applyPropositionsの呼び出し時に表示イベントが自動的に送信されません。 レンダリングが完了したら、レンダリングされた提案を参照するsendEvent呼び出しを使用します。

function toDisplayPayload(propositions) {
  return propositions.map((p) => ({
    id: p.id,
    scope: p.scope,
    scopeDetails: p.scopeDetails
  }));
}

alloy("sendEvent", {
  personalization: {
    decisionScopes: ["discount", "salutation"]
  },
  xdm: { }
}).then(({ propositions = [] }) => {
  return alloy("applyPropositions", {
    propositions,
    metadata: {
      salutation: { selector: "#salutation", actionType: "setHtml" },
      discount: { selector: "#daily-special", actionType: "replaceHtml" }
    }
  }).then(({ propositions: renderedPropositions = [] }) => {
    return alloy("sendEvent", {
      xdm: {
        _experience: {
          decisioning: {
            propositions: toDisplayPayload(renderedPropositions),
            propositionEventType: { display: 1 }
          }
        }
      }
    });
  });
});

詳しくは、表示イベントの管理を参照してください。

TIP
​ トップおよびボトムのページイベント ​を使用する場合、この「レコード表示」呼び出しは一般的にボトム sendEvent呼び出しに実装されます。

​5. 再レンダリング

実装で後で再レンダリングが必要な場合（シングルページアプリケーションなど）、同じ提案とメタデータでapplyPropositionsを再度呼び出します。

alloy("applyPropositions", {
  propositions,
  metadata: {
    discount: { selector: "#daily-special", actionType: "replaceHtml" }
  }
});

再描画する表示イベントを記録する必要がある場合は、表示イベントの管理を参照してください。

recommendation-more-help
experience-platform-help-collection