コードを使用してアウトバウンドマーケティングフォームを拡張する

[アーティクル]
10/11/2023

注意

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

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

重要

この記事は、2025 年 6 月 30 日に製品から削除されるアウトバウンドマーケティングにのみ適用されます。 中断を避けるため、この日付より前にリアルタイムの旅程に移行してください。詳細: 切り替えの概要

マーケティングフォームでは、フォームレイアウトに配置される入力フィールドのセットを定義します。おそらく、必要に応じてさまざまなマーケティングページすべてに配置できる再利用可能なフォームの小さなライブラリを作成します。特定のマーケティングページにマーケティングのフォームを追加するには、フォーム要素を使用して、対象とするページに対してのみ適用されるフォームの配置とローカル設定の選択を行います。詳細情報: アウトバウンドマーケティングフォーム

JavaScript を使用してアウトバウンドマーケティングフォームを拡張し、Dynamics 365 Customer Insights - Journeys でカスタムビジネスアクションを実行します。アウトバウンドマーケティングフォームを拡張するために有効な方法を以下に示します。

JavaScript API

JavaScript API の最新バージョンを使用します。 form-loader.js または loader.js スクリプトへの参照が、それぞれ https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=[version tag] または https://mktdplp102cdn.azureedge.net/public/latest/js/loader.js?v=[version tag] になることを確認してください。 ?v=[version tag] セクションは省略できます。古いスクリプト (https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/form-loader.js または https://mktdplp102cdn.azureedge.net/public/static/[version tag]/js/loader.js のようなスクリプト) は廃止され、サポートされなくなりました。

カスタムコードを form-loader.js スクリプトの直後に配置します。

サンプルコード :

<script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=..."></script>
<script>
// correct - the script will attach event handlers right after form loader script
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {});

// wrong - the script will attach event handlers after window has finished loading, form already might have been loaded in the meantime and no events will trigger anymore
// window.onload = function() { MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function() {}); };
</script>

MsCrmMkt.MsCrmFormLoader メソッド

関数名	説明	パラメーター名	パラメーターの種類	パラメーターの説明	戻す
`.on(eventType,callback)`	フォームのライフサイクルイベントの種類にコールバックを登録する	`eventType`	`string`、`"afterFormLoad"`、`"afterFormRender"`、`"afterFormSubmit"`、`"formLoad"`、`"formRender"`、`"formSubmit"` の一部	フックするイベントの種類	`undefined`
`callback`	コールバック関数		`Function`
`.off(eventType)`	特定のフォームのライフサイクルイベントのコールバックを登録解除する	`eventType` 省略可能	`string`、`"afterFormLoad"`、`"afterFormRender"`、`"afterFormSubmit"`、`"formLoad"`、`"formRender"`、`"formSubmit"` の一部	フックするイベントの種類	`undefined`
`.sendFormCaptureToCrm(form)`	シナリオを取り込むフォームにのみサポートされる、Dynamics 365 Customer Insights - Journeys にフォームを送信する	`form`	フォームを表す DOM 要素またはフォームを表す JQuery のセレクター	フォーム DOM 要素	`Promise<string>`

フォームイベント

イベント名	取得したフォームにトリガーする	構文	説明
`formLoad`	はい	`MsCrmMkt.MsCrmFormLoader` `.on("formLoad", function(event) {})`	実際のフォームがコンテンツを取得する前に、フォームプレースホルダーが認識されるときのトリガー、フォームが認識されるときに取得したフォームのトリガー
`formRender`	いいえ	`MsCrmMkt.MsCrmFormLoader` `.on("formRender", function(event) {})`	フォームコンテンツを取得した後、およびフォームコンテンツをページに挿入する前のトリガーです。
`afterFormRender`	いいえ	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormRender", function(event) {})`	フォームコンテンツをページに挿入した後、および検証フックが添付される前のトリガーです。
`afterFormLoad`	いいえ	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormLoad", function(event) {})`	フォームコンテンツをページに挿入した後、および検証フックが添付される前のトリガーです。
`formSubmit`	いいえ	`MsCrmMkt.MsCrmFormLoader` `.on("formSubmit", function(event) {})`	送信フォームがサーバーに回る前の、フォームの送信にかかるトリガーです。
`afterFormSubmit`	はい	`MsCrmMkt.MsCrmFormLoader` `.on("afterFormSubmit", function(event) {})`	送信フォームがサーバーに回る前の、フォームの送信にかかるトリガーです。また、正常に送信される場合にのみトリガーをかけます。確認メッセージをリダイレクトまたは表示する前にトリガーをかけます。

