[WordPress]Contact Form 7とContact Form 7 add confirmでフォームの遷移をGA計測

・contactform7がバージョンアップし、on_confirm、on_sent_okが利用できない
・contactform7 add confirmも2018/02/06にアップデート
ということで、調べながらやりました。

▼やりたいこと
フォームの遷移をGAで以下のように計測するよう設定したい。
・入力:/sampleform ←入力ページのURLそのまま
・確認:/sampleform_confirm.html ←確認画面遷移時に仮想URLを送る
・完了:/sampleform_complete/ ←完了時は完了画面へ遷移させてこのURLを計測させる

▼プラグインのバージョン
Contact Form 7:4.9.2
Contact Form 7 add confirm:5.0

▼対応方法

1.固定ページで完了ページを作成

http://sample.com/sampleform_complete というURLで作成

2.コンタクトフォーム編集画面から、フォームのボタンを編集

入力ページでは 「確認」ボタン
確認ページでは 「戻る」ボタン、「送信」ボタン
が表示されるように、
ボタン箇所を以下の通り編集する。

<p class="form_btn wpcf7c-elm-step1">[confirm]</p>

<div class="wpcf7c-elm-step2">
<p>[back]</p>
<p>[submit]</p>
</div>

3.functions.phpに以下コードを追記する


<?php
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '123' == event.detail.contactFormId ) {
//フォームID=123の時のみ動作させる
if(event.detail.status == "mail_sent"){
location.href = "http://sample.com/sampleform_complete/";
}else{
ga('send', 'pageview', {'page':'/sampleform_confirm.html', 'title':'サンプルフォーム(確認)'});
}
}
}, false );
</script>
<?php
}
?>

★補足事項★
●DOMイベント「wpcf7submit」をlistenする
→確認、完了を拾う(戻ったときは動かない)。

●if ( ‘123’ == event.detail.contactFormId ) { でフォームIDを指定し、特定のフォームだけ動かす
→フォームタグ
 [contact-form-7 id=”123″ title=”サンプルフォーム”]
 のid(この場合は123)を指定する

●イベントオブジェクトのプロパティでstatusを拾う
→mail_sentの時は送信完了、それ以外は確認、とする。
 add confirm制作会社さんのサイトに書いてあった以下コードが動かず、
switch ( event.detail.status ) {
case 'wpcf7c_confirmed':
 確認後に実施したい処理
break;
}

 event.detail.statusの中身を確認したら、
 完了時 event.detail.status=”mail_sent”
 確認時 event.detail.status=””
 だったため。

●確認端末は以下
Win10 / Firefox
Win10 / Chrome
Win10 / IE11
Win10 / MicrosoftEdge
iOSX / Safari
iPhone10 / Safari
Android / Chrome

▼参考サイト

DOM イベント | Contact Form 7 [日本語]
on_sent_ok は廃止されます | Contact Form 7 [日本語]
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン | アイティーエー株式会社