【計測方法が変わりました】Contact Form 7のGoogleアナリティクスでのイベントトラッキング

こんにちは、連クミコです。

WordPressでのサイト構築の際、プラグインは手軽に高度な機能を追加できるとても便利なツールです。

しかし、プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合、GoogleアナリティクスやGoogleタグマネージャだけでなく、プラグイン自体の仕様も理解しておく必要があるため、とても難解な作業となります。

とはいえ、WordPress全盛のこのご時世、避けては通れまいと、手始めに「Contact Form 7」のトラッキングから試してみました。

注意: on_sent_ok のフックを使用する方法は現在では非推奨になっています。この機能は2017年中に廃止される予定です。

公式サイトでこのような注意書きが書かれていたので、本記事では、公式の推奨するカスタムDOMイベントを使ったイベントトラッキング方法を試みています。ただし、WordPressの必要バージョンが「4.6以上」とのことなので、古いWordpressのバージョンのまま運用されている場合は、アップデートが必要になります。

また今回の方法は、「Contact Form 7」公式サイトの他、「WordPress Codex日本語版」に記載のアクションフックの記述方法を参考にさせて頂きました。

フォーム送信を Google Analytics でトラッキングする
もし Google Analytics を使ってサイトのトラフィックを確認しているなら、きっとコンタクトフォー&
プラグイン API/アクションフック一覧/wp head - WordPress Codex 日本語版

スポンサーリンク

Googleアナリティクス(analytics.js)でのイベントトラッキング方法

まず紹介するのはGoogleアナリティクス(analytics.js)のトラッキングコードをサイトに直書きしている場合の計測方法です。

1. 「テーマのための関数(functions.php)」ファイルを開く

管理画面 > 外観 > テーマの編集 で「テーマのための関数(functions.php)」を選択します。

2. 下記のソースコードを追記

「テーマのための関数(functions.php)」に次のようにソースコードを追記します。


add_action( 'wp_head', 'contactform7_hook' ); //「contactform7_hook」関数を<head>内で実行します
 function contactform7_hook() {
 $output = "<script>
            document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
              if ( '14' == event.detail.contactFormId ) { //contactform7のidが14の場合に限って
                ga( 'send', 'event', location.href, 'フォーム送信', 'お問い合わせ' );
              }
            }, false );
            </script>";
 echo $output; //「output」定義された内容を出力します
 }

5行目の「14」は、計測したいフォームのIDを入力します。IDを調べたい場合には、管理画面 > お問い合わせ > コンタクトフォーム から該当フォームのIDをご確認ください。

追記ができたら「ファイルを更新」ボタンを押してください。これで、完了です。

※この方法はユニバーサルアナリティクスのトラッキングコードを実装しているサイト向けの方法です。新トラッキングコード(gtag.js)では動作しませんでしたので、ご注意ください。


2017年12月16日追記:
グローバルサイトタグ(gtag.js)は次の方法でイベントトラッキングすることができました。

グローバルサイトタグ(gtag.js)でのイベントトラッキング方法

次に紹介するのはグローバルサイトタグ(gtag.js)のトラッキングコードをサイトに直書きしている場合の計測方法です。

1. 「テーマのための関数(functions.php)」ファイルを開く

管理画面 > 外観 > テーマの編集 で「テーマのための関数(functions.php)」を選択します。

これはユニバーサルアナリティクス(analytics.js)と同じです。

2. 下記のソースコードを追記

「テーマのための関数(functions.php)」に次のようにソースコードを追記します。ユニバーサルアナリティクス(analytics.js)とことなるのは、ソースコードのga(hoge)が、gtag(hoge)に変わる部分です。


add_action( 'wp_head', 'contactform7_hook' ); //「contactform7_hook」関数を<head>内で実行します
 function contactform7_hook() {
 $output = "<script>
            document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
              if ( '14' == event.detail.contactFormId ) { //contactform7のidが14の場合に限って
                gtag('event', location.href, {'event_category': 'フォーム送信','event_label': 'お問い合わせ'});
              }
            }, false );
            </script>";
 echo $output; //「output」定義された内容を出力します
 }

5行目の「14」は、計測したいフォームのIDを入力します。IDを調べたい場合には、管理画面 > お問い合わせ > コンタクトフォーム から該当フォームのIDをご確認ください。

追記ができたら「ファイルを更新」ボタンを押して、完了です。

Googleタグマネージャ(GTM)でのイベントトラッキング方法

次に紹介するのはGoogleタグマネージャを使った計測方法です。

1. 「テーマのための関数(functions.php)」ファイルでソースコードを追記

トラッキングコードの直書きの場合と同じように、 管理画面 > 外観 > テーマの編集 で「テーマのための関数(functions.php)」を選択し、次のようにソースコードを追記します。


