TimeRex日程調整の実装ガイド

NaviPartnerのフォーム送信後にTimeRexでの日程調整を案内する実装方法です。

🎯 実装済みの内容

方法1: フォーム送信成功画面に表示（実装済み）

現在のサイトではこの方法を採用しています。

特徴:

フォーム送信後、その場で日程調整リンクを表示
ページ遷移なしでスムーズな体験
実装がシンプルで確実

表示内容:

送信完了メッセージ
TimeRexへの誘導ボタン（目立つデザイン）
メール連絡を待つ選択肢も提示

📧 方法2: Formspree自動返信メール（オプション）

設定方法

Formspreeダッシュボードにログイン
- https://formspree.io にアクセス
- フォームID: xvgbklld を選択
自動返信メールを設定
- Settings → Email Notifications
- Auto-Responderをオンにする
- /docs/formspree-email-template.mdのテンプレートを使用
必要な料金プラン
- Starter Plan以上（$8/月〜）が必要

メリット

ユーザーのメールボックスに記録が残る
後から日程調整リンクを確認できる
プロフェッショナルな印象

📄 方法3: サンクスページへリダイレクト（オプション）

実装方法

A. Formspree側での設定

Formspreeダッシュボードで設定
Settings → Redirects
Success URLに設定: https://navipartner.jp/thanks/

B. JavaScript側での実装（現在の実装を変更する場合）

// assets/script.js の該当部分を以下に変更
if (response.ok) {
    // サンクスページへリダイレクト
    window.location.href = '/thanks/';
}

メリット

専用ページで詳細な案内が可能
Google Analyticsでコンバージョン測定しやすい
より多くの情報を提供できる

作成済みファイル

/thanks.md - サンクスページ（作成済み）

🔄 実装の切り替え方法

現在の実装（方法1）から他の方法へ切り替える場合

サンクスページへ切り替える場合

assets/script.jsの364行目付近を編集
成功時の処理を以下に変更:

if (response.ok) {
    window.location.href = '/thanks/';
}

Formspreeのリダイレクトを使う場合

JavaScriptのe.preventDefault()をコメントアウト
フォームを通常の送信に戻す
Formspreeダッシュボードでリダイレクト設定

📊 各方法の比較

方法	コスト	実装難易度	UX	確実性
方法1（現在）	無料	簡単	◎	◎
方法2（メール）	$8/月〜	簡単	○	△※1
方法3（ページ）	無料	簡単	○	◎

※1 迷惑メールフォルダに入る可能性がある

🚀 推奨される運用

初期段階: 方法1（現在の実装）で運用
成約率を上げたい場合: 方法2も併用（自動返信メール）
詳細な分析が必要な場合: 方法3に切り替え

📈 効果測定のポイント

測定すべき指標

フォーム送信数
- Google Analyticsでイベント設定
TimeRexクリック率
- JavaScriptでクリックイベントを計測
実際の予約完了率
- TimeRex側の管理画面で確認

Google Analytics設定例

// TimeRexボタンクリック時の計測
document.querySelector('.timerex-cta .btn').addEventListener('click', function() {
    gtag('event', 'click', {
        'event_category': 'TimeRex',
        'event_label': 'Schedule Consultation'
    });
});

🔗 TimeRex URLについて

現在のURL: https://timerex.net/s/yoosukenakao_6fc9/3f8d3743

URLを変更する場合

以下のファイルを更新してください:

assets/script.js - 368行目付近
thanks.md - 25行目
docs/formspree-email-template.md - 16行目

📞 サポート

実装について不明な点がありましたら、お気軽にお問い合わせください。