GTM（Googleタグマネージャー）連携

このページでは、予約フォームの各ステップで Smart Booking が自動的に送信する dataLayer イベントを使って、Googleタグマネージャー（GTM）経由で GA4 や Google広告のコンバージョン計測を行う方法を解説します。

Smart Booking が行うのは window.dataLayer.push の実行のみ です。GTM コンテナタグ（gtm.js）のサイトへの埋め込みは別途必要です。Smart Booking の設定画面には、GTM のコンテナ ID や GA4 の測定 ID などを入力する欄もありません。

仕組みの概要

予約フォームの各ステップ（店舗選択 → 担当者選択 → 日付・時間の選択とフォーム入力 → 確認 → 完了）が画面に表示されるたびに、Smart Booking が window.dataLayer に決まった形のオブジェクトを 1 件ずつ追加します。GTM 側で カスタムイベントトリガー を設定すれば、これをきっかけに GA4 や Google広告のタグを発火できます。

dataLayer への追加は GTM が設置されていない環境でも常に行われますが、未消費のまま無害に残るだけなのでパフォーマンスへの影響はありません。Smart Booking 側に有効・無効スイッチは設けていません。

追加されるオブジェクトに入っているのは、event（イベント名）と booking_step（ステップ名）の 2 項目だけ です。お客さまの氏名・メールアドレス・電話番号などの入力内容や、予約番号、選んだ店舗・担当者・日時の情報は含まれません。

前提条件

WordPressサイトに GTM コンテナタグ が埋め込まれていること
- サイト全体への埋め込みは、テーマの header.php を直接編集するか、「Google Tag Manager」「Site Kit by Google」などのプラグインで行ってください。
- Smart Booking はコンテナタグの埋め込みは行いません。
GTM 側で GA4 設定タグや Google広告タグなど、発火させたいタグが用意されていること

送信されるイベント一覧

ステップ	event 名	booking_step 値	送信タイミング
店舗選択	`smart_booking_step`	`store_select`	店舗選択画面の表示時
担当者選択	`smart_booking_step`	`staff_select`	担当者選択画面の表示時
日付選択	`smart_booking_step`	`date_select`	日付・時間の選択とフォーム入力の画面の表示時（日付を選ぶ前に送信）
時間選択	`smart_booking_step`	`time_select`	日付を初めて選び、その下に時間枠が表示された時（時間を選んだ時ではありません）
フォーム入力	`smart_booking_step`	`form_input`	日付・時間の選択とフォーム入力の画面の表示時（`date_select` と同時）
確認画面	`smart_booking_step`	`confirm`	確認画面表示時
完了画面	`smart_booking_complete`	`complete`	予約完了画面表示時（コンバージョン地点）

イベントは、お客さまがボタンを押したり項目を選んだりした「操作の時」ではなく、そのステップが画面に表示された時 に送られます。

店舗選択・担当者選択のステップが表示されない場合

Smart Booking → 設定 → 基本設定 の フロント表示 にある 店舗選択ステップ / 担当者選択ステップ は、どちらも初期値がオフです。オフのままなら店舗・担当者の選択画面は表示されないため、store_select / staff_select は送信されず、date_select と form_input から計測が始まります。オンにしていても、次の場合は該当する画面が表示されないため、イベントも送信されません。

store_select: ショートコードで店舗を指定して設置したページ（例: [smart_booking store_id="1"]）、または店舗が登録されていない場合

staff_select: 担当者が登録されていない場合、または対象の店舗（選んだ店舗・ショートコードで指定した店舗・自動で割り当てられた店舗）に担当者が登録されていない場合

日付・時間とフォーム入力は 1 つの画面です

予約フォームでは「日付・時間の選択」と「フォーム入力」が 1 画面にまとめて表示されます。そのため、この画面が表示された時点で date_select と form_input が同時に積まれます。time_select はその後、お客さまが日付を初めて選んだ時に 1 回だけ積まれ、別の日付に選び直しても再送されません。

送信される順番

