フォームの受付完了を
自社のGTMへ知らせる

できること・対応範囲

自社サイトのGTMウェブコンテナを使います。通常の問い合わせ受付だけなら、この設定は不要です。

入力が終わっただけ、送信ボタンを押しただけでは発生しません。サーバーで受付の保存に成功した後に発生します。入力エラー・送信失敗・予約枠の競合・送信前の確認の失敗・管理画面のプレビューでは発生しません。

作業の順番：フォームの設定と公開 → サイトとの連携 → GTMトリガー → 実際の送信で確認。外部サービスへの送信タグは、必要になった段階で設定できます。

1. フォームで有効にする

1. 企業管理画面の「フォーム」で対象のフォームを開きます。
2. 「受付完了イベント（GTM連携）」の「受付成功時にイベントを送る」をONにします。初期状態はOFFです。
3. イベント名を入力します。迷ったら sakidori_form_submit を使います。英字で始まる半角英数字・アンダースコア、40文字以内です。
4. 保存完了を確認し、「変更を公開」で訪問者に反映します。

フォーム編集に表示される「公開版の設定」は現在公開している設定です。下書きのイベント名を変えただけでは、公開中のイベント名は変わりません。

このフォームを使うチャット内の問い合わせや予約確定にも、同じ設定が適用されます。同じフォームを使った共有リンクとチャットを区別する経路情報は、現在のイベントには含まれません。

2. サイトと連携する

チャットを設置する場合

「見た目・サイトへの設置」から、その企業の設置タグをコピーしてサイトへ追加します。embed.js が完了イベントの連携も行います。

GTM経由でチャット自体を設置する場合は、設置画面の「GTM」タブにある専用コードをカスタムHTMLタグへ貼り、DOM Readyで発火させます。直接設置とGTM設置はどちらか一方を使用してください。チャットを表示するトリガーと、受付完了を受け取るトリガーは別々です。

フォーム・予約ページをiframeで設置する場合

フォームの「共有URL」を使ったiframeと、次の連携スクリプトを同じ親ページへ設置します。企業ID・フォームIDは実際の共有URLに置き換えてください。予約ページは、そのメニューの共有URLをiframeのsrcに使います。

<iframe
  src="https://saki-dori.com/share.html?ws=企業ID&amp;form=フォームID"
  title="お問い合わせ"
  referrerpolicy="strict-origin"
  width="100%" height="760" style="border:0">
</iframe>
<script src="https://saki-dori.com/js/form-events.js" defer></script>

設置先ドメインを「外観・設置」の許可ドメインへ登録し、フォーム・予約メニューの受付と共有URLを有効にして公開します。referrerpolicy="strict-origin" を指定してください。

連携スクリプトは親ページに1回追加します。GTMで追加する場合はカスタムHTMLタグで読み込み、DOM Readyをトリガーにします。GTMコンテナ自体も企業サイトに設置されている必要があります。

共有リンクを直接開く場合

共有ページ内の dataLayer とDOMイベントには完了通知が出ます。企業サイトのGTMには届かず、この画面から企業のGTMコンテナIDを登録する機能もありません。企業GTMで受け取る場合は、上のサイト埋め込みを使います。

3. GTMで受け取る

1. 企業自身のGTMウェブコンテナを開き、「トリガー」→「新規」を選びます。
2. 種類を「カスタムイベント」にします。
3. イベント名にSakidoriで設定した名前を入力します。例：sakidori_form_submit。正規表現一致はOFFにします。
4. 発生条件を「すべてのカスタムイベント」にします。ここで入力した名前に一致するイベントが対象です。
5. 「Sakidori：受付完了」など、用途が分かる名前で保存します。

GTMでの受信確認だけなら送信タグは不要です。トリガーを作るだけでは、GA4など外部サービスへの通信は発生しません。タグを送信する場合は外部へ送る設定へ進みます。

フォームを分けて扱う場合は、データレイヤー変数 sakidori_form_id を作り、トリガーを「一部のカスタムイベント」にして、対象フォームIDとの一致を条件にします。フォーム編集にIDを表示しています。

4. 疎通を確認する

GTMのプレビューで、公開済みの受付を送信してください。Sakidori管理画面の下書きプレビューではイベントは出ません。テストも実際の受付になるため、確認用のメールアドレスを使ってください。設定に応じて通知・自動返信が送られます。

1. GTM右上の「プレビュー」を押し、チャット・フォームを設置した企業サイトのURLを入力して接続します。
2. 開いたサイトでフォームを入力し、送信を完了します。
3. Sakidoriの「問い合わせ・予約」で、その受付が登録されたことを確認します。
4. Tag Assistantのイベント一覧から sakidori_form_submit（または設定した名前）を選びます。
5. 「Data Layer」で企業ID・フォームID・受付IDを確認します。タグを設定した場合は「Tags Fired」も確認します。
6. 確認後にGTMの変更を公開します。プレビューだけでは、GTMの下書き設定は一般の訪問者に反映されません。

ブラウザーのConsoleで確認する

送信後に開発者ツールのConsoleを開き、以下を実行します。埋め込みの場合はConsoleの対象を親ページの top にします。共有リンクを直接開いた場合は、その共有ページで確認します。

(window.dataLayer || []).filter(
  item => item.event === 'sakidori_form_submit'
)

設定名を変えた場合はコード内の名前も変えます。フォーム編集の「Console確認コードをコピー」なら、そのフォームIDと現在入力しているイベント名が入ります。公開後の同じ設定で確認してください。

配列に受付IDなどが1件表示されれば、そのページまでイベントが届いています。ページを再読み込みする前に確認してください。[] の場合は、次の確認表へ進みます。

同じタブの直近500受付を重複抑制します。ブラウザーの保存領域が使えない場合はそのページ内のみです。別タブや保存領域の消去後、外部サービス側の集計までを保証するものではありません。

必要なとき：GA4・広告などへ送る

企業のGTMで送信先のタグを作り、手順3のトリガーを割り当てます。計測ID・イベント名・必要なパラメーターは、送信先の仕様に合わせて設定してください。広告CVやGA4のキーイベントにすることは必須ではありません。

Tag Assistantの「Tags Fired」はタグの実行を示します。送信先への到達・集計は、送信先のデバッグ画面やイベント一覧でも確認してください。タグの配信条件や同意条件は、自社サイトのGTM・同意管理で設定します。

イベントの項目

{
  event: 'sakidori_form_submit',
  sakidori_company_id: 'ws_...',
  sakidori_form_id: 'form_...',
  sakidori_receipt_id: 'inq_...',
  sakidori_type: 'inquiry'
}

sakidori_type は問い合わせなら inquiry、予約なら booking です。GTMでは必要な項目をデータレイヤー変数として登録できます。名前・メールアドレス・回答本文・ページURLはこのイベントに含めません。

同時に window へ sakidori:submission というDOMイベントも通知します。独自の連携で使う場合は、フォーム送信前に次のリスナーを登録します。

window.addEventListener('sakidori:submission', event => {
  console.log('受付完了', event.detail);
});

うまくいかないとき