各イベントコールバックには、次のメソッドが使用可能です。

メソッド名	説明	返り値の種類
`.getType()`	イベントの種類を取得します	`string`、`"afterFormLoad"`、`"afterFormRender"`、`"afterFormSubmit"`、`"formLoad"`、`"formRender"`、`"formSubmit"` の一部
`.getFormPageId()`	フォームページ ID を取得します - これは `msdyncrm_formpage` エンティティの一意の識別子に関係します	`string`
`.getFormPlaceholder()`	フォームを表す DOM 要素を取得	DOM 要素
`.preventDefault()`	フォーム送信のキャンセル、`formSubmit` タイプのイベントでのみ有効	`undefined`
`.preventFormLoadingProgressBar()`	フォームのロード中にスピンを隠す、`formLoad` タイプのイベントでのみ有効	`undefined`
`.setFormNotification(function (n) {})`	フォーム通知を表示するためのコールバック (フォーム送信メッセージなど) を上書きします。関数本体がないと、通知は表示されません。 `formLoad` タイプのイベントでのみ有効。	`undefined`

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

フォームの取得は、<div class="d365-mkt-config" style="display:none" data-website-id="..." data-hostname="..."> のような構成要素に指示されます。次の属性を追加することで、フォームの取得動作を変更できます。

属性名	説明
`data-ignore-prevent-default="true"`	指定すると、`.preventDefault()` がイベントで呼び出されたかどうかにかかわらず、フォームが送信されます。
`data-no-submit="true"`	指定すると、フォーム取得スクリプトは、フォーム送信イベントを取得しません。`MsCrmMkt.MsCrmFormLoader.sendFormCaptureToCrm(form)` を明示的にトリガーする必要があります。これは、先にフォームを送信して、後で Dynamics 365 Customer Insights - Journeys に同期したい場合に役立ちます。

メモ

Javascript API は、スクリプトとしてホストされるフォームでのみ使用でき、iframe ホスティングオプションではサポートされません。

ポータルの使用中にコードスニペットを追加する

JavaScript コードを追加するには、以下の手順に従う必要があります:

Customer Insights - Journeys に移動し、マーケティングページ へと移動します。
新しいマーケティングページを作成するには、新規を選択します。
ツールボックス タブから フォーム の要素を デザイナー タブへとドラッグアンドドロップし、使用をするマーケティングページを選択します。
HTML タブとコードスニペットに切り替えます。
保存を選択して変更の保存を行い、その後ライブへ移行を選択します。

CMS とフォームホスティングに使用中にコードスニペットを追加する

コードスニペットを追加するには、以下の手順に従ってください:

Customer Insights - Journeys アプリに移動し、アウトバウンドマーケティング エリアで マーケティングフォーム に移動します
新しい取引先企業を作成するには、新規を選びます。
ライブに移行を選択します。
フォームホスティングで使用可能なドメインにあるフォームホスティング タブを選択して、利用可能な場合はドメインを選択するか、+ 新しいドメインの作成を選択します。
自分の CMS ドメインを追加し、保存をクリックします。
関連するマーケティングフォームページ タブにあるフォームホスティング タブで、...をクリックし、+ 新規フォームページの追加を選択してマーケティングフォームページを追加します。
保存を選びます。
作成したフォームページを選択し、スクリプトをクリップボードにコピーします。
CMSで、フォームを含めるページを編集し、カスタマイズとスクリプトの追加をします。

使用例

サンプル検証 - テキストボックスが Fabricam または Contoso になっているかを確認してください。それ以外の場合、フォーム送信を止めてください。

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function(event) {
  // sample validation - check if 
  document.getElementById('txt-company-name-message').style.visibility = 'hidden';
  var companyName = document.getElementById('txt-company-name').value;
  if (companyName !== 'Fabricam' && companyName != 'Contoso') 
  {
    document.getElementById('txt-company-name-message').style.visibility = 'visible';
    event.preventDefault();
  }
});

