Google Tag Manager を使って JavaScript エラーを収集する

8月 24, 2014

Google Tag Manager は単にアクセス解析のタグを配信するだけでも、サイト自身にトラッキング ID などを直接埋め込まずに Tag Manager 管理画面から誰でも変更可能な状態に出来てとても便利です。

今回はさらにエラーリスナータグと、ユニバーサルアナリティクスのイベントトラッキングを組み合わせることで、サイトに変更を加えることなく、サイト上で発生したエラーを Google Analytics のイベントとして収集する方法を考えてみます。

設定方法

まず、エラーリスナータグを全ページに配信するように設定します。

次に、エラーリスナータグの発生させたイベントをユニバーサルアナリティクス (トラッキングタイプ=イベント) を使って報告したいのですが、エラー情報を受け渡す方法が一見したところ良く分かりません。色々触ってみたところ、受け渡し方法は、マクロを経由してデータレイヤ変数を引き渡せば良いみたいです。

こちらのヘルプ JavaScript エラーリスナー - イベントリスナー - Tag Manager ヘルプ
に書かれている通り、データレイヤ変数が設定されるので、以下のようなマクロをまず設定します。

マクロ名 dataLayer gtm.errorLineNumber
マクロのタイプ データ レイヤー変数
データ レイヤー変数名 gtm.errorLineNumber
データ レイヤーのバージョン バージョン2

このようなマクロを使って、以下のようなイベントトラッカーを設定します。

配信条件 {{event}} が gtm.pageError に等しい

タグの種類 ユニバーサルアナリティクス
トラッキング タイプ イベント

イベント トラッキングのパラメータ
  カテゴリ gtm
  操作 {{event}}
  ラベル {{dataLayer gtm.errorUrl}}:{{dataLayer gtm.errorLineNumber}}: {{dataLayer gtm.errorMessage}}
  値 (空欄)
  非インタラクション ヒット True

レポートの見方

エラー統計情報は、レポートで、行動 > イベント > 上位のイベント > イベントカテゴリ、から順番にクリックして以下のように絞り込めば OK です。
すべて » イベントカテゴリ: gtm » イベントアクション: gtm.pageError

追加情報

イベントリスナー - Tag Manager ヘルプによると、同様のイベントリスナーは他にも以下のものが利用可能です。例えばクリックリスナーを使用すると、どの DOM 要素がクリックされているかを、要素の ID などで識別して収集することが出来ます。

クリック リスナー
フォーム送信リスナー
リンク クリック リスナー
タイマー リスナー
履歴リスナー
JavaScript エラー リスナー

ユーザーの安全のためこのイベントトラッキングはユニバーサルアナリティクスの SSL 有効モードで行うのが良いと思います。

このブログを検索

hidekiy blog