デバッグ

utag.view()関数とutag.link()関数は、それぞれページビューとイベントのトラッキングに使用します。この記事では、これらの関数のデバッグ方法を説明して、関数が呼び出される仕組みとタイミングや渡されるデータを確認します。

デバッグモード

デバッグモードを有効にするには、お好みのブラウザでデバッグツールを開き、次のコマンドを実行します。

document.cookie="utagdb=true";

このCookieによりutag.js内でデバッグモードが有効になり、有用な出力がコンソールに生成されます。

デバッグモードが有効になった後、ページでトラッキング対象のアクションを起こすと、コンソールにデバッグログが表示されます。コンソールの出力結果でtrigger: viewまたはtrigger: linkを調べてください。

次の例は、イベントがトラッキングされた後のコンソールの出力結果を示しています。

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

ブレークポイント

より詳細なデバッグでは、トラッキングコールが行われるときにコードを中断するようutag.jsにブレークポイントを構成すると役立ちます。こうすると、渡されるデータを検討できるほか、スタックトレースを調べてそのコールの起点を確認することができます。 

Chromeのデベロッパーツールを使用してブレークポイントを構成するには：

1. Chromeのデベロッパーツールで、[Sources]に移動して、utag.jsを開きます。

2. ウィンドウの左下にある波括弧をクリックして、コードを読みやすく展開します（pretty print）。

3. return this.track(を含む行を見つけ、行番号をクリックしてブレークポイントを構成します。

4. メインウィンドウに戻り、トラッキングコールのいずれかを呼び出すアクションを実行します。トラッキングコールが発生すると、コードを調べることができるよう、ブレークポイントのいずれかによってアクションが停止します。

5. デベロッパーツールの右側には、[Watch Expression]と呼ばれるセクションがあります。+記号をクリックしてウォッチ式を追加します。「a」と入力してEnterキーを押すと、この変数のウォッチ式が追加されます。

6. パラメータaに含まれるオブジェクトを展開して、トラッキングコールに渡されたデータを表示します。これが、拡張機能、タグ配信ルール、マッピングで処理する必要のあるデータです。 

Chromeのデベロッパーツールでのブレークポイントの構成の詳細については、こちらを参照してください。

この方法のメリットの1つとして、デベロッパーツールの[Sources]タブでレポートされる[Call Stack]を使用してトラッキングコールの起点を調査できる点があります。

utag.link()のコールの位置を探す例を次に示します。

上の画像は、utag.link()のコールを捉えるためにutag.jsに構成されたブレークポイントです。（2）をクリックすると、ソースコード内で行われたutag.link()のコールが（左に）表示されます。 

これで次の3つの点をデバッグできるようになりました。

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

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

コンソールの出力結果

表示される各種出力結果の詳細を以下に示します。出力は実装に固有のため、このリストですべてが網羅されているわけではありません。また、ログ出力は更新や改良によって変わる可能性が常にあります。