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