add_action( 'wp_head', 'contactform7_gtm_hook' ); //「contactform7_gtm_hook」関数を<head>内で実行します

function contactform7_gtm_hook() {
  $output = "<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
      if ( '14' == event.detail.contactFormId ) { //contactform7のidが14の場合に限って
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ //次のデータレイヤー変数を返します
          'event':'contactform7_sent', //変数名「event」の値は「contactform7_sent」
          'contactform7_type':'お問い合わせ' //変数名「contactform7_detail」の値は「お問い合わせ」
        });
      }
    }, false );
  </script>";
  echo $output; //「output」定義された内容を出力します
}

5行目の「14」は、計測したいフォームのIDを入力します。IDを調べたい場合には、管理画面 > お問い合わせ > コンタクトフォーム から該当フォームのIDをご確認ください。

追記ができたら「ファイルを更新」ボタンを押してください。

2. ページビュータグの設定

Googleタグマネージャを使ってGoogleアナリティクスでアクセス解析するには、必ずページビュータグを設定する必要があります。

設定の仕方は以下のページを参考にしてみてください。

Googleタグマネージャ完全ガイド【導入メリットから使い方まで丁寧に】|アクセス解析ツール「人工知能AIアナリスト」ブログ
Googleタグマネージャの概要、導入メリットから実際に導入する方法まで、初心者にも分かるように丁寧に解説しています。たくさんのタグをいまだに手作業で設定しているとしたら、かなり時間を無駄にしています!この記事を読んですぐに導入しましょう!

3. 変数の設定

先程「テーマのための関数(functions.php)」ファイルに追記したソースコード内の変数名を定義します。

Googleタグマネージャの管理画面 > ワークスペース > 変数 > ユーザー定義変数 を開いて、「event」「contactform7_type」について、それぞれ下記のように設定してください。

変数名event

名前 event
変数の種類 カスタムイベント

変数名contactform7_type

名前 dl_contactform7_type
変数の種類 データレイヤーの変数
データレイヤーの変数名 contactform7_type

設定できたら、それぞれ保存ボタンを押して保存してください。

4. タグの設定

Googleタグマネージャの管理画面 > ワークスペース > タグ と進み、新規ボタンをクリックして、下記のように新規タグを作成してください。これは「Contact Form 7」で問い合わせ内容が送信され、1で追加したソースコードがDOM(サイトのhtmlソース)内に表示された場合に発火させるタグになります。

EV_お問い合わせ

名前 EV_お問い合わせ
タグタイプ ユニバーサルアナリティクス
トラッキング タイプ イベント
カテゴリ {{Page URL}}
アクション フォーム送信
ラベル {{dl_contactform7_type}}
Googleアナリティクス設定 Googleアナリティクスのトラッキングコード(UA-XXXXXX-X)を変数で指定しています

5. トリガーの設定

上の設定が出来たら、同じ画面でトリガーを設定しましょう。

フォーム送信トリガー

名前 フォーム送信
トリガーの種類 その他 – カスタムイベント
イベント名 contactform7_sent
このトリガーの発生場所 全てのカスタムイベント

この設定までできたら「保存ボタン」をクリックしたあと、設定内容を公開してください。これで全ての設定が完了です。

Googleアナリティクスレポートでの見え方

上の通り設定していただくと、Googleアナリティクスレポートの リアルタイム > コンテンツ で、下のように表示されます。

Googleアナリティクスレポートでの見え方

「Contact Form 7」以外にも、プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合には、上記のようなアクションフックカスタムDOMイベントを使うことにより実現ができそうです。

何分非エンジニアなもので、公式の解説を見ても、どこに何をかけばいいのか最初はサッパリ分かりませんでしたが、今回の試みをきっかけにJavaScriptの基礎を学習したことで、今までふんわりとしか分かっていなかったコードの指示内容を理解することができました。

逆に言うと、今回紹介した方法を含め、プラグインを利用して実装したボタンやフォームのイベントトラッキングは非常にセンシティブで、ググって出てきた記事の方法をそのままコピペすると、最悪の場合、サイトが表示されない事態を招くこともあります(私もこの記事の内容を試している際ミスを起こして、一瞬サイトが非公開になりました…)ので、お試しになる方はご自身のサイトに実装した場合他のプログラムに影響が出ないか合わせて確認されることをオススメします。

また「我こそはJavaScriptマスター也!」とおっしゃる方、上記のコードなんですがもう少しシンプルにかけそうな気がしていますが、私のスキルではこれが限界でした。。もっといい記述方法があればぜひ紹介してください(^ ^)


2017年12月16日追記:
Contact Form 7のイベントトラッキング用プラグイン「Contact Form 7 Google Analytics」がリリースされていました。

