LPでreCAPTCHAを導入するにはどうすればいいですか?
結論Google reCAPTCHAを導入するには、管理画面でドメイン登録→サイトキー・シークレット取得→LPのフォームにスクリプト設置→サーバー側で検証の4手順です。静的HTML/WordPressどちらでも対応でき、スパム投稿を大幅に抑制できます。実装はLP制作.jpの制作の流れ内で対応可能です。
導入の全体フロー(4ステップ)
1. Google reCAPTCHAにサイト登録
・ドメインを登録し、v2(チェックボックス/非表示)またはv3(スコア判定)を選択
・サイトキー(client)とシークレットキー(server)を取得
2. フロント実装
・LPの
・ドメインを登録し、v2(チェックボックス/非表示)またはv3(スコア判定)を選択
・サイトキー(client)とシークレットキー(server)を取得
2. フロント実装
・LPの
実装パターン(HTML/WordPress/Ajax)
静的HTML(PHP送信)
・にreCAPTCHAのscriptを読み込み、送信ボタン付近にウィジェット(v2)を配置
・POST時にg-recaptcha-responseを受け取り、サーバーで検証
WordPress
・テーマのフォーム実装にreCAPTCHAを追加、もしくは主要フォームプラグインの拡張機能を有効化
・wp_remote_post等でサーバー検証し、失敗時はバリデーションに追加
Ajax送信
・送信前にトークンを取得→hiddenで同梱して送信→サーバーで検証→成功後のみ完了レスポンスを返す
・にreCAPTCHAのscriptを読み込み、送信ボタン付近にウィジェット(v2)を配置
・POST時にg-recaptcha-responseを受け取り、サーバーで検証
WordPress
・テーマのフォーム実装にreCAPTCHAを追加、もしくは主要フォームプラグインの拡張機能を有効化
・wp_remote_post等でサーバー検証し、失敗時はバリデーションに追加
Ajax送信
・送信前にトークンを取得→hiddenで同梱して送信→サーバーで検証→成功後のみ完了レスポンスを返す
v2とv3の選び方
・v2(チェックボックス/非表示)わかりやすく確実。迷惑投稿が多いLPや短期キャンペーンに適合
・v3(スコア)UIに干渉せずUXが高い。行動スコアで判定するため、閾値の調整とバックアップ(簡易設問や再試行)が有効
迷ったら、まずv2で確実にブロック→運用でv3へ移行が実務的です。
・v3(スコア)UIに干渉せずUXが高い。行動スコアで判定するため、閾値の調整とバックアップ(簡易設問や再試行)が有効
迷ったら、まずv2で確実にブロック→運用でv3へ移行が実務的です。
品質・運用のポイント
・HTTPS必須SSL(HTTPS)対応で安全な通信を前提化
・多重防御reCAPTCHA+CSRFトークン+サーバー側バリデーションで三層対策
・ログ設計失敗理由(ネットワーク/スコア閾値)を記録して誤検知を調整
・UI配慮失敗時は再試行ボタンと問い合わせ手段を明示
・プライバシープライバシーポリシーに「スパム防止技術の利用」を記載
・計測連携送信成功時のみコンバージョンタグを発火(重複発火を防止)
・多重防御reCAPTCHA+CSRFトークン+サーバー側バリデーションで三層対策
・ログ設計失敗理由(ネットワーク/スコア閾値)を記録して誤検知を調整
・UI配慮失敗時は再試行ボタンと問い合わせ手段を明示
・プライバシープライバシーポリシーに「スパム防止技術の利用」を記載
・計測連携送信成功時のみコンバージョンタグを発火(重複発火を防止)
