WEBサイト制作の依頼はこちら

Contact Form 7のコンバージョンをGoogleタグマネージャー(GTM)を使って計測する方法

WordPressでContact Form 7のプラグインを使ってフォームを作成している方も多いと思います。Contact Form 7のフォーム送信後は確認画面が出ない仕様なので、Googleアナリティクス上でサンクスページをゴールに設定してコンバージョンを計測するということができません。

では、どうやってContact Form 7でコンバージョンを取得するかというと、サンクスページのかわりにイベントを使ってゴール設定をします。
この方法はコンタクトフォーム7の公式サイトに掲載されているのですが、Googleタグマネージャーには対応しておらずコンバージョンがとれないのです。

Googleタグマネージャーを使ってContact Form 7でコンバージョンをとる方法を調べると方法はいくつかでてくるのですが、JavaScriptが詳しくない僕にとっては難しく同じように設定したつもりでも動かないというものがありました。もっとシンプルな方法で設定できないかと改めて調べ直すと江尻さんの記事を見つけました。簡単な方法を紹介されています。

ここでは江尻さんの記事を参考にして、JavaScriptをあまり知らなくてもGoogleタグマネージャーを使ってコンバージョンの計測ができるようにGoogleタグマネージャーの設定手順を書いてみます。

Googleタグマネージャーの設定手順

前提条件

1:お問い合わせフォームはウェブサイト内にひとつを想定
2:Googleタグマネージャーだけで導入を完結(サイト自体には変更を加えないこと)
3:フォーム送信が完了しメールの送信も行われた場合のみCVさせる
4:Googleタグマネージャー コンテナ 作成済み
5:Googleタグマネージャー GAトラッキングID変数 作成済み

この条件を前提にした手順になります。

用意するタグ及びトリガーは3つ

タグ
1:CF7 tag(イベントを実行する役割)
2:CF7 cv(イベントをGoogleアナリティクスに送る役割)

トリガー
3:CF7 send(フォームが送信されたことを知らせる役割)

※タグ・トリガーの名前は何でもOK。

設定の流れ

まず、タグの配信からデータを取得するまでの流れですが、
1:ページが読み込まれたらタグCF7 tagを配信。
2:フォームが送信されたらトリガーCF7 sendが発火してタグCF7 cvを配信。
3:配信されたイベントの値をGoogleアナリティクスで取得。
という3ステップになります。

1. 【タグ】CF7 tagを作成する

メニューからタグを選択し、続いて新規をクリックします。
カスタムHTMLを選び、以下のスクリプトを記載します。

<script>
document.addEventListener('wpcf7mailsent',function(event){dataLayer.push({'event':'cf7submit'});},false);
</script>

配信トリガーをAll Pagesにします。
(All Pagesを選ばずに、フォームがあるページ/contact/など限定してもOKです。)

以上でCF7 tagの設定は完了です。

※wpcf7mailsentは、フォーム送信が完了し、またメールの送信も行われた場合に発生するイベントのこと。フォームおよびメールの送信が完了して計測したいので、このイベントを使います。

2. 【トリガー】CF7 sendを作成する

メニューからトリガーを選択し、続いて新規をクリックします。
トリガータイプをカスタムイベントを選び、イベント名をcf7submitにします。
このトリガーの発生場所をすべてのカスタムイベントに設定します。

以上でCF7 sendの設定は完了です。

3. 【タグ】CF7 cvを作成する

メニューからタグを選択し、続いて新規をクリックします。
以下のように設定をします。

■タグの設定
タグの種類:Googleアナリティクス・ユニバーサル アナリティクス
トラッキングタイプ:イベント
カテゴリ:cv(Googleアナリティクスの方でも同じ名前で設定します)
アクション:submit
:1
Googleアナリティクス設定:トラッキングIDの変数

■トリガー
配信トリガー:CF7 send

以上でCF7 cvの設定は完了です。

これで、Googleタグマネージャーでの設定が完了しました。

4.タグを配信する

設定が完了してもタグは配信されません。
右上にある公開をおしてタグを配信します。

※公開前にはプレビューを押して動作確認するのですが今回はその手順は省きます。

Googleアナリティクスでコンバージョンを設定する

Googleアナリティクスの管理から目標を選択します。
新しい目標をクリックして、以下のように設定します。

■目標設定
カスタム

■目標の説明
目標名:お問い合わせ送信(名前はなんでもOK)
目標タイプ:イベント

■目標の詳細
カテゴリ:等しい:cv
アクション:等しい:submit

コンバージョンの目標値としてイベント値を使用
はい

設定が完了したら保存します。
これでGoogleアナリティクスのコンバージョンが設定されました。

コンバージョンの有無を確認する

コンバージョンの動作は、リアルタイムのメニューから確認できます。
コンバージョンがうまくできていたらこのようにリアルタイムで反映されます。

イベントでも計測できるようになっています。

以上で、Contact Form 7のコンバージョン設定は完了です。
Googleのタグマネージャーをそもそも触ったことがないということでしたら、少々ハードル高いかもしれませんが……。
これでContact Form 7のコンバージョン設定で悩む人の手助けになれればと思います。

参考にした記事:
WordPressでContactform7のコンバージョンをGoogleアナリティクスでタグマネだけで取る方法(2018/9/24現在)
フォーム送信を Google Analytics でトラッキングする

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です