###目的
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アナリティクスにログイン>アナリティクス設定>トラッキング情報>トラッキングコード
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の内容が表示されます。)
4.表示を確認します。
今回の例では、messageに情報を足したものが上段、足していないものが下段に表示されています。
その他にも情報を表示することが可能です。
セカンダリディメンションより表示したい情報を選択します。
モバイル端末の情報やOSバージョンなど様々です。
##Googleタグマネージャも使ってみる
下記サイトに丁寧にまとめられておりますので、ご参考ください。
urlに関しては、変数設定の画面で、Error URLを入力していれば、改めて作成する必要はありません。
http://qiita.com/OnederAppli/items/0b64df149e352a8cc7c6
Googleタグマネージャを利用した場合、exceptionではなくeventとして情報が送られます。
そして、window.onerrorで処理済みのものに関しては対象外となります。
想定外のエラーを対象としているということでしょうか。
イベントで送られたデータはリアルタイムでも表示されます。
表示手順 : リアルタイム>イベント
もちろん、過去分のデータも確認可能です。
表示手順 : 行動>イベント (下記画像は上位イベントを表示した場合です)
他にeventとして取得するケースがないのであれば問題はないです。
eventとして複数の情報を取得してくる場合、情報量が多いと必要な情報が埋もれてしまう場合があります。(上記の赤四角で囲った部分にはJavaScriptエラー以外も表示されています。)
検査を使って絞り込んで...と必要な情報を表示させるだけでも大変です。
このようなケースにもカスタムレポートは有効です。
新規にカスタムレポートを作成し、設定時にフィルタをつけることで絞り込みを行えます。
正規表現にも対応しています。
指標グループは表の列、ディメンションは行になります。
今回の設定で実際に表示されるレポートです。
###参考にしたサイト
-
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