ご相談はLINE公式アカウントからどうぞ
PR

【超カンタン!!】GoogleタグマネージャでContact Form7の送信を計測・解析できるようにする方法

【当サイトはアフィリエイト広告を利用しています】

どうも、株式会社SNACのまつです。

この記事ではGoogleタグマネージャを使ってContact Form7の問い合わせ送信を計測するための方法を解説します。

普段、何気なく設定している問い合わせフォームですが、あまり数字で見える化している人は少ないんじゃないでしょうか。

タグマネージャでContact Form7の送信解析を設置すれば

  • 問い合わせの送信数がわかる
  • どの問い合わせフォームから送信されたかがわかる

という大きなメリットがありますので、ぜひ記事を読みながら設置してみてくださいね。

[aside type=”boader”]

★事前に済ませておくこと★

記事の通りに作業すれば10分以内に終わります!

[/aside]

タグマネージャでContact Form7の送信を計測するメリット

ではまずはタグマネージャでContact Form7の送信を計測するメリットについて書きます。

[aside type=”boader”]

★いいからさっさと設置方法教えろや!という場合はこちらをクリック!

タグマネージャで問い合わせ数の解析を設置する方法へGO!!

[/aside]

①アナリティクスで問い合わせの送信数が見れる

タグマネージャでcontact form7の送信解析を設置する方法

コンタクトフォーム7の送信解析を設置することで

  • 問い合わせの合計送信数

が見れるようになります。つまり月間3件の問い合わせをもらったら「9月の問い合わせ=3」という結果が数字で見えるようになるということですね。

いちいち計算しなくてもアナリティクスが全部計測してくれるので、集計がとっても楽になります。

②アナリティクスで問い合わせページ毎の送信数がわかる

問い合わせフォームの送信解析

送信解析を設置すると

  • 問い合わせページ毎の送信数がわかる

ようになります。

例えばあなたのサイトに

  • サービス申し込み用の問い合わせフォーム
  • サイトに関する問い合わせフォーム
  • 無料相談用の問い合わせフォーム

の3つのフォームが存在するとします。このフォームのどこから送信されたか?を知るためには、問い合わせメールをいちいち確認しなければいけません。

でもタグマネージャを使って一度送信解析を設置すれば、アナリティクスで一目瞭然でわかります。手間も省けてわかりやすくなるのは最高ですね!

③問い合わせの送信数を計測することで、ページの改善に役立つ!

問い合わせの送信数を計測することでページの改善に役立ちます。

例えば

  • ページがしっかり読まれているにも関わらず問い合わせが来ない=問い合わせフォームを入力しやすくする
  • 特定のページだけ問い合わせが来ない=ページを読んでもらえるようにする

などの対策ができますね。数字を正しく計測することで、より正確な施策ができるようになります!

タグマネージャでContact form7の送信計測を設置する方法

では早速タグマージャを使ってContact Form7の送信を計測できるようにしましょう。

今回の作業では

  1. 変数を設定する
  2. トリガーを設定する
  3. タグを設定する
  4. プレビューで確認し、公開する
  5. アナリティクスで問い合わせフォーム計測のテストをする

の5つの流れでやっていきます!5分あれば設定できるので、画面を見ながら作業してみてください!

①変数を設定する

では変数の設定をしましょう。

まずはタグマネージャにアクセスをしてください。

タグマネージャでcontact form7の送信解析を設置する方法

「変数」をクリックしましょう。

タグマネージャでcontact form7の送信解析を設置する方法

組み込み変数のところで「設定」をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

「フォーム」の項目の部分に全部チェックを入れてください。

タグマネージャでcontact form7の送信解析を設置する方法

全部チェックを入れたら赤枠内あたりをクリックして右側の画面を閉じます。これで変数の設定は終了です。

[aside type=”lime”]

★変数って何やねん?という人へ★

変数とは「トリガー(スイッチ)によって動くプログラム」だと思ってもらえればいいです(素人なりに調べた見解です。プログラミングとかは詳しく知らないのでご了承を!)

例えばGoogleタグマネージャで内部リンク/外部リンクのクリック解析を設置する方法では

内部リンク又は外部リンクがクリックされる」というトリガー(きっかけ)によって変数がクリック計測しまっせー。という設定をしました

ちなみにタグはユーザーの「クリック(というトリガー)を追跡・監視する為の装置を埋め込むで!」みたいな感じです。

つまりクリック解析を例にした場合は

  1. タグを設置=ユーザーのクリック行動を監視!
  2. リンクがクリックされる(特定の行動をする)=トリガー発動!
  3. 変数が動く=データを取得!

という流れになります。なんとなくわかりましたでしょうか。

[/aside]

ではでは次はトリガーの設定ですね!

②トリガーを設定する

タグマネージャでcontact form7の送信解析を設置する方法

「トリガー」をクリックしましょう。

タグマネージャでcontact form7の送信解析を設置する方法

「新規」をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

赤枠の部分辺りをクリック。

タグマネージャでcontact form7の送信解析を設置する方法

トリガータイプは「フォームの送信」を選択します。

タグマネージャでcontact form7の送信解析を設置する方法

トリガーの種類の選択画面になります。ここは以下のように設定をしてください。

