デバッグ

このガイドでは、analytics.js ライブラリのデバッグ バージョンを使用して、正しい実装が行われているかを確認する方法を説明します。

analytics.js ライブラリのデバッグ バージョン

Google アナリティクスでは、実行時の詳細なメッセージを JavaScript コンソールにログ出力できる、analytics.js ライブラリのデバッグ バージョンを提供しています。出力されるメッセージには、正常に実行されたコマンド、警告メッセージ、エラー メッセージが含まれ、トラッキング コードの設定に誤りがある場合の判断材料になります。また、Google アナリティクスに送信される各ヒットの詳細情報も表示できるため、トラッキング対象のデータを正確に確認できます。

analytics.js のデバッグ バージョンを有効にするには、以下のように JavaScript トラッキング スニペット内の URL を https://www.google-analytics.com/analytics.js から https://www.google-analytics.com/analytics_debug.js に変更します。

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

ヒットを送信せずに実装をテストする

analytics.js のデバッグ バージョンは、非デバッグ バージョンとまったく同じように Google アナリティクスにデータを送信します。これにより、analytics.js コードを実行しているウェブサイトにアクセスし、トラッキング対象のデータに干渉することなく実装を検査できるようになります。

開発環境やテスト環境など、特定の条件下でデータを Google アナリティクスに送信しないようにする場合は、sendHitTask タスク を無効にすれば何も送信されません。

ローカルホスト上で実行している場合は、次のコードを設定することで、ヒットが Google アナリティクスに送信されるのを防げます。

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

if (location.hostname == 'localhost') {
  ga('set', 'sendHitTask', null);
}

ga('send', 'pageview');

トレースのデバッグ

トレースのデバッグを有効にすると、より詳細な情報をコンソールに出力できます。

トレースのデバッグを有効にするには、上記の方法で analytics.js のデバッグ バージョンを読み込み、トラッキング スニペットの ga() コマンドキューの呼び出しの前に次の JavaScript 行を追加します。

window.ga_debug = {trace: true};

トレースのデバッグを有効にしたトラッキング スニペットの全体は次のとおりです。

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

window.ga_debug = {trace: true};
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Chrome 拡張機能「Google Analytics Debugger」

Google アナリティクスでは、トラッキング コードを変更することなく analytics.js のデバッグ バージョンを有効にできる Chrome 拡張機能も提供しています。この拡張機能を使用すると、自分のサイトをデバッグできるだけでなく、analytics.js で Google アナリティクスのトラッキングを行っている他のサイトの実装も確認できます。

Google Tag Assistant

Google Tag Assistant はウェブサイトのトラッキング コードの検証や一般的な問題のトラブルシューティングに役立つ Chrome 拡張機能です。この拡張機能は analytics.js の実装をローカルでデバッグしてテストしたり、本番環境にコードを導入する前に問題がないことを確認するときに便利なツールです。

Tag Assistant には典型的なユーザーフローを記録する機能があります。送信されたすべてのヒットが記録されて各ヒットに問題がないかどうかがチェックされ、すべてのインタラクションに関するレポートが作成されます。問題や改善点が見つかった場合はアラートが表示されます。

詳しくは、ヘルプセンターで Tag Assistant についてTag Assistant Recordings についてをご覧ください。また、こちらのデモ動画では、Tag Assistant を使用してエラーを検出したり、クロスドメイン トラッキングなど、高度なトラッキング機能の実装が有効かどうかを検証する方法について解説しています。