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


###目的
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](https://qiita-image-store.s3.amazonaws.com/0/129225/8581248b-9b34-364c-db94-bd8f9b955717.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](https://qiita-image-store.s3.amazonaws.com/0/129225/31b1cff9-41d8-1c8c-f6ce-88d368ea0a75.png)

4.表示を確認します。
　今回の例では、messageに情報を足したものが上段、足していないものが下段に表示されています。
![google_analytics_03.png](https://qiita-image-store.s3.amazonaws.com/0/129225/5ce67b7f-2ae2-7d8d-cb80-9f67507f62da.png)
　その他にも情報を表示することが可能です。
　セカンダリディメンションより表示したい情報を選択します。
　モバイル端末の情報やOSバージョンなど様々です。
 ![google_analytics_04.png](https://qiita-image-store.s3.amazonaws.com/0/129225/9888c717-83d2-8bf2-eeaa-119ecc94b674.png)



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

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









###参考にしたサイト
- Googleアナリティクス関連
https://junichi-manga.com/google-analytics/

  - トラッキングコード  
  http://www.adminweb.jp/analytics/setup/index7.html  
  http://www.kagua.biz/help/gatrackingcodesetti2015.html  
  https://developers.google.com/analytics/devguides/collection/analyticsjs/  
  
  - JavaScriptエラー収集  
  http://qiita.com/hidek84/items/e42f8632d95b9444aea4  
  https://kinjouj.github.io/2015/05/google-analytics-tracking-javascript-error.html  
  http://www.yoheim.net/blog.php?q=20130703  
  
  
- Googleタグマネージャ関連
https://f-tra.jp/blog/howto/7750
http://qiita.com/OnederAppli/items/0b64df149e352a8cc7c6

  - トリガー  
  https://support.google.com/tagmanager/answer/6106961?hl=ja