Chrome開発者ツールとは

Chrome開発者ツールとは、Google Chromeに搭載されている機能の1つで、Web制作を行う開発者がより効率的に制作ができるようにするための非常に強力なツールです。Chrome開発者ツールを使うと、

  • ページの内容をブラウザ上で一時的に書き換える
  • 様々なデータがどのようにダウンロードされ、それぞれ何秒かかっているかがチェックできる
  • 実行中のJavaScriptを一時停止させ、内部状態をチェックすることができる

などの機能により、Web制作の効率を飛躍的に高めることができるため、多くのWeb開発者が利用しています。

そんなWeb開発者向けの機能ですが、Web広告の運用者でもChrome開発者ツールを使うことで、リマーケティングタグやコンバージョンタグが正常に動作しているかをより高い精度でチェックすることができるようになります。

Chrome開発者ツールの基本的な使い方

Chrome開発者ツールを開くには

Chrome開発者ツールを開くには、チェック対象のWebサイトをGoogle Chromeで開き、「F12」キーを押すだけでOKです。すると、ブラウザの下部または別ウィンドウで下のキャプチャのようなChrome開発者ツールが開きます。

各タブの役割

Chrome開発者ツールのウィンドウには、デフォルトで8個のタブがあります。ここでは、各タブの役割を簡単に説明します。

タブ名 役割
Elements HTMLのタグ構造をツリー上に表示させる。また、そのまま画面上で編集を加えることも可能。
Network 読み込まれているHTMLや画像、JavaScriptなどのリソースデータを一覧で見たり、それぞれ読み込みにどのくらい時間がかかったかなどが見れる
Sources ページ表示に使われている全てのHTMLやJavaScript, CSSの中身が確認できる. そのまま画面上で編集を加えることも可能。
Timeline UI(ユーザーインターフェイス)のパフォーマンスを計測して、チューニングするポイントを探し出すための機能。
Profile CPUやメモリの情報を収集して詳細を確認するための機能。CPUやメモリの消費が激しいサイトでのパフォーマンス計測・チューニングするポイントを探し出すために使う。
Resources ブラウザ上に保存されたCookieやLocalStorage, SessionStorageなどの中身を見ることができる。
Audits Webページを最適化するための推奨事項を提示してくれる機能。
Console JavaScriptを簡易的に実行することができる。

Chrome開発者ツールを使ってタグのテストをする方法

タグの動作を確認するために必要なタブは、 Networkタブになります。このNetwork機能を使いこなすことで、リマーケティングタグやコンバージョンタグの動作チェックの精度を高めることができます。

タグのテストについて

リマーケティングタグやコンバージョンタグ、Googleアナリティクスなどのタグは、Googleなどの発行元のサーバーに対して何らかの呼び出しを行うための処理が書かれています。

Networkタブでは、開いているページを描画するために必要なリソースファイルの呼び出し/ダウンロードに関わる情報を見ることができます。そのため、Networkタブを用いて、サーバーに対する呼び出しが正常に行われているかをチェックすることができます。

Networkタブの見方

一覧ビュー

一覧ビューでは、そのページを表示するために読み込んだデータがすべて表示されています(もし、何も表示されていなかったり、思ったより少ない場合は、開発者ツールを開いたままで再度ページを読み込みなおしてみてください)。

  1. 1 読み込んだファイル名の一覧
  2. 2 読み込まれたファイル名をフィルタするための検索窓

この一覧ビューには他にもWeb開発を行うにあたって、重要な情報がたくさんありますが、タグのテストをするには、まずは上記1と2について知っていれば大丈夫です。

詳細ビュー

一覧ビューから、どこかの行をクリックすると、そのファイルの読み込みに関する詳細情報を確認することができる詳細ビューに移動します。

  1. 1  読み込むためのURL
  2. 2 送信しているCookieデータ
  3. 3 送信時に付与されるパラメーターの一覧

チェックするときは、対象のタグでフィルタしてから、この詳細ビューを使い、媒体から指定されたidなどのパラメーターが1または3の中に存在することを確認します。

媒体ごとのFilter

では、各媒体の各タグの詳細ビューにたどり着くためにフィルターに入れるとよい文字列を記載します。サイトの作りによっては、この文字列でフィルターしても1つに絞られないかもしれませんが、数は減るはずなので、出てきたURLを1つづつ見ていくことも可能だと思います。

タグの種類 フィルターに使える文字列
Googleアナリティクス(ユニバーサル) collect
Googleアナリティクス(非ユニバーサル、非同期) utm
Google AdWords リマーケティングタグ user-list
Google AdWords コンバージョンタグ www.google.co.jp/ads/conversion/
Yahoo! スポンサードサーチ コンバージョンタグ b91.yahoo.co.jp/pagead/conversion.js
Yahoo! ディスプレイネットワーク リマーケティングタグ b92.yahoo.co.jp/search
Yahoo! ディスプレイネットワーク コンバージョンタグ yahoo_ydn_conv_io
Facebook リマーケティングタグ www.facebook.com/tr
Facebook コンバージョンタグ www.facebook.com/tr

まとめ

タグマネージャーを利用している場合は基本的にはタグマネージャー上のデバッグツールでチェック作業が済んでしまいますが、タグマネージャーを利用していないケースであったり、高度なカスタマイズをした結果正しく動作しているか確認したいケース、またタグマネージャーのデバッグの結果を疑う必要がでてきたときなどに、この方法で動作チェックするといいでしょう。