ContactForm7で完了ページへリダイレクト

2023年1月23日2023年4月7日

ContactForm7はそのままだと、サンクスページへリダイレクトされません。

サンクスページへリダイレクトさせることで、GoogleAnalyticsでの計測や、サンクスページでのオファー（訴求）が可能になります。

それでは、Contact form7で完了時にリダイレクトさせる方法を紹介します。

完了ページを作成する

固定ページや投稿ページ上で完了ページを作成します。

作成が完了したら記事IDを覚えておいてください。この記事IDを後ほど使用します。

投稿ID/固定ページID：?post=のあとに続く数字

完了ページで気をつけたいポイントは、ワードプレス上の検索・Googleなどの検索に表示されないようにすることです。

Google検索などで表示されないように

Google検索にインデックスされないように、noindexを設定します。利用しているThemeに記事ごとに個別にnoindexがつけられない場合は、「WP Custom Noindex Nofollow」や「All In one SEO」といったプラグインをインストールして対応してください。

ワードプレス上の検索

ワードプレス上での検索から除外には、プラグインを利用する方法と、functions.phpに記載する方法があります。今回はfunctions.phpに記載する方法をご紹介します。

//ページ内検索除外
function search_exclude($query)
{
	if ($query->is_search && !is_admin()) {
		//thanksページ
		$query->set('post__not_in', array(記事ID));
	}
	return $query;
}
add_action('pre_get_posts', 'search_exclude');

記事IDとなっている部分を、先程控えておいた記事IDに置き換えてください。

完了ページへリダイレクト

ContactForm7には、イベントが用意されています。このイベントをイベントリスナーで取得して完了ページへリダイレクトさせます。

functions.phpへの記載は以下の通りです。リダイレクトさせたいURLを完了ページURLと置き換えてください。

URLはhttps:// から記載します。

//Contact7 フォームリダイレクト

function contact7Redirect()
{

?> 
<script type="text/javascript">
		document.addEventListener('wpcf7mailsent', function(event) {
				location = 'リダイレクトさせたいURL';
		}, false);
</script>

<?php
}
add_action('wp_footer', 'contact7Redirect');

以上で完了です。Contact form7で完了後リダイレクトされているはずです。

ここからはマストではないですが、正確なデータを取るために私が行っていることです。

完了ページをリロードされた場合、GAなどの計測ツール上で2重でカウントされてしまうことがあります。2重でのカウントを避けるため、リロード対策も行いたいと思います。

完了ページでのリロード対処

JavaScriptを利用し、完了時にセッションストレージに任意のKeyと値を入れます。
完了ページ上では、Keyがあればそのままページ表示を行い、keyを削除します。
Keyがない場合は、指定したページへリダイレクトさせます。

完了時にセッションストレージにKeyを追加

先程の完了ページへリダイレクトさせるさいに記述したコードに、以下の1行を付け足します。

window.sessionStorage.setItem(['Contact'], ['done']);

記載場所は以下になります。

//Contact7 フォームリダイレクト

function contact7Redirect()
{

?> 
<script type="text/javascript">
		document.addEventListener('wpcf7mailsent', function(event) {
                                window.sessionStorage.setItem(['Contact'], ['done']);
				location = 'リダイレクトさせたいURL';
		}, false);
</script>

<?php
}
add_action('wp_footer', 'contact7Redirect');

完了ページに記載するJSは以下の通りです。

<script>
if (sessionStorage.getItem("Contact")) {
sessionStorage.removeItem(['Contact']);
}else{
location = 'リロードされた際に表示させたいURL';
}
</script>

ページの上部に記載をします。解析タグよりも上に設置することで、リロードされた際に解析タグが発火する前に、指定したページへリダイレクトされます。

私はfunctions.phpに以下の記載を行うことで対応しています。

//Contact7 Thanksページのみscript記述
function js_headTag()
{
if (is_page(array('記事ID'))) {
$headcustomtag = <<<EOM
<script>
if (sessionStorage.getItem("Contact")) {
sessionStorage.removeItem(['Contact']);
}else{
location = 'リロードされた際に表示させたいURL';
}
</script>
EOM;
echo $headcustomtag;
	}
}
add_action('wp_head', 'js_headTag', 1);

sessionStorageとは

// sessionStorage にデータを保存する
sessionStorage.setItem('key', 'value');

// sessionStorage に保存したデータを取得する
var data = sessionStorage.getItem('key');

// sessionStorage に保存したデータを削除する
sessionStorage.removeItem('key')