LoginSignup
30
26

More than 5 years have passed since last update.

GoogleAnalytics+GoogleTagManagerでJSエラーを収集する

Last updated at Posted at 2015-08-09

前回の投稿で、「SPAの各ページビューをGoogleアナリティクス+Googleタグマネージャーで簡単トラッキング!」というものを書きました。
今回は、ユーザーのブラウザで発生したJSエラーを収集する方法です。
すでに、サイトにGoogleタグマネージャーのコードが埋め込まれていることを前提にします。
(そこまでの流れは前回記事を参考にしていただければと。。。)

タグマネージャーのコードが埋め込まれていれば、あとはGoogleタグマネージャーの管理画面の設定だけでJSエラーを収集することができます!

1. 変数の設定

Googleタグマネージャーの管理画面に行き、変数のエラーにある「Error Message」「Error URL」「Error Line」「Debug Mode」にチェックを入れて有効にします。
1.jpg

次に、UA(ユーザーエージェント)とエラー発生時のURLを取得できるように、新規で変数を2個作ります。
↓UA取得用に作った変数の設定(グローバル変数名:window.navigator.userAgent)
2.jpg
↓URL取得用に作った変数の設定(グローバル変数名:location.href)
3.jpg

2. トリガーの設定

次にトリガーの設定をします。新規トリガーを下記設定のように作ります。
4.jpg

3. タグの設定

最後にタグの設定です。自分は下記画面のように設定しました。
ラベルにエラーの情報を出力する形です。
[MESSAGE]{{Error Message}} [FILE]{{Error URL}} [LINE]{{Error Line}} [URL]{{url}} [UA]{{userAgent}}
5のコピー.jpg

ここまで設定が完了したら忘れずに公開ボタンを押して、設定を有効にします。

4. Googoleアナリティクス管理画面での確認

すぐに確認したい場合は、サイドメニューのリアルタイム>イベントから確認することができます。
画面を開いたら、対象のサイトでjsエラーを出してください。すると、jsエラーの情報が管理画面に表示されるはずです。
7.jpg

例えば、下記のような感じでラベルの項目にエラーが表示されます。

[MESSAGE]Uncaught TypeError: hoge is not a function [FILE]http://hoge.jp/hoge.js?bust=1439102987730 [LINE]1 [URL]http://hoge.jp/#quest [UA]Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

===============================
OnederAppliよろしくお願い致します!
ホームページ
iPhoneアプリ
Androidアプリ

30
26
1

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
30
26