タグの配信を待つチェックを入れる
待ち時間の上限「2000」のままにする
妥当性をチェックチェックを入れない
これらすべての条件にtrueの場合にトリガーを有効化
Page Path正規表現に一致.*
このトリガーの発生場所一部のフォーム
イベント発生時にこれらすべての条件がtrueだった場合にトリガーを配信します
Click Classes含むwpcf7-form

これらすべての作業が終わったら「保存」をクリックしましょう。

[aside type=”yellow”]

★作業内容を詳しく知りたい人向け★

Page Pathドメイン以降のページ(https://arata01.info/→○ここからがドメイン以降○)やディレクトリ部分(プラグインとか画像とかが入ってるファイル)を指定するものです。

「正規表現に一致」にした理由は「含む」にしてしまうと他の要素も含まれてしまう可能性があるので、正規表現に一致にして、ンタクトフォーム7の送信だけを計測できるようににしました。

Form Classes…フォームなどに指定されているクラス名のことです。
今回はコンタクトフォーム7のクラス名である「wpcf7-form」を指定しています。

★コンタクトフォーム7のクラス名を確認する方法★

クラス名の確認方法は、サイトの問い合わせページにアクセスして右クリックをします。

タグマネージャでcontact form7の送信解析を設置する方法

「ページのソースを表示」をクリック。

タグマネージャでcontact form7の送信解析を設置する方法「Ctrl+F5」キーを押して「wpcf7-form」と検索すると、コンタクトフォームタグのクラス名「wpcf7-form」が確認できました。

今はこのクラス名から「フォームの送信」というイベントが起こった際に計測してね!という作業をしているところです。ちなみにわからなくても全く問題ないので、次に進みましょう。

[/aside]

タグマネージャでcontact form7の送信解析を設置する方法

トリガー名は「問い合わせ送信」などとわかる名前を付けて保存しましょう。これでトリガーの設定は完了です!

③タグを設定する

次はタグの設定を行います。

タグマネージャでcontact form7の送信解析を設置する方法

左側メニューにある「タグ」をクリックしましょう。

タグマネージャでcontact form7の送信解析を設置する方法

「新規」をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

赤枠の辺りをクリックしてください。

タグマネージャでcontact form7の送信解析を設置する方法

タグタイプを「Googleアナリティクス -ユニバーサルアナリティクス」にしましょう。

タグマネージャでcontact form7の送信解析を設置する方法

次にタグタイプを設定していきます。

トラッキングタイプイベント
カテゴリ問い合わせ送信
アクション{{Page URL}}
1(半角数字)
Googleアナリティクス設定Googleアナリティクス変数(最初にアナリティクスを設定した時の変数になっているはずです)

上記のとおりに設定をしましょう。

 

[aside type=”yellow”]

★Googleアナリティクス設定について★

Googleアナリティクス設定で設定する変数はは「変数」メニューのページ下の方に表示されているはずです。

Googleアナリティクス変数

このユーザーが定義変数の名前が変数です。

[/aside]

上記のとおりに設定をしたら画面下にスクロールしましょう。

 

タグマネージャでcontact form7の送信解析を設置する方法

トリガーという項目があるので、赤枠の部分をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

「問い合わせ送信」のトリガーを選択しましょう。

タグマネージャでcontact form7の送信解析を設置する方法

作業が終わったら「保存」をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

タグ名は「問い合わせ送信」などと付けて保存しましょう!これで送信の解析設定は完了です!

④プレビューで確認し、公開しよう!

さてさてフォームの設置が終わったら、次はプレビュー機能を使ってタグがちゃんと設定されているか確認をしましょう。

タグマネージャでcontact form7の送信解析を設置する方法

右上にある「プレビュー」をクリックします。

タグマネージャでcontact form7の送信解析を設置する方法

するとオレンジ色になって「プレビュー中」になりましたね。この状態で自分のサイトにアクセスすると、タグの設置状況を見ることができます。

ではでは実際に自分のサイトにアクセスをしてみましょう。

タグマネージャでcontact form7の送信解析を設置する方法

「問い合わせ送信」のタグの項目がありましたね!これでちゃんと設定できました!

⑤アナリティクスで問い合わせフォーム計測のテストをしよう

ちゃんとタグが設置できたとはいえ「問い合わせ送信をちゃんと計測できるのか?」ちょっと不安ですので、最後にテストをしてみましょう。

下記のページは僕のサイトにある実際の問い合わせページです。

タグマネージャでcontact form7の送信解析を設置する方法

実際に入力して送信をしてみました。

すると…

タグマネージャでcontact form7の送信解析を設置する方法

アナリティクスの「リアルタイム」→「イベント」のページで問い合わせ送信が「1」になりました。これでちゃんと問い合わせが計測できるようになりました!

これで問い合わせ解析の設置作業がすべて完了です!

まとめ

問い合わせフォームの送信を分析することで、成約率やページの改善に役立ちます。

タグマネージャで今回の作業を行えば、すべてのコンタクトフォーム7の送信が記録できるので、データ分析には必須です。

「データを元にちゃんと効果の出る施策がしたい」という人には大切な設定なので、ぜひこれからのサイトの問い合わせ率アップに役立ててくださいね!