LoginSignup
62
56

More than 5 years have passed since last update.

@sushimaru(Nanami Saito)

GoogleアナリティクスでJavaScriptエラー情報を収集する (ときどきGoogleタグマネージャ)

Last updated at Posted at 2016-06-26

目的

Googleアナリティクスを使ってみます。
ユーザー端末で出現しているJavaScriptエラーを収集します。
JavaScriptエラー情報をレポートとして表示します。
ついでに、Googleタグマネージャも使ってみます。

お役立ちどころ

端末、環境によってJavaScriptエラーが出たり出なかったりする場合に有効です。
ユーザーの端末で発生しているエラーを収集、その他OSなどの情報も取得できます。
情報を整理して表示されるので、分析に役立ちます。

用語の確認

Googleアナリティクス

今まで見えなかった情報を見える化します。
いろいろなものにイベントをつけて、情報収集します。
クリック、例外発生、ページの表示などにイベントをくっつけられます。
イベントを通ると情報がGoogleアナリティクスサーバーに送られます。
情報をもとに分析、解析、レポート作成を行います。

トラッキングコード

Googleアナリティクスで分析をするために、必要なプログラムがトラッキングコードです。
JavaScriptで書かれています。
ウェブプロパティごとに自動的に生成されます。
分析を行いたいページに埋め込む必要があります。
構造としてGoogleアナリティクス実行準備部分、情報設定部分、データ送信部分の3つに分けられます。
確認手順 : Googleアナリティクスにログイン>アナリティクス設定>トラッキング情報>トラッキングコード

トラッキングID

Googleアナリティクス側でデータの送信先を特定できるようにするためのものです。
トラッキングコードの情報設定部分に記述されています。
記述がないとデータが送信されません。
確認手順 : Googleアナリティクスにログイン>アナリティクス設定>トラッキング情報>トラッキングコード

Googleタグマネージャ

外部サービスを利用する際にサイトのHTML内に記述する必要のあるタグを一元管理できます。
HTMLの変更を行わずとも、Googleタグマネージャ管理画面内でタグの変更や更新などが可能になります。

はじめる

GoogleAnalytics公式サイトよりアカウント登録を行います。
公式サイト : http://www.google.com/intl/ja_jp/analytics/

1.トラッキングコードを確認します。
　確認手順 : Googleアナリティクスにログイン>アナリティクス設定>トラッキング情報>トラッキングコード
google_analytics_01.png

2.トラッキングコードをhtmlのheadタグ内に埋め込みます。

3.JavaScript例外を収集したいhtmlを対象に下記処理を追加します。

window.onerror = function(message, url, lineNum) {
  ga("send", "exception", { "exDescription": message });
};

　詳細情報を表示する場合はmessageを変更します。
　下記ではファイル名、行、ユーザーエージェントを追加しています。

window.onerror = function(message, url, lineNum) {
  var fileName = url.match(".+/(.+?)([\?#;].*)?$")[1];
  var message =  fileName + ":" + lineNum + " - "+ message + ",\n"
               + "userAgent:" + window.navigator.userAgent;

  ga("send", "exception", { "exDescription": message });
};

テストを行う場合、開発者ツールのコンソール内で以下を実行すればエラーが発生します。

setTimeout(function() { 
  var arr = {};
  arr.hoge.fuga; //←ここでエラーが発生
 }, 0);

分析する

既存のレポートから、例外の情報は見ることができません。
独自にレポートを作成する必要があります。

1.GoogleAnalyticsマイページヘッダーのカスタムを選択します。

2.新しいカスタムレポートより新規でレポートを作成します。

3.指標グループにユーザー>例外を選択します。
　ディメンションの詳細で行動>例外の説明を選択します。
　例外の説明には、例外発生時に送られた情報が当てはまります。(例ではmessageの内容が表示されます。)
google_analytics_02.png

4.表示を確認します。
　今回の例では、messageに情報を足したものが上段、足していないものが下段に表示されています。
google_analytics_03.png
　その他にも情報を表示することが可能です。
　セカンダリディメンションより表示したい情報を選択します。
　モバイル端末の情報やOSバージョンなど様々です。
google_analytics_04.png

Googleタグマネージャも使ってみる

下記サイトに丁寧にまとめられておりますので、ご参考ください。
urlに関しては、変数設定の画面で、Error URLを入力していれば、改めて作成する必要はありません。
http://qiita.com/OnederAppli/items/0b64df149e352a8cc7c6

Googleタグマネージャを利用した場合、exceptionではなくeventとして情報が送られます。
そして、window.onerrorで処理済みのものに関しては対象外となります。
想定外のエラーを対象としているということでしょうか。
イベントで送られたデータはリアルタイムでも表示されます。
表示手順 : リアルタイム>イベント
google_analytics_05.png
もちろん、過去分のデータも確認可能です。
表示手順 : 行動>イベント (下記画像は上位イベントを表示した場合です)
google_analytics_07.png
他にeventとして取得するケースがないのであれば問題はないです。
eventとして複数の情報を取得してくる場合、情報量が多いと必要な情報が埋もれてしまう場合があります。(上記の赤四角で囲った部分にはJavaScriptエラー以外も表示されています。)
検査を使って絞り込んで...と必要な情報を表示させるだけでも大変です。
このようなケースにもカスタムレポートは有効です。
新規にカスタムレポートを作成し、設定時にフィルタをつけることで絞り込みを行えます。
正規表現にも対応しています。
指標グループは表の列、ディメンションは行になります。
google_analytics_08.png
今回の設定で実際に表示されるレポートです。
google_analytics_09.png

参考にしたサイト

62
56
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
62
56