コードを使用して Customer Insights - Journeys マーケティング フォームを拡張する

  • [アーティクル]

注意

Dynamics 365 Marketing と Dynamics 365 Customer Insights は Customer Insights - Journeys と Customer Insights - Data になりました。 詳細については、Dynamics 365 Customer Insights のよくあるご質問 をご覧ください

Customer Insights - Journeys の新しい顧客には、リアルタイム体験機能のみが提供されます。 詳細については、既定のリアルタイム体験のインストールを参照してください。

この記事では、Customer Insights - Journeys マーケティング フォームを拡張して高度にカスタマイズする方法について解説します。

JavaScript API

Customer Insights - Journeys マーケティング フォームは、次の 2 つの部分で構成されます。

  1. 次に示すようなフォーム プレースホルダー:
<div>
  data-form-id='{msdynmkt_marketingformid}'
  data-form-api-url='https://{server}.dynamics.com/api/v1.0/orgs/{organizationid}/landingpageforms/forms/{msdynmkt_marketingformid}'
  data-cached-form-url='https://{server}.dynamics.com/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
</div>
  1. そして、ページが読み込まれるとフォーム プレースホルダーを強調表示するフォーム ローダー (DOMContentLoaded イベントをトリガーします):
<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js'></script>

カスタム イベント

カスタム イベント Description
d365mkt-beforeformload 実際のフォーム コンテンツを取得する前に、フォーム プレースホルダーの認識時にトリガーされます。
d365mkt-formrender フォーム コンテンツを取得した後でフォーム プレースホルダーに挿入する直前にトリガーされます。
d365mkt-afterformload フォームをプレースホルダーに挿入した後にトリガーされます。
d365mkt-formsubmit フォームの送信時にトリガーされ、キャンセルできます。
d365mkt-afterformsubmit フォームが送信されるとトリガーされる

フォーム送信 - d365mkt-formsubmit 詳細オブジェクト プロパティ

件名 タイプ 説明
Payload Object サーバーに送信されるフォームのプロパティを含むディクショナリ

フォーム送信後 - d365mkt-afterformsubmit 詳細オブジェクト プロパティ

件名 タイプ 説明
Success ブール型 サーバーが送信を受け入れたか、送信が拒否されたかを示します
Payload Object サーバーに送信されるフォームのプロパティを含むディクショナリ

標準イベント添付メカニズムを使用して、カスタム イベントを添付できます。

サンプル コード
<script>
document.addEventListener("d365mkt-beforeformload", function() { console.log("d365mkt-beforeformload") });
document.addEventListener("d365mkt-afterformload", function() { console.log("d365mkt-afterformload") });
document.addEventListener("d365mkt-formrender", function() { console.log("d365mkt-formrender") });
document.addEventListener("d365mkt-formsubmit", function(event) {
  // example of validation using form submit event - cancelling form submission unless first name is John 
  if (document.forms[0]["firstname"].value !== "John") { 
    event.preventDefault(); 
    console.log("blocked mkt-formsubmit"); 
    return;
  }
  console.log("mkt-formsubmit" + JSON.stringify(event.detail.payload)); 
});
document.addEventListener("d365mkt-afterformsubmit", function(event) {
  console.log("success - " + event.detail.successful);
  console.log("payload - " + JSON.stringify(event.detail.payload));
});
</script>

フォーム動作のカスタマイズ

ローダー スクリプトをページに挿入する前に構成スクリプトを含めることで、フォームの動作をカスタマイズできます。

<script>
var d365mkt = {
  // disables showing of progress bar during form loading
  hideProgressBar: true
};
</script>

JavaScript API を使用したマーケティング フォームのレンダリング

特に動的コンテンツの読み込みなどのシナリオでは DOMContentLoaded の待機が不便になる場合があります。 このような状況では createForm ヘルパー機能を使用できます。 createForm は div DOM 要素を即座に返し、バックグラウンドでフォーム コンテンツの取得をトリガーします (取得した瞬間にフォームをプレースホルダーに挿入します)。

<html>
  <body>
    <script src="https://cxpiusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js"></script>
    <div id="root"></div>
    <script>
      const root = document.getElementById('root');
      root.appendChild(d365mktforms.createForm(
        'formId',
        'formApiBaseUrl',
        'formUrl'));
    </script>
  </body>
</html>

React アプリケーションにマーケティング フォームを挿入する

React アプリケーション内でマーケティング フォームを使用できます。 フォーム ローダーは、アプリケーションに挿入できる d365mktforms.FormPlaceholder React コンポーネントを公開します。

<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/global/FormLoader/FormLoader.bundle.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(React.createElement(d365mktforms.FormPlaceholder, {
        formId:'{msdynmkt_marketingformid}',
        formApiBaseUrl:'https://{server-api}/api/v1.0/orgs/{organizationid}/landingpageforms',
        formUrl:'https://{server-load}/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
      }, null));
    </script>
  </body>
</html>

注意

{msdynmkt_marketingformid} をマーケティング フォーム エンティティの実際の識別子に、{organizationid} を組織の実際の識別子に、置き換える必要があります。 {server-} は、組織のサーバー エンドポイントを指し示す必要があります。 必要な情報を取得する最も簡単な方法は、フォーム公開オプションから "Javascript コードの取得" コマンドを使用することです。

ウィジェット属性 React コンポーネント プロパティ
data-form-id formId
data-form-api-url formApiBaseUrl
data-cached-form-url formUrl

注意

スクリプトとしてホストするフォームでのみ、Javascript API を使用できます。 iFrame ホスティング オプションには対応していません。