Chrome デベロッパー ツールを使用すれば、ウェブページのコンテンツやリソースを簡単に分析できます。このツールはキャンペーン マネージャー 360 のタグの確認にも役立ちます。
デベロッパー ツールにアクセスする
Chrome デベロッパー ツールを開くには、次のいずれかを行います。
- ページを右クリックし、[検証] を選択します。クリックした要素の HTML コードが表示されます。
- ブラウザ ウィンドウの上部から、[表示] > [デベロッパー] > [デベロッパー ツール] の順に選択します。
Chrome DevTools の詳細
利用可能なタブと使用例
-
[要素] タブ: ページのレンダリング完了後の HTML が表示されます。これは、ページのソースコードとは異なります。ページの読み込み時に JavaScript によって HTML 要素が作成または書き換えられた場合、レンダリング完了後の HTML にはそれらの変更内容が反映されます。一方、ページのソースコードは変更がない状態で表示されます。
使用例- タグの変更を確認する: このタブでは、ページに実装されている Floodlight タグやプレースメント タグを見つけて、タグが変更されているかどうかを確認できます。タグを見つけるために役立つ検索キーワードは「double」です。キャンペーン マネージャー 360 のプレースメント タグ内の URL には、「doubleclick」ドメインを使用する URL が含まれるためです。タグが見つかったら、実装版のタグと、入稿管理画面から直接書き出したタグを照合します。
- CSS 関連の問題をトラブルシューティングする: [要素] タブの右側の列には、選択した HTML 要素の表示方法と場所を制御しているさまざまな CSS 属性が表示されます。
- [計算済み] バーには、選択された要素に適用されている CSS ルールがすべて表示されます。ページのウェブサイト管理者が記述した明示的な CSS コードで適用されているものもあれば、該当タイプの HTML 要素に対するブラウザのデフォルト値として適用されているものもあります。
- これに対して [スタイル] セクションには、ウェブサイト管理者が明示的に指定した CSS ルールのみが表示されます。ここの各サブセクションは、該当のページのコードの中で、関連する CSS ルール（選択された HTML 要素に適用されるルール）が記述されているそれぞれの場所を示しています。問題の原因となっているページ内のルールが見つかったら、該当のサブセクションの右上のリンクをクリックして、問題のルールが実装されている行やドキュメントを読み込むことができます。
[要素] タブの便利な機能のひとつに、調べているコードを編集できる機能があります。見つかった HTML コードの行または CSS ルールがページの問題の原因となっていると思われる場合は、それを確認するためにコードを修正してみてください。この修正は、ブラウザの一時的なメモリに保存されているページのバージョンのみに適用されます。ページを再度読み込んだり、他のユーザーがページにアクセスしたりすると、修正は破棄されます。 -
[ソース] タブ: 検査対象のページとともに読み込まれたさまざまなリソースを表形式で確認できます。ここには画像、HTML ドキュメント、JavaScript ファイルなどが含まれています。
使用例ページに記述されていないタグを探す: [要素] タブでは、ページのレンダリング完了後の HTML を確認できますが、ページに記述されたコードがプレースメント タグを呼び出すとは限りません。また、[ソース] タブでは JavaScript ファイルの編集とデバッグができます。
ヒント: [検索] パネルを使うと、読み込まれたすべてのリソースの中から、実装されているタグを簡単に見つけることができます。DevTools の右上にあるその他アイコンをクリックして、[その他のツール] > [検索] を選択します。
-
[ネットワーク] タブ: 組み込みのプロキシ スニファーとして、ページの読み込み時とそれ以降のページの HTML トラフィックの監視に利用できます。
使用例- プレースメント タグまたは Floodlight が呼び出されたかどうかを確認する: プロキシ スニファーは QA とトラブルシューティングに最も有効なツールです。基本的に、タグが呼び出されないと、タグは想定どおりにクリエイティブ コンテンツをトラッキングしたり返したりできません。同様に、呼び出しが適切であれば（構文やフォーマットが正しければ）、サーバーにとって、タグがどのように実装されているかは関係ありません（ただし、ページの性質によっては考慮が必要になることもあります）。[ネットワーク] タブを使って、プレースメント タグやピクセルが呼び出されたかどうかを検出できます。呼び出されている場合は、呼び出しの構文が変更前のタグ内の URL と一致することを確認します。
- 待ち時間をテストする: [ネットワーク] タブでは、呼び出しが行われたかどうかに加えて、所定のリクエストが応答を受信するまでにかかった時間も確認できます。特にダイナミック Floodlight タグの場合、これは待ち時間をテストするのに役立ちます。Floodlight が原因でページの読み込みに時間がかかりすぎている場合は、ピギーバック ピクセルによる呼び出しを監視すると、問題の原因を特定できることがよくあります。つまり、Floodlight タグ自体が待ち時間に影響している可能性よりも、タグ内のピギーバック ピクセルの 1 つが待ち時間に影響している可能性の方が高いと言えます。
-
[パフォーマンス] タブ: 一定の期間にわたって HTTP トラフィックとメモリ使用状況が表示されます。[ネットワーク] タブと同様、待ち時間の原因を特定するのに有効ですが、それ以外の場合は、キャンペーン マネージャー 360 関連の問題には関係ありません。
-
[メモリ] タブ: ウェブ デベロッパーがウェブ アプリケーション内の CPU 使用率を最適化する場合に役立つツールです。キャンペーン マネージャー 360 関連の問題には関係ありません。
-
[Lighthouse] タブ: ページの読み込み時にページを分析することで、ページの読み込み時間を短縮するための推奨や最適化を提供し、予想される反応と実際の反応を向上させることができます。キャンペーン マネージャー 360 関連の問題には関係ありません。
-
[コンソール] タブ: ページのコードエラーを自動的に検出します。[ネットワーク] タブでタグが呼び出されていないことがわかった場合は、[コンソール] タブを使用してその原因の手がかりをつかめることがあります。
使用例構文エラーをトラブルシューティングする: タグが呼び出されない場合は、[コンソール] タブで、Chrome でエラーが検出されたかどうかを確認します。注意が必要な主なエラーは次のとおりです。
- [NS_IMAGELIB]: iframe src URL が画像として実装されている場合に生じるエラーです。これは、プレースメント タグや Floodlight タグが正常に呼び出されない原因となります。ただし Floodlight タグの場合、呼び出しエラーがあってもコンバージョンのアトリビューションが特定されることがあります。Floodlight タグでこのエラーが発生した場合、Floodlight に実装されている第三者ピクセルは一切呼び出されません。
- [Unsafe JavaScript attempt to access frame with URL]（安全ではない JavaScript が URL のフレームにアクセスしようとしています）: このエラーは無視してください。これは、別のドメインからページに iframe を埋め込もうとすると表示されるセキュリティ上の警告です。高レベルのセキュリティを設定していない限り、この警告メッセージが一般のユーザーに表示されることはありません。また、Floodlight やピギーバック ピクセルの配信方法には影響はありません。
- [Resource interpreted as '_blank_' but transferred with MIME type]（リソースは「_blank_」として解釈されていますが、MIME 形式で転送されています）: これは、ファイル形式に問題があることを表しています。MIME はインターネットでのファイル形式の識別子です。このエラーは、正しくないファイル拡張子を使ったリソースが読み込まれるときに表示されます（.jpeg ではなく .gif が使われている場合など）。
- [Uncaught TypeError]（捕捉されなかったタイプエラー）: ページ上に HTML 要素の入力エラーが見つかった場合に表示されます。一般に、このメッセージは、JavaScript 関数内のコードにエラーがあることを示しています。
- [Uncaught SyntaxError]（捕捉されなかった構文エラー）: ページ上の要素に構文エラーが見つかった場合に表示されます。一般に、このメッセージは、余分な文字（<"/-*^#）が不適切に使われていることを示しています。
[コンソール] タブの便利な点は、エラー メッセージがエラー原因の行やドキュメントにリンクされている点です。この機能では、変更が必要となるコードの行まで問題を追跡できますが、完全に信頼できるとは限りません。このタブのエラー検出精度は信頼できるものですが、問題箇所の特定メカニズムの精度はそれほど高くなく、コーディング エラー付近の行にリンクされているだけのこともあります。