送信順は、Smart Booking → 設定 → 基本設定 の 予約フロー にある 入力順序 によって次のように変わります（店舗選択・担当者選択の画面が表示されない場合は、その分のイベントが抜けます）。

入力順序	送信される順番
日付・時間 → フォーム入力（初期値）	`store_select` → `staff_select` → `date_select` と `form_input`（同時）→ 日付を選ぶと `time_select` → `confirm` → `complete`
フォーム入力 → 日付・時間	`store_select` → `staff_select` → `form_input` と `date_select`（同時）→ 日付を選ぶと `time_select` → `confirm` → `complete`

dataLayer に積まれるオブジェクトの例

ブラウザの開発者ツール（DevTools）の Console タブで window.dataLayer を入力すると、現在までにプッシュされた配列を確認できます。店舗選択ステップ・担当者選択ステップをオン、入力順序を 日付・時間 → フォーム入力 にして、途中で戻らずに完了画面まで到達した直後の例:

> window.dataLayer
[
  { event: 'smart_booking_step',     booking_step: 'store_select' },
  { event: 'smart_booking_step',     booking_step: 'staff_select' },
  { event: 'smart_booking_step',     booking_step: 'date_select' },
  { event: 'smart_booking_step',     booking_step: 'form_input' },
  { event: 'smart_booking_step',     booking_step: 'time_select' },
  { event: 'smart_booking_step',     booking_step: 'confirm' },
  { event: 'smart_booking_complete', booking_step: 'complete' }
]

計測時の注意点

予約フォームの URL は、どのステップでも変わりません。 確認画面や完了画面に進んでもページの URL は同じままなので、「サンクスページの URL に到達したらコンバージョン」という URL 条件のトリガーでは計測できません。予約完了の計測には、必ずカスタムイベント smart_booking_complete をトリガーにしてください。
complete は 1 件の予約につき 1 回だけ送信されます。 完了画面をブラウザで再読み込みすると予約フォームは最初のステップから表示し直されるため、complete が再送されることはありません（代わりに最初のステップのイベントが送られます）。
確認画面から戻ると、同じイベントがもう一度送られます。 確認画面で 入力内容を修正する を押すと日付・時間の選択とフォーム入力の画面に戻り、date_select / time_select / form_input が再度送られます（日付は選択済みのまま戻るため、time_select も同時に送られます）。そこから確認画面に進み直すと confirm も再度送られます。確定しようとした時間枠が満席になっていたときに確認画面に表示される 日付を選び直す で戻った場合も同様です。店舗選択・担当者選択の画面へ戻るで戻ってから進み直した場合も、通過した画面のイベントが再度送られます。これは仕様です。

GTM 側の設定手順

1. データレイヤー変数を作成（任意だが推奨）

GTM 管理画面 →「変数」→「ユーザー定義変数」→「新規」→ データレイヤーの変数 を選び、次の通り作成します。

変数名: DLV - booking_step
データレイヤーの変数名: booking_step

これで GA4 タグやトリガー条件で予約ステップ名を参照できるようになります。

2. カスタムイベントトリガーを作成

コンバージョン計測用トリガー（完了画面）

GTM 管理画面 →「トリガー」→「新規」→ カスタムイベント を選び、次の通り作成します。

トリガー名: Smart Booking - 予約完了
イベント名: smart_booking_complete
配信トリガー: すべてのカスタムイベント

このトリガーを GA4 イベントタグや Google広告コンバージョンタグに紐付けます。

ステップ別ファネル計測用トリガー（任意）

ステップ離脱率を可視化したい場合は、ステップごとにトリガーを作成します。

トリガー名: Smart Booking - 日付選択到達
イベント名: smart_booking_step
配信トリガー: 一部のカスタムイベント
条件: DLV - booking_step 等しい date_select

同じ要領で store_select / staff_select / time_select / form_input / confirm のトリガーを作成できます。

3. GA4 イベントタグを作成

GTM 管理画面 →「タグ」→「新規」→ GA4 イベント を選びます。

