オートウェビナーのCTA・コメント・追客設計｜計測と本番試験

オートウェビナーのコメント、CTA、フォーム、LINE追客を設計し、参加・離脱データから改善して本番公開前に停止手順まで確認します。 視聴中の適切な秒数で案内を出し、ページを離れずに申込させ、LINEのタグとシナリオへつなぎます。 友だち×開催回の視聴記録から、どこで離脱し、どの案内が行動につながったかを確認します。 動画・端末・時刻・通知・権限・費用を一枚で判定し、異常時にすぐ停止できる状態にします。

この記事はHarness Academyの教材データを基に、各Harnessの公式リポジトリにある実装箇所と照合して構成しています。秘密情報や本番データを記事・AIチャットへ貼らず、外部送信は必ず検証対象を限定してください。

最初に確認すること

• コメント・CTA・フォーム・追客を設計する: 視聴体験を壊さず、CTA表示からフォーム回答・タグ付与・追客まで一件ずつ計測できる
• 参加・離脱・CTAを数字で改善する: 表示回数ではなく、参加率・視聴時間・離脱位置・CTA・CVを同じsessionで評価できる
• 本番公開前の試験と、止め方を固定する: 本番GO/NO-GOを証拠で判断し、動画差替えや障害時も既存実装を壊さず復旧できる

コメント・CTA・フォーム・追客を設計する

視聴中の適切な秒数で案内を出し、ページを離れずに申込させ、LINEのタグとシナリオへつなぎます。

この工程のゴール: 視聴体験を壊さず、CTA表示からフォーム回答・タグ付与・追客まで一件ずつ計測できる

コメントはat_seconds順に流れ、待機室では負の秒数も使えます。視聴者コメントは本人の画面へ即時表示し、D1へ保存して管理画面から確認します。入力は500文字、session単位の上限があり、クライアント申告のsession IDはサーバーで再検証します。

本番版のwebinar_ctasは一つの下部ボタンではなく、指定秒数でチャット欄へ複数カードを表示できます。URLカードは外部ページへ、formカードは既存のL Harnessフォームをボトムシートで開きます。フォーム送信後は既存のタグ付与やシナリオ開始をそのまま利用できます。

CTAは最大数、表示秒、URL、form IDを保存前に全件検証し、不正が一件あれば一括更新しません。『クリック』『フォーム送信』『決済完了』は別イベントです。クリックだけを成約と数えず、決済側のCVまたは確認データと照合します。

手順

1. 目的を一つ決める

個別相談、購入、資料請求などウェビナーの主CTAを一つ決め、補助CTAを必要最小限にします。

2. 秒数を決める

話の内容と合わせ、コメント、CTAカード、フォーム自動表示の秒数をプレビューで確認します。

3. 既存フォームと接続

重複フォームを作らず、送信後タグと追客シナリオを一件ずつ確認します。

4. イベントを分ける

参加、30秒heartbeat、CTA click、form submit、CVを別々に記録します。

5. 自分で申込

通常視聴者としてCTAを開き、フォーム送信後も動画へ戻れ、追客が一度だけ始まることを確認します。

完了条件

• 複数CTAを秒数順に表示
• フォームを視聴ページ内で完了
• タグと追客へ一度だけ接続
• クリックと成約を別計測

注意: 実在しないform IDや本番シナリオを推測で指定しません。自動表示の多用は視聴を妨げるため、主CTA一つから検証します。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-5

参加・離脱・CTAを数字で改善する

友だち×開催回の視聴記録から、どこで離脱し、どの案内が行動につながったかを確認します。

この工程のゴール: 表示回数ではなく、参加率・視聴時間・離脱位置・CTA・CVを同じsessionで評価できる

視聴開始時にwebinar_viewersを友だち×sessionでupsertし、30秒ごとのheartbeatはlast_position_secondsを単調増加で更新します。再入場で視聴時間が後退しないため、開催回ごとの参加者数、平均視聴秒、10分刻みの離脱、CTAクリック数を集計できます。

heartbeatが止まった位置は厳密な『離脱ボタンを押した瞬間』ではなく、最後に確認できた位置です。通信断、バックグラウンド、ブラウザ終了も混ざります。少人数の一回だけで結論を出さず、session別の差と動画内容を一緒に見ます。

