Contact Form 7で送信完了ページにリダイレクトしたり、Googleアナリティクスのトラッキングを取るためにon_sent_okフックを使っているんですが、
on_sent_ok
のフックを使用する方法は現在では非推奨になっています。この機能は2017年中に廃止される予定です。
とのこと。
on_sent_okフックを使かわないでDOMイベントで対応するそうです。
詳しくは公式サイトにも書かれていますが、備忘録として残しておきます。
on_sent_ok を DOM イベントに置き換える
送信完了後に別ページにリダイレクトする場合(サンキューページへ遷移する場合など)
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://example.com/sent_ok'; }, false ); </script>
http://example.com/sent_okの部分を遷移したいURLにする。
このスクリプトを該当のフォームに挿入する。
これはfunctions.phpで対応。
//フッターにスクリプト表示 function add_footer_script() { if(is_page('entryform')){ echo '<script type="text/javascript"> document.addEventListener( \'wpcf7mailsent\', function( event ) { location = \'/sent_ok\'; }, false ); </script>'; } } add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );
2行目で、「entryform」というページのみに表示させるよう条件分岐
3行目のecho~以下にスクリプトを挿入。
sent_okというURL(スラッグ)のページへリダイレクト
特定のコンタクトフォームのみに適用したい場合はコンタクトフォームのIDを指定する
//フッターにスクリプト表示 function add_footer_script() { if(is_page('entryform')){ echo '<script type="text/javascript"> document.addEventListener( \'wpcf7mailsent\', function( event ) { if ( \'1515\' == event.detail.contactFormId ) { location = \'/sent_ok\'; } }, false ); </script>'; } } add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );
上記の場合はコンタクトフォームIDが1515
Googleアナリティクスのトラッキング
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { ga('send', 'event', 'Contact Form', 'submit'); }, false ); </script>
イベントカテゴリーが “Contact Form”、イベントアクションが “submit” のイベントとしてトラッキング
function add_head_script() { echo '<script> document.addEventListener( 'wpcf7mailsent', function( event ) { ga('send', 'event', 'Contact Form', 'submit'); }, false ); </script>'."\n"; } add_action('wp_head', 'add_head_script');
※HTMLヘッダーに挿入する場合(このソース未検証)
※ページリダイレクトとGAトラッキング両方やるなら併せてヘッダーに挿入したほうがスマートかも
詳しくは公式サイトより
on_sent_ok は廃止されます
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/
DOM イベント
https://contactform7.com/ja/dom-events/
フォーム送信を Google Analytics でトラッキングする
https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/
送信後に異なる URL にリダイレクトさせるには
https://contactform7.com/ja/redirecting-to-another-url-after-submissions/