こんにちは！ウェブサバイバー管理人のYeah-Manです！さて今回はKairosというマーケティングオートメーションツールについてるフォーム提供機能(iframeでなくAPI)にGoogle reCAPTCHA v3を導入したお話です。v2もテストで実装しましたがお蔵入りということで省略します！

KairosのAPI提供フォームではKairos側のGoogle reCAPTCHAは使えない

さて、しょっぱなからつまづきますw。KairosのAPI提供でのフォーム作成の場合、KairosでのGoogle reCAPTCHAは使えませんでした(2021/1/25現在)。
管理画面から『Google reCAPTCHAの設定』なんてものがあるから余計わかりづらかったのですが、APIフォームではKairosoのGoogle reCAPTCHAは使えない様子(おもっきりヘルプ等に書いてありました。)。

使うならiframeでの利用か、リンクで飛ばすしかないようでした。

しかし要件は『API提供フォームのでGoogle reCAPTCHA実装』ということで、以下方策をとりました。

入力画面で全てまかなう

はい、これですね。

端的にはなにかしらGoogleアカウントを用意して、そちらでreCAPTCHA v3を発行。発行したサイトキー、APIキーを利用して、すべて入力画面で行おうという話です。

今回調べを進めていく中でこちらのサイト様が大変わかりやすかったので、他のケースでもGoogle reCAPTCHAを実装するときもぜひご参照ください。

本題に戻りますが、普通にPOSTして自サーバーにて処理を進めるのなら簡単に対応できるGoogle reCAPTCHAですが、Kairosでは、iframeか別リンクでの実装以外、Google reCAPTCHAを実装する手段がないようでした。API側もできないと明記してある通り、Kairosの決められたURLへPOSTして、あとはKairosにお任せてへぺろ！みたいな感じだったため、実装が難しそうです。
※あくまでYeah-Manとしてはです。

ではどうするかという話ですが、XMLHttpRequest(いわゆるajax)を使ってすべて入力画面で実装することで解決しましたのでそちらの方法について解説したいと思います。

実装コード

さて、実際のコードです。まず表示画面側は以下を埋め込みます。

//

まずこのソースを埋め込んだページのカイロスフォームをsubmit(送信)したら処理が開始します。
次にAPIキーを元にgrecaptcha.excuteというメソッドを使って取得したtokenを、ドメイン直下の『/recaptcha_check.php』へXMLHttpRequestでPOST。php側で処理した結果、問題なければsubmitを実行という処理です。

次にPOSTされるrecapcha_check.php側の処理を見てみます。

//ドメイン直下に直置きしているファイルなのでWordPressの関数が使えない。なのでwp-load.phpを最初に読み込むことで使えるようにしています。
//特に不要であれば削除して問題ないコードです。
require __DIR__ . "/wp-load.php";

//AjaxでPOSTされてきたレスポンスを受け取ります。
$token = $_POST['response'];

if($token) {
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $secret_key = 'example secret key';

    //POSTされたtokenと、recapchaの管理画面で発行したシークレットキーを結合したURLを作成、file_get_contentsを使ってrecapchaへアクセスし結果をjsonで受け取ります。
    $response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
    $json = json_decode($response, true);

    //echo json_encode($json, true);

    //scoreにボット判定のスコアが入ってきますが、それが0.5以上ならget_fieldで取得したURLを返却します。
    if($json['success'] == 'true' && $json['score'] >= 0.5) {
        //echo json_encode($json, true);
        $_post_id = $_POST['post_id'];
        if ( $_post_id ) {

            $_kairos_default = get_field('kairos_action',(int)$_post_id);
            if ( $_kairos_default ) {
                echo $_kairos_default;
            }

            $_kairos_lp = get_field('lp_new_kairos_action',(int)$_post_id);
            if ( $_kairos_lp ) {
                echo $_kairos_lp;
            }
            
        } else {
            echo 'has not field data.';    
        }       
    }
}

他にも要件あったのでちょっとソースがごちゃついてますが、そんな感じです。

JSで色々操作できるAPIフォームはとても便利

さて、ここまでサクッと導入方法について紹介してきましたがいかがでしたか？こういったフォームを埋め込み形式、しかもこういった形でカスタマイズをある程度許可した状態でのAPI提供に加え、マーケティングまで自動でやってくれるってんだからいやはやすごい時代になったもんですw

カイロス以外でもMAツールではこういったAPIフォーム提供があると思いますので、またその他ツールで利用することがあれば記事にしてみたいと思います！以上、Yeah-Manでした！ちゃお!