Tracking Scriptを利用したフォームハンドラー連携
🍀 Tracking Scriptを利用したフォームハンドラー連携とは
Marketing Cloud Nextのフォームハンドラーは、 外部Webサイトに設置したフォームの入力情報を受け取り、 Salesforceのフローへ渡すための仕組みです。
フォームハンドラーが情報を受け取ると、 あらかじめ接続しておいたフローが実行されます。
フローでは、フォームの入力内容を利用して、 リードや取引先責任者などのレコードの作成・更新、 メール送信などの処理を実行できます。
Tracking Scriptを利用した連携の流れ
フォームに入力・送信
お客様がWebサイトのフォームへ、 会社名、氏名、メールアドレスなどを入力して送信します。
Tracking Scriptで連携
フォームに追加したTracking Scriptが送信処理を行い、 対象のフォームハンドラーへ入力情報を渡します。
フローを実行
フォームハンドラーに接続されたフローへ、 入力された情報が渡されます。
Salesforceへ反映
フローによって、リードや取引先責任者などの Salesforceレコードを作成・更新します。
設定前に確認すること
フォームハンドラーを設定する前に、 外部フォームの入力項目や、フォーム送信後に実行する処理を確認しておきましょう。
外部フォームの準備
連携する外部フォームは、すでに作成されていますか？
Tracking ScriptとForm Attributesを追加するため、 外部フォームのHTMLを編集できることも確認しましょう。
入力項目とname属性
会社名、氏名、メールアドレスなど、 フォームから送信する項目を確認します。
あわせて、各入力項目に設定されている
name属性の値も確認しましょう。
例：メールアドレス
name="emailAddress"
送信後に実行する処理
フォーム送信後に、どのような処理を実行するか決めておきます。
例：レコードの作成・更新、担当者への通知、メール送信
リードや取引先責任者など、 レコードの保存先となるSalesforceオブジェクトも確認しましょう。
WebサイトのオリジンURL
CORS許可リストへ登録するため、 外部フォームを設置しているWebサイトのオリジンURLを確認します。
フォームのURL
https://www.example.com/contact/
オリジンURL
https://www.example.com
💡 外部項目名を一致させましょう
フォームハンドラーの「外部項目名」には、
外部フォームの入力項目に設定されている
name属性と同じ値を設定します。
外部項目名は、大文字・小文字を含めて完全に一致させてください。
⚠️ HTMLを編集できない場合
外部フォームのHTMLを編集できない場合は、 Tracking Scriptを利用したフォームハンドラー連携を設定できません。 外部フォームの提供元や管理担当者へ確認してください。
手順1：CORS許可リストを設定する
外部Webサイトからフォームを送信できるように、 Salesforceの［設定］で「CORS」を検索し、 フォームを設置するWebサイトのオリジンURLを登録します。
💡 オリジンURLの入力例
https://www.example.com
URLには、https://などのプロトコルと ドメイン名を含めます。サブドメインをまとめて許可する場合は、 必要に応じてhttps://*.example.comのように設定します。
⚠️ 許可する範囲を必要以上に広げないでください
ワイルドカードを使用すると複数のサブドメインを許可できます。 セキュリティを考慮し、フォームを設置するWebサイトに必要な範囲だけを登録しましょう。
手順2：フォームハンドラーを作成する
［コンテンツ］タブを開き、対象のマーケティングワークスペースで フォームハンドラーを作成します。
ワークスペースを選択する
［コンテンツ］タブを開き、 フォームハンドラーを作成する マーケティングワークスペースを選択します。
フォームハンドラーを追加する
［追加］［コンテンツ］をクリックし、 表示された画面から［フォームハンドラー］［作成］をクリックします。
基本情報を設定する
編集画面左上の「タイトル未定」の横にある鉛筆アイコンをクリックし、 フォームハンドラーの名前を設定します。
データソースを追加する
［データソース］セクションでデータソースを追加し、 フォーム送信後にレコードを作成・更新する対象オブジェクトを選択します。
手順3：外部項目名を設定する
フォームハンドラーでは、外部フォームから受け取る項目ごとに 外部項目名を設定します。
外部項目名は、外部フォームから送信されるデータの項目名と 完全に一致させる必要があります。
💡 外部項目名の設定例
- 会社名：companyName
- 姓：lastName
- 名：firstName
- メールアドレス：emailAddress
⚠️ 大文字・小文字を含めて一致させてください
たとえば、フォームハンドラー側で 「emailAddress」と設定した場合は、 外部フォームから送信する項目名も 「emailAddress」にします。
項目名が一致していない場合、 入力された情報を正しく受け取れない可能性があります。
💡 HTMLのname属性を確認しましょう
外部項目名には、外部フォームの入力項目に設定されている name属性の値を入力します。
<input type="text" id="lastName" name="lastName" required>上記の場合、フォームハンドラーの外部項目名には lastNameを設定します。
⚠️ 入力値の形式にも注意してください
- 外部項目名には半角スペースを使用しない
- チェックボックス型の値は true または false で送信する
- 日付は YYYY-MM-DD、日時はタイムゾーンを含む所定の形式で送信する
手順4：スパム保護とリダイレクト先を設定する
必要に応じて、スパム送信を判定するハニーポット項目を追加します。 ハニーポットを使用する場合は、フォームハンドラーに設定した外部項目名と同じ name属性を持つ非表示項目を外部フォームにも追加します。
あわせて、フォーム送信に成功した場合と失敗した場合のリダイレクト先URLを設定し、 フォームハンドラーを保存します。
手順5：自動化フローを作成・有効化する
フォームハンドラーが受け取った情報を利用して、 レコードの作成・更新やメール送信などを行うフローを設定します。
⚠️ フローを有効化するとフォームハンドラーも公開されます
フォームハンドラー側で単独の公開操作を行うのではなく、 接続したフローを有効化することで、フォームハンドラーもあわせて公開されます。
フロー作成後にフォームハンドラーの項目などを変更した場合は、 新しいフローバージョンを作成し、保存・有効化してください。
手順6：Tracking ScriptとForm Attributesをコピーする
フローを有効化し、フォームハンドラーが公開されたことを確認したら、 フォームハンドラーの詳細画面からTracking Scriptをコピーします。
続いて、同じ画面に表示されるForm Attributesもコピーします。 Form Attributesには、どのフォームハンドラーと連携するフォームなのかを識別するための属性が含まれます。
手順7：外部フォームのHTMLへ追加する
コピーしたTracking Scriptを、外部Webページの </body>タグの直前へ貼り付けます。
次に、コピーしたForm Attributesを、連携対象となる <form>タグ内へ追加します。
<form id="フォームハンドラー固有のID"
data-uma-forms="true"
method="post">
<input type="text" name="lastName" required>
<input type="text" name="firstName" required>
<input type="email" name="emailAddress" required>
<button type="submit">送信</button>
</form>
<!-- Tracking Scriptは実際の画面からコピーしたものを貼り付けます -->⚠️ サンプルのIDをそのまま使用しないでください
Form AttributesとTracking Scriptはフォームハンドラーごとに発行されます。 必ず、ご自身のフォームハンドラー画面に表示された内容をコピーして使用してください。
💡 reCAPTCHAを利用している場合
外部ページ側でトークンを生成し、フォーム送信時にトークンも送信されるように設定します。
手順8：フォームをテスト送信する
外部Webページを公開したら、実際にフォームへ入力して送信します。 成功時のページへリダイレクトされることと、Salesforceに対象レコードが作成・更新されていることを確認します。
💡 テスト時のチェック項目
- 必要な項目がすべて追加されていること
- 外部項目名に誤りがないこと
- 外部フォーム側の項目名と一致していること
- CORS許可リストに外部サイトのオリジンURLが登録されていること
- Tracking Scriptを</body>タグの直前へ追加していること
- Form Attributesを対象の<form>タグへ追加していること
- 接続するフローが有効化され、フォームハンドラーが公開されていること
- 成功時・失敗時のリダイレクト先が正しく動作すること