コンタクトフォーム7 (ワードプレスのプラグイン contact form7)でコンバージョンの設定をしたいが、できない。コンタクトフォーム7にサンクスページを指定したが、結局ダメ。 Redirection for Contact Form 7プラグイン も設定したがダメ。GTMでフォームの送信トリガを設定したが未入力エラーでもコンバージョンがカウントされてダメ。いくつものダメにうんざりしている方々もいるであろう。
GTMでのコンタクトフォーム7のコンバージョン設定方法完全版をご紹介する。
wpcf7mailsent(サンクスメール送信時イベント)を感知するタグを作成。トリガはAll Pages
![カスタムHTML](https://www.asiastars.org/wp-content/uploads/2022/03/image-743x1024.png)
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
データレイヤー変数を用意。 formId で。
![データレイヤー変数設定](https://www.asiastars.org/wp-content/uploads/2022/04/image-29.png)
カスタムイベント作成。 上記コードwpcf7mailsentを感知した時の処理でデータレイヤー変数 event 名とその値 cf7submissionが確認できる。 これに対応させた処理をトリガで設定する。formIdはコンタクトフォーム7のショートコードにあるID番号でフォームを指定する。 formId がその ID番号 を含んでいれば、という発火条件となる。
![カスタムイベント](https://www.asiastars.org/wp-content/uploads/2022/03/image-1-1024x588.png)
ショートコードはワードプレス管理画面「お問い合わせ」、「コンタクトフォーム」で確認できる。id以下に formId に相当する番号が掲載されている。
![コンタクトフォーム7ショートコード](https://www.asiastars.org/wp-content/uploads/2022/03/image-2-1024x81.png)
サンクスページ、実際には(サンクス)メール送信時に発生するイベントおいてformIdが設定した番号を含んでいる条件で発火するタグを作成。
UA(ユニバーサルアナリティクス)のタグ・トリガー
![お問い合わせタグ](https://www.asiastars.org/wp-content/uploads/2022/03/image-4-980x1024.png)
*複数ページにお問い合わせフォームがあるような場合はラベルで{{Page Path}}設定しても可。
![ラベル設定](https://www.asiastars.org/wp-content/uploads/2022/03/image-61.png)
![カスタムイベント cf7submission](https://www.asiastars.org/wp-content/uploads/2022/03/image-5.png)
GA4のタグ・トリガー
![お問い合わせタグ for GA4](https://www.asiastars.org/wp-content/uploads/2022/03/image-57.png)
イベント名だけ入れとけばよい。
*複数ページにお問い合わせフォームがあるような場合はpagepathパラメータを設定しても可。
*GA4でのイベント名およびイベント数の反映には最大1日程度かかる。
![イベントパラメータ](https://www.asiastars.org/wp-content/uploads/2022/03/image-60.png)
![カスタムイベント cf7submission for GA4](https://www.asiastars.org/wp-content/uploads/2022/03/image-59.png)
ここまでイベントの設定でした。コンバージョンの設定はUAやGA4のイベントそれぞれで行ってほしい。
UAの場合:
タグマネでイベント設定具体例 アナリティクス目標設定 ご参照ください。
GA4の場合:
GA4のカスタムイベントからのコンバージョン設定確認 何か忘れてないですか?そう、コンバージョン設定 ご参照ください。
タグを複数作成したり、データレイヤーが出てきたりと少々盛りだくさんな内容でした。