プラグイン「Contact Form 7 Google Analytics」でのイベントトラッキング方法

導入は至って簡単です。

ContactForm7_GoogleAnalyticsをインストール

WordPressの ダッシュボード>プラグイン>新規追加 で「Contact Form 7 Google Analytics」と検索すると、プラグインが表示されますので、「今すぐインストール」ボタンをクリックした後、インストール終了後「有効化」をクリックすれば完了です。

ContactForm7_GoogleAnalytics計測結果

イベントカテゴリ・イベントアクションは固定値、イベントラベルにはフォームタイトル名が表示されます。

ただしこのプラグイン、例えば必須項目を入力しないで送信ボタンが押された場合など、エラーが表示された場合にもイベントが計測されてしまうという問題点があります。

導入される方は、この懸念をふまえて、手軽さをとるか正確さを取るかを検討していただくと良いのではないかと思います。

『【計測方法が変わりました】Contact Form 7のGoogleアナリティクスでのイベントトラッキング』へのコメント

  1. 名前:名無しのマーケター 投稿日:2018/04/11(水) 19:07:21 ID:0df0d88b6 返信

    GTMの場合でお聞きしたいのですが、別々のフォームが存在する場合、タグを「EV_お問い合わせ」「EV_申込み」と2つ作るのでしょうか。それとも一つでphp上のidで判断されるのでしょうか。

    • 名前:連クミコ 投稿日:2018/04/12(木) 03:27:48 ID:a5746669f 返信

      GTMで計測されるのであれば、イベントアクションの値をdataLayerで出し分けられるので、タグはひとつ用意すれば十分ですよ。

      フォーム別のアクションの値の出し分け方については、過去に「異なるフォームをそれぞれ計測したい」とご質問された方への回答が、このコメント欄にあると思いますので、そちらを参考にしてみてくださいね。

      • 名前:名無しのマーケター 投稿日:2018/04/12(木) 11:42:37 ID:4e2155cc2 返信

        ありがとうございます!無事反応が確認できました!!

  2. 名前:名無しのマーケター 投稿日:2018/04/08(日) 21:55:30 ID:0753e2158 返信

    上記の設定でイベントトラッキングができました。
    ありがとうございます。
    ちなみにアナリティクスの目標設定をする際の設定を御存知であれば教えていただけないでしょうか?

    アナリティクス>ビュー>目標設定
    目標設定:お問い合わせ
    目標タイプ:イベント
    目標の詳細
    ①カテゴリ【先頭が一致】/◯◯◯
    ↑イベントトラッキングのイベントカテゴリのURLから抜粋

    ②アクション【等しい】フォーム送信
    ↑イベントトラッキングのイベントアクションの値

    ③ラベル【等しい】空欄
    ④値【超】空欄

    上記で設定しているのですが、間違いがあればして頂けないでしょうか?
    何卒、宜しくお願いします。

    • 名前:連クミコ 投稿日:2018/04/09(月) 15:58:28 ID:c20dfac06 返信

      名無しのマーケターさん、当サイトをご覧になって頂き、ありがとうございます。

      目標設定の仕方については、他に「フォーム送信」というアクションのイベントをトラッキングされていなければ、記載いただいた手順で大丈夫だと思います。
      (もし他にも「フォーム送信」というアクションのイベントが存在するのであれば、ラベルに「お問い合わせ」と設定頂くと良いですよ)

  3. 名前:名無し 投稿日:2017/12/21(木) 13:35:35 ID:0dbf22447 返信

    ありがとうございます。
    ↑上記の通りで無事成功しました。

  4. 名前:名無し 投稿日:2017/12/19(火) 17:08:46 ID:0fcbd39e4 返信

    gtag.jsでの動作ができました!
    ありがとうございましたm(_ _)m

    サイト内の別々のフォームがあり、別々に設定したいのですが、idとCategoryとLabel以外に変更必要なポイントはありますでしょうか。

    もしご存知でしたらご教示いただけますと助かります><

    • 名前:連クミコ 投稿日:2017/12/19(火) 22:23:46 ID:80efe8c9e 返信

      ご覧になって頂きありがとうございます!

      >サイト内の別々のフォームがあり、別々に設定したいのですが、idとCategoryとLabel以外に変更必要なポイントはありますでしょうか。

      未検証ですが、おそらく


      if ( '14' == event.detail.contactFormId ) { //contactform7のidが14の場合に限って
      gtag('event', location.href, {'event_category': 'フォーム送信','event_label': 'お問い合わせ'});
      }

      のあとに

      else if ( '【2つめのフォームを入れてください】' == event.detail.contactFormId ) {
      gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル'});
      }

      で、動くのではと思いますので、おためしください(^_^)