非表示フィールドに、新規クエリの文字列を入力してください。

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function(event) {
  var self = window.location.toString();
  var queryString = self.split("?");
  var hiddenFields = document.querySelectorAll("input[type=hidden]");
  if (queryString.length > 1) 
  {
    var pairs = queryString[1].split("&");
    for (var pairIndex in pairs) 
    {
      var pair = pairs[pairIndex].split("=");
      if (pair.length !== 2) 
      {
        continue;
      }
      var key = pair[0];
      var value = pair[1];
      if (key && value) 
      {
        for (var i = 0; i < hiddenFields.length; i++) 
        {
          if (hiddenFields[i].id === key) 
          {
            hiddenFields[i].value = value;
          }
        }
      }
    }
  }
});

フォームのローカライズ (選択リスト) -クライアント側の拡張機能を使用して、アウトバウンドマーケティングフォームをローカライズできます。フォームが読み込まれた後はローカライズを行う必要があります (afterFormLoad イベント)。マーケティングページ内 (またはフォームをホストする CMS 内) に、次のローカライズスクリプトを追加します。

<script>
function translatePicklists(lcid) 
{
    var picklists = document.querySelectorAll("select");
    for(var i = 0; i < picklists.length; i++) 
    {
        var picklist = picklists[i];
        var relatedDatalist = document.getElementById("localize-" + picklist.name + "-" + lcid.toString());
        if (relatedDatalist) 
        {
            for(var j = 0; j < picklist.options.length; j++) 
            {
                if (j >= relatedDatalist.options.length) 
                {
                    break;
                }
                picklist.options[j].text = relatedDatalist.options[j].text;
            }
        }
    }
}
MsCrmMkt.MsCrmFormLoader.on("afterFormLoad", function(event) { translatePicklists(1029); });
</script>

マーケティングフォームで、翻訳が完了していることを確認してください。 HTML デザイナでマーケティングフォームを編集し、フォーマットします (デザイナを右クリックして、フォーマットを選択)、続いて必要な翻訳を追加します。

<div data-editorblocktype="Field-dropdown">
    <div class="marketing-field">
        <div class="lp-form-field" data-required-field="false">
            <label for="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-ellipsis" title="">Marital status</label>
            <select id="f7ae1a98-0d83-4592-afe0-272c85ce607d" name="f7ae1a98-0d83-4592-afe0-272c85ce607d" class="lp-form-fieldInput" title="" style="width: 100%; box-sizing: border-box;">
              <option value=""></option>
              <option value="1">Single</option>
              <option value="2">Married</option>
              <option value="3">Divorced</option>
              <option value="4">Widowed</option>
            </select>
        </div>
    </div>
</div>
<!-- format is localize-fieldid-lcid -->
<datalist id="localize-f7ae1a98-0d83-4592-afe0-272c85ce607d-1029">
    <option></option>
    <option>Svobodny(a)</option>
    <option>Zenaty(a)</option>
    <option>Rozvedeny(a)</option>
    <option>Vdovec(vdova)</option>
</datalist>

次の方法で共有

コードを使用してアウトバウンドマーケティングフォームを拡張する

JavaScript API

MsCrmMkt.MsCrmFormLoader メソッド

フォームイベント

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

ポータルの使用中にコードスニペットを追加する

CMS とフォームホスティングに使用中にコードスニペットを追加する

使用例

その他のリソース

次の方法で共有

コードを使用してアウトバウンド マーケティング フォームを拡張する

JavaScript API

MsCrmMkt.MsCrmFormLoader メソッド

フォーム イベント

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

ポータルの使用中にコード スニペットを追加する

CMS と フォームホスティングに使用中にコードスニペットを追加する

使用例

その他のリソース

コードを使用してアウトバウンドマーケティングフォームを拡張する

フォームイベント

ポータルの使用中にコードスニペットを追加する

CMS とフォームホスティングに使用中にコードスニペットを追加する