デバッグ

関数 utag.view() と utag.link() は、それぞれページビューとイベントをトラッキングするために使用されます。この記事では、これらの関数をデバッグして、いつ、どのように呼び出され、どのようなデータが処理されているかを確認する方法を示します。

デバッグモード

デバッグモードを有効にするには、ブラウザの開発者コンソールを開き、次のコマンドを実行します：

document.cookie="utagdb=true; path=/";

このクッキーはデバッグモードをオンにし、コンソールに有用な出力を生成します。

デバッグモードが有効になると、トラッキングコールが発生するときにコンソールにログステートメントが表示されます。これらのステートメントをコンソール出力で探します：

trigger: view
trigger: link

次の例は、イベントがトラッキングされた後のコンソールの様子を示しています：

trigger:view または trigger:link の後の行をクリックして、イベントデータオブジェクトの展開と折りたたみを行います。

ブレークポイント

より深いデバッグのためには、utag.js にブレークポイントを構成して、トラッキングコールが発生したときにコードを一時停止すると便利です。ブレークポイントを使用して、トラッキングデータオブジェクトを調査したり、コールが発生した場所を確認するためにスタックトレースを調査します。

Chrome DevToolsを使用してブレークポイントを構成するには：

1. DevToolsを開き、Sources タブに移動して、ファイル utag.js を開きます。
2. return this.track( という行を見つけて、行番号をクリックしてブレークポイントを構成します：
   

   

3. メインウィンドウに戻り、トラッキングコールをトリガーするアクションを実行します。トラッキングコールが実行されると、コードはブレークポイントで一時停止します。
4. 右パネルで、Watch パネルを展開し、+ サインをクリックしてウォッチ式を追加します。a と入力して Enter をクリックし、この変数のウォッチ式を追加します。
5. パラメータ a に含まれるオブジェクトを展開して、トラッキングコールに渡されたデータを表示します。このデータは拡張機能、ロードルール、データマッピングで利用可能です。
6. 右パネルで、Call Stack パネルを展開して、トラッキングコールがどこから発生したかを確認します。

次に、utag.link() コールの場所を探す例を示します：

この例は、utag.link() コールをデバッグするために設置された utag.js のブレークポイントを示しています。項目 (2) をクリックすると、ソースコード内で行われた utag.link() コールが表示されます（左側）。

これで、次の三つのことをデバッグすることができました：

• ブレークポイントがヒットしたかどうか。もしヒットした場合、関数が正しくトリガーされるように構成されています。
• ブレークポイントがヒットしたので、utag.view() または utag.link() が呼び出されたときにどのようなデータが送信されたかを確認することができました。
• utag.view() または utag.link() の実際の構成を確認することができました。

特定のイベントがトリガーされたときに正しいデータが渡されていない場合、この情報は役立ちます。関数に渡されるデータが間違っている可能性があります。

詳細については、Chrome DevTools: JavaScript debugging を参照してください。

コンソール出力

次の表は、コンソールに表示される重要なデバッグステートメントのいくつかを説明しています。あなたのサイトのデバッグ出力は、utag.jsのバージョンや特定の構成によって若干異なる場合があります。