設定タグ: 既存の GA4 設定タグ（G-XXXXXXX）
イベント名: booking_complete（GA4 上での名前。任意）
イベントパラメータ: booking_step = {{DLV - booking_step}}
トリガー: 手順 2 で作成した Smart Booking - 予約完了

4. Google広告コンバージョンタグを設定する場合

「タグ」→「新規」→ Google広告のコンバージョントラッキング を選び、コンバージョン ID とコンバージョンラベルを入力してください。トリガーは同じく Smart Booking - 予約完了 を指定します。

動作確認

GTM 管理画面の右上「プレビュー」をクリックし、Tag Assistant を開きます。
自分の WordPressサイトの URL を入力して接続します。
プレビュー用ウィンドウで Smart Booking の予約フォームから実際に予約を入れます。
Tag Assistant の左ペインに、ステップごとに smart_booking_step（または smart_booking_complete）のイベントが出現することを確認します。
完了画面で目的のタグ（GA4 / Google広告）が「Tags Fired」に表示されれば設定完了です。

ファネル分析の例（GA4）

ステップごとにイベントを送っているため、GA4 の「探索 → ファネルデータ探索」で離脱率を可視化できます。

例（店舗選択ステップをオンにしている場合）:

ステップ1: イベント smart_booking_step かつ booking_step = store_select
ステップ2: イベント smart_booking_step かつ booking_step = date_select
ステップ3: イベント smart_booking_step かつ booking_step = time_select
ステップ4: イベント smart_booking_step かつ booking_step = confirm
ステップ5: イベント smart_booking_complete

これで「店舗選択画面を開いた人の 80% が日付・時間の画面まで進むが、日付を選ぶのはそのうち半分」「日付は選ぶが確認画面まで進まない人が多い」といった改善ポイントが見えるようになります。

ファネルを組むときは、次の点に注意してください。

date_select と form_input は同じ画面の表示時に同時に送られるため、この 2 つを別々の段にしても、間の離脱はほぼ 0 になり意味のある差は出ません。どちらか一方だけを使ってください。
time_select は「時間を選んだ」ではなく「日付を選んだ」ことを表します。
店舗選択ステップ・担当者選択ステップがオフ（初期値）の場合、store_select / staff_select は送られません。ファネルの最初の段は date_select にしてください。
確認画面から 入力内容を修正する で戻ると、date_select / time_select / form_input / confirm が同じ人から再度送られます。イベントの回数で集計すると、その分多く数えられる点に注意してください。

トラブルシューティング

症状	主な原因
イベントが Tag Assistant に出てこない	GTM コンテナタグがサイトに埋め込まれていない
`dataLayer` に何も入らない	予約フォームの読み込み（くるくる回る読み込み表示）が終わる前に確認している。イベントは最初のステップが画面に表示された時点で送られるので、フォーム表示後にもう一度 `window.dataLayer` を確認してください。予約フォームの代わりにエラーメッセージが表示されている場合は、イベントは送られません
完了画面でも Google広告タグが発火しない	トリガーのイベント名が `smart_booking_complete` ではなく `smart_booking_step` のままになっている
サンクスページの URL を条件にしたトリガーが発火しない	予約フォームは完了画面に進んでも URL が変わりません。トリガーはカスタムイベント `smart_booking_complete` にしてください
ステップごとに同じタグが何度も発火する	トリガーで `booking_step` 条件を絞っていない。GA4 設定タグなど 1 度だけ発火させたいタグは「初期化のみ」に設定するのが安全です
同じステップのタグが 1 回の予約で 2 回以上発火する	お客さまが確認画面から入力内容を修正する（または日付を選び直す）で戻ると、`date_select` / `time_select` / `form_input` が、確認画面に進み直すと `confirm` が再度送られます。仕様どおりの動作です（`complete` は 1 件の予約につき 1 回だけです）

次のステップ

GTM 経由のコンバージョン計測まで設定できたら、サイトを公開してお客さまからの予約を受け付けてみましょう。日々の予約状況の確認は予約の管理で行います。