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

著者:Akiyoshi Takashima

公開日:

カテゴリー:

WEB制作

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 でトラッキングする

 

Twitter でウェブ屋のアキさんをフォローしよう!

The following two tabs change content below.
Akiyoshi Takashima
ウェブサイトからの集客・反応率アップにつながる情報をお届けします。ウェブサイト制作やリニューアル、運営でのご相談はお問い合わせください。初心者の方でもわかりやすくご説明いたします。
Akiyoshi Takashima

最新記事 by Akiyoshi Takashima (全て見る)