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

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

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

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

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

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

前提条件

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

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

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

タグ
１：CF7 tag（イベントを実行する役割）
２：CF7 cv（イベントをGoogleアナリティクスに送る役割）

トリガー
３：CF7 send（フォームが送信されたことを知らせる役割）

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

設定の流れ

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

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タグマネージャーでの設定が完了しました。