当ブログや様々なメディアなどの情報をもとに、リマーケティングタグやコンバージョンタグをカスタマイズしている方もいるかと思います。そういったカスタマイズをしていると、必ず発生する問題に、 カスタマイズした結果、正しくタグが設置していない ということがあるかと思います。カスタマイズしてしまうと、公式サポートの手を借りようと思っても、思うようにサポートしてもらうことは難しくなってしまいます。
この記事では、タグのカスタマイズをしたときに、正しくタグが動作しているかどうかをチェックするための最も確実な方法を紹介します。タグマネージャー経由か、HTMLファイルに直接記載する方式かに関わらず、この方法なら統一的にチェックすることができます。また、タグマネージャーのデバッグツールでは、正常に配信されている、と表示されていても、実際には配信されていない、ということも起こり得るので、タグの動作状況が怪しいと感じたらここに書かれている方法でチェックしてみてください。
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タブの見方
一覧ビュー
一覧ビューでは、そのページを表示するために読み込んだデータがすべて表示されています(もし、何も表示されていなかったり、思ったより少ない場合は、開発者ツールを開いたままで再度ページを読み込みなおしてみてください)。
- 読み込んだファイル名の一覧
- 読み込まれたファイル名をフィルタするための検索窓
この一覧ビューには他にもWeb開発を行うにあたって、重要な情報がたくさんありますが、タグのテストをするには、まずは上記1と2について知っていれば大丈夫です。
詳細ビュー
一覧ビューから、どこかの行をクリックすると、そのファイルの読み込みに関する詳細情報を確認することができる詳細ビューに移動します。
- 読み込むためのURL
- 送信しているCookieデータ
- 送信時に付与されるパラメーターの一覧
チェックするときは、対象のタグでフィルタしてから、この詳細ビューを使い、媒体から指定された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! ディスプレイネットワーク コンバージョンタグ | yahooydnconv_io |
| Facebook リマーケティングタグ | www.facebook.com/tr |
| Facebook コンバージョンタグ | www.facebook.com/tr |
まとめ
タグマネージャーを利用している場合は基本的にはタグマネージャー上のデバッグツールでチェック作業が済んでしまいますが、タグマネージャーを利用していないケースであったり、高度なカスタマイズをした結果正しく動作しているか確認したいケース、またタグマネージャーのデバッグの結果を疑う必要がでてきたときなどに、この方法で動作チェックするといいでしょう。
