デバッグ

このガイドでは、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 を使用してエラーを検出したり、クロスドメイン測定など、高度な測定機能の実装が有効かどうか検証したりする方法について解説しています。