Contact Form7にリスティングのコンバージョンタグを埋め込む方法

こんにちはWEBマーケティング事業部のMです。今回は題名の通り、Wordpressプラグインで最もボピュラーなプラグイン、Contact Form7にリスティングのコンバージョンタグを埋め込む方法について書かせていただきます。

■Contact Form7にはサンクスページが無い

はい、まず壁にぶち当たるのが、これです（笑）サンクスページは別途作成しておき、フォーム送信時にリダイレクトさせる設定をする必要があります。 まずこれがちょっと面倒。 以前はコンタクトフォームから「その他の設定」タブを開き、以下のようなソースを入力するだけでフォーム送信後、自動的にリダイレクトできました。

on_sent_ok: ‘ location.replace(“https://ここにはサンクスページのURLなどを記載”) ;
on_sent_ok: “return;”

ただ、現在はこちらの設定は廃止されています。

■リダイレクトさせるための記述はfunctions.phpに記載する

Wordpressの外観→テーマの編集で、functions.phpを開き、以下を記述していきます。

<?php

//ここから
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
   location.replace('遷移先のURL');
}, false );
</script>
<?php
}
//ここまで

?>

location = ”;の値は、作成したサンクスページのURLを指定しください。ここで指定したURLに送信後に遷移される仕組みとなっています。 なので、サンクスページが必要な場合は、まず固定ページでサンクスページを作っておき、上記の記述でリダイレクトさせるという流れになります。 なんだ、簡単！！！！ でもお待ちください。例えばサンクスページが複数ある場合はどうしましょう？上記の記述では、コンタクトフォームで複数のフォームを複数ページに作ったとしても、全て同様のサンクスページにリダイレクトされてしまいます。 え？いいんじゃないの？ と思うかもしれませんが、ちょとお待ちください。 今回の議題は、「サンクスページにリスティングコンバージョンタグを埋め込む方法」です。 タグは通常フォーム送信完了ページ（サンクスページ）に埋め込みますので、複数サンクスページを用意しておかないとどのページ経由のCVか分からなくなってしまいますよね。 ということで記述を以下のように変更します。どのページに設置したフォームかをページIDで指定して条件分岐します。 下記であれば、ページID=○○のフォームは送信後、xxxx/thanks/を表示、それ以外のページのフォームはxxxxx/thanks2/といった具合です。

<?php

//ここから
dd_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
              if ( '○○' == event.detail.contactFormId ) {
        location = 'https://xxxx/thanks';
    }
  else
  if ( '○○' == event.detail.contactFormId ) {
  location = 'https://xxxx/thanks2';
  }
}, false );
</script>
<?php
}
//ここまで

?>

これで、それぞれのサンクスページにリダイレクトタグを埋め込む準備が整いました！

■次に壁にぶち当たるのはサンクスページの改造

まず、サンクスページを固定ページで２つ作成した場合、固定ページの属性「テンプレート」を２つに分ける必要があります。 page-thanks.phpをサーバーからダウンロードし、page-thanks2.phpなど別のファイル名で保存します。 次に、それぞれのファイルを開き、テンプレート名を以下のように変更します。

<?php
/*
Template Name: LP thanks（メイン）
*/
?>

<?php
/*
Template Name: LP thanks（フォーム2）
*/
?>

このように書き換えたら、page-thanks.php、page-thanks2.phpを両方サーバーに上書き保存します。 Wordpressの管理画面に戻ると、固定ページの属性テンプレートのところに先ほど書き換えたテンプレートの名前がプルダウンで出てくるようになりますので、それぞれのテンプレートを選びなおします。

これで、それぞれのサンクスページにそれぞれのテンプレートが紐づきました！

■テンプレートファイルを更に書き換える

いよいよリスティングタグの埋め込みです！Googleは内に、Yahooはタグ直前にタグを入れる仕様になっているかと思います。 なので、page-thanks.phpを書き換える必要があります。 例えば、page-thanks.php内のがheader.phpを読み込んでいる場合、header.phpにタグを入れてしまった全てのページに適用されてしまうので、header.phpをを更に複製してそれぞれのテンプレートに読み込ませるか、page-thanks.php内に直接を書いてしまうかのどちらかでOKかと思います。 私はめんどくさいので後者で対応しました（笑） タグ直前にタグを入れる場合も同様の手順となります。 以上が一連の流れとなります。 最後に、今回はContact Form7を使ってリスティングのCV計測をする方法について書かせていただきましたが、クライアントによってはURLが変わらないフォームを使っている場合もあるかと思います。 URLが変わらないフォームとは、

入力　http://www.kawaranai.com/form/
↓
確認　http://www.kawaranai.com/form/
↓
完了　http://www.kawaranai.com/form/

となるフォームのことです。。。 これはまた厄介。 次回はこちらの計測方法について書かせていただければなと思います。（覚えていたら、、、） 以上、最後までお読みいただきありがとうございました！

——————————————————-

横浜のホームページ制作会社・動画制作会社ならBOTANICO

WEB制作、動画制作、広告配信などの集客マーケティングをワンステップで行い、クライアント様の課題解決のお手伝いをさせていただきます！ お気軽にご相談くださいませ！ ■お問い合わせはこちら：https://btnc.co.jp/contact/