デバッグ

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

デバッグモード

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

document.cookie="utagdb=true";

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

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

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()コールが表示されます。

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

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

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

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

コンソール出力

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