Google Analyticsのイベントトラッキングの設定がうまくいかない時の対処法 ～主な注意点とGoogle Analytics Debuggerの基本的な使い方～
便利なGoogle Analyticsのイベントトラッキング
Google Analytics（以下、GAと略記）では、ユーザーのアクセス数を集計するだけでなく、イベントトラッキングを設定することで、ユーザーのより詳しい行動を把握することができます。
とくに多用されるのが、クリック数の計測で、キャンペーンバナーの効果測定などに使われます。
この便利なイベントトラッキングですが、うまく設定ができず、イベントの情報が取得できないことがあります。
今回は、GAのイベントトラッキングの設定がうまくいかない時の対処法をいくつかご紹介いたします。
イベントトラッキングの確認方法
GAから確認する
イベントトラッキングがうまくいかなかった時の対処法を見ていく前に、まずはそもそもどのようにしてうまくいっているか否かを確認するのかお話ししていきます。
イベントトラッキングの確認方法はいくつかありますが、一番簡単な方法は、GAのレポートの中の「リアルタイム」の「イベント」を表示し、その状態でイベントトラッキングを設定したリンクなどをクリックします。
例えば、今回は以下のリンクにイベントトラッキングを設定しました。
設定したコードは以下の通りです。
- サンプルコード１
<a href="#" onclick="gtag('event', 'click', {'event_category': 'イベントカテゴリー', 'event_label': 'イベントラベル'});">イベントトラッキングテスト</a>
正常にイベントトラッキングが設定されていた場合、下記の参考画像１のように、この「リアルタイム」の「イベント」にデータが表示されます。
逆に言うと、イベントトラッキングを設定したリンクを押したりしても、GAに反応がない場合は、そのイベントトラッキングの設定にミスがあるということです。
Google Analytics Debuggerでの確認方法
GAで確認するほか、イベントトラッキングがうまくいっているかどうかを確認する方法があります。
Google Chrome（以下、Chrome）でのデバッグに限定されてしまうことになりますが、Chromeの拡張機能である“Google Analytics Debugger"（以下、GA Debuggerと略記）を使うこともできます。
GA DebuggerはChromeの拡張機能を販売しているChromeウェブストアから無料でダウンロードできます。
このGA Debuggerを有効にすると、ChromeでWebページを開いているときにCtrlキーとShiftキー、Iキーを同時押しする（もしくは右クリックから表示されるメニューの検証をクリックする）ことによって使える検証画面に、GAの状況が表示されるようになります。
検証画面の「Console」にGA Debuggerの様々なデバッグ情報が表示されていますが、この中で参考画像２のように、設定したイベントトラッキングの情報が表示されていたら、コード上は問題がないということが確認できます。
GA Debuggerの詳しい説明は別の機会に譲りたいと思いますが、まずはこの表示がでているかどうか確認していくとよいのではないでしょうか。
イベントトラッキングができない原因と対処法
コードの誤り
イベントトラッキングがうまくいかない時に、真っ先に疑うべきはコードの誤りです。
昨今ではネットで検索をすればイベントトラッキングがすぐにヒットしますが、そのWebページに掲載されているコードが正しいとは限りません。
コピー＆ペーストでうまくいかない場合は、コードのダブルクォーテーションが外れていないか、半角にしなければならないところを全角にしていないかなど、通常のJavaScript（以下、JSと略記）のコード修正をする視点で見ていくとよいでしょう。
そもそもGAのトラッキングコードが設定されていない
キャンペーンページなど、いつもとは異なるページを新規で作成する時によくあるのが、そのページにGAのトラッキングコードを貼り付けるのを忘れることです。
通常、GAを使う際には、下記のようなトラッキングコードを貼り付けます。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXX-1');
</script>
このトラッキングコードが貼り付けられていないページでは、いくらイベントトラッキングのコードを記述したとしても、GAのレポートには反映されません。
GAのバージョンの違い
GAのバージョンによっては、イベントトラッキングのコードの記述の仕方が異なります。
最新のGAではgtag.jsというJSファイルを呼び出していますが、2017年以前にGAのトラッキングコードを設置し、そのままにしているWebサイトは、analytics.jsというJSファイルを呼び出しています。
同じイベントトラッキングの設定であっても、gtag.jsとanalytics.jsの記述の仕方は以下のように異なっています。
- gtag.jsの場合
<a href="#" onclick="gtag('event', 'click', {'event_category': 'イベントカテゴリー', 'event_label': 'イベントラベル'});">イベントトラッキングテスト</a>
- サンプルコード１
<a href="#" onclick="ga('send', 'event', [イベントカテゴリー], [click], [イベントトラッキングテスト]);">
このバージョンによる差異に対応できていないため、イベントトラッキングがうまくいかないこともあるでしょう。