本当の改善は、申込数→予約数→通知成功→参加数→主要区間到達→CTAクリック→フォーム送信→CVの漏斗です。CTRだけを上げる煽りではなく、視聴者が必要な情報を理解した直後へCTAを置き、問い合わせ内容やキャンセルも確認します。

手順

1. 検証基準を作る

動画の重要区間と目標到達秒、CTA秒、完了条件を先に決めます。

2. 数字を取得

session別参加、平均視聴秒、離脱bucket、CTA click、form submit、CVを取得します。

3. 異常を除外

プレビュー、運営テスト、heartbeat失敗、重複sessionを分けます。

4. 一変数だけ変更

冒頭、CTA時刻、案内文、開催枠の一つだけを変え、次の複数回で比較します。

完了条件

• 友だち×sessionで重複を抑制
• 予約からCVまで漏斗で確認
• heartbeatの限界を明記
• 一度に一変数だけ改善

注意: 少人数の離脱率を確定的な結論にしません。視聴者コメントやフォーム回答を共有する場合は、目的と閲覧権限を限定します。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-6

本番公開前の試験と、止め方を固定する

動画・端末・時刻・通知・権限・費用を一枚で判定し、異常時にすぐ停止できる状態にします。

この工程のゴール: 本番GO/NO-GOを証拠で判断し、動画差替えや障害時も既存実装を壊さず復旧できる

オートウェビナーはWorker、LIFF、R2、D1、Cron、LINE送信、フォーム、外部決済が連鎖します。buildが通るだけでは足りません。検証LINE一人で予約前から追客まで通し、時刻境界、実機、再実行、障害時を確認します。

動画を同じR2 prefixへ上書きすると、長期cacheされたsegmentと新playlistが混ざる恐れがあります。差替えは新しいversion付きprefixへアップロードし、管理画面の参照先を切り替えます。元prefixはrollback期間が終わるまで残します。

緊急時はwebinarをdraftまたはarchivedへ戻す、該当Cron・追客を止める、代替案内を下書きする順です。R2を先に削除すると視聴中の人が404になるため、入口停止と影響確認を先に行います。

手順

1. 自動テスト

schedule、token、asset、registration、reminder、CTA、DB migrationのtestとbuildを実行します。

2. 一人E2E

自分だけで予約、通知、待機、途中参加、CTA、フォーム、追客、分析まで通します。

3. 端末・障害試験

iOS/Android/PC、通信断、token期限切れ、R2 404、LINE失敗、Cron再実行を確認します。

4. GO/NO-GO

対象commit、migration、R2 prefix、費用、monitor、rollback、未解決事項を一枚にします。

5. 小さく公開

最初は運営と少人数だけへ案内し、開始前・中・終了後の指標を監視してから広げます。

完了条件

• 関連testと端末E2Eが成功
• LINE送信が管理画面ログへ残る
• version付きR2 prefixで安全に差替え
• 停止・rollbackを実演できる

注意: 視聴中にR2 objectやD1 rowを先に削除しません。入口と自動処理を止め、影響を確認してから後片付けします。

Academy教材: オートウェビナーを構築・運用する / Lesson 16-7

公式ソース

• L Harness OSS / packages/db/migrations/055_webinar_ctas.sql — URL・フォームCTAカード（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/client/webinar/main.tsx — CTA表示とフォームsheet（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/routes/webinars.ts — CTA入力検証とクリック計測（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/routes/forms.ts — フォーム送信と既存side effects
• L Harness OSS / packages/db/src/webinars.ts — viewersのupsert・位置更新・分析query
• L Harness OSS / packages/db/migrations/056_webinar_registrations.sql — 予約母数（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/routes/webinars.test.ts — API・asset・予約の回帰テスト（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/services/webinar-reminders.test.ts — 通知の再試行と二重送信防止（現在の公開OSS実装）
• L Harness OSS / apps/worker/src/lib/webinar-token.test.ts — HMAC token（現在の公開OSS実装）
• Apple HTTP Live Streaming — 動画のHLS変換仕様

関連ガイド

• /line-harness-auto-webinar/
• L Harness機能一覧