[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に確認画面をものすごく簡単に付けられるプラグイン | アイティーエー株式会社