Chrome開発者ツールを使った計測タグの動作確認方法（Network編） #Chrome

エンジニアじゃない人向けの記事。
Google Chromeの開発者ツールのNetworkタブを使って広告やアクセス解析ツールの計測タグが正常動作しているか簡易確認する方法。

この記事では、Google AdWordsのコンバージョンタグを例に解説する。

コンバージョンタグとは…

計測タグの一種。Webサイトでユーザーが商品の注文など（=コンバージョンアクション）を完了させた後に表示される「ご注文ありがとうございました」のようなメッセージが書いてあるWebページ（=サンクスページ）のHTML内に埋め込むタグ。
コンバージョンタグが広告サーバーやWeb解析ツールと通信を行うことにより、いつどこからWebサイトに流入した何人のユーザーがコンバージョンアクションに至ったのかを計測することができる。
コンバージョンタグにより収集された統計データを確認することによりWebサイト管理者は自身が設定した目標(=一定の収益性の元での売上の最大化など)を達成するためにどこにリソースを投下すべきなのか知ることができる。

やりたいこと

以下の計測タグをあるWebページのHTML内に埋め込んだ後に、このタグが正常に計測タグのサーバー（今回はGoogleのサーバー）と通信していることを確認する。

AdWordsコンバージョンタグ

<!-- Google Code for Web&#26089;&#24471;&#30003;&#12375;&#36796;&#12415; Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 974138625;
var google_conversion_label = "J56lCIjxoIUBEIHawNAD";
var google_conversion_value = 0.00;
var google_conversion_currency = "JPY";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/974138625/?value=0.00&amp;currency_code=JPY&amp;label=J56lCIjxoIUBEIHawNAD&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

手順

計測タグ内の固有の情報を探す

ほとんどの計測タグには長めの桁数の数字、あるいはランダムな英数字の文字列が含まれている。
これは計測タグの発行元のアカウントや同じアカウントから発行された複数の計測タグを区別するための情報であり、これらの情報が計測システムのWebサーバーに送られるからこそ「どのタグが動作したのか」を計測システムは知ることができる。

今回の計測タグには、固有の情報が2つ入っている。

意味	固有の情報
アカウントID	`974138625`
計測タグ固有のID	`J56lCIjxoIUBEIHawNAD`

タグの通信に成功したとき、これらの情報は必ず計測システムに送られる。

開発者ツールを使用する

Google Chromeを開き、以下の何れかの方法でシークレットウィンドウを起動する。

ブラウザ右上の「︙」メニューをクリックして、「シークレットウィンドウを開く」を選ぶ。
キーボードのCtrl+Shift+nを同時に押す。（Macの場合：⌘+Shift+n）

シークレットウィンドウを開いたら、以下の何れかの方法で開発者ツールを起動する。

右クリックで表示されるメニューの中から「検証」を選ぶ
キーボードのF12キーを押す

開発者ツールが表示されたら、「Network」タブを開いた後に計測タグを埋め込んだURLのページまで移動する。
（※既にページを開いてから開発者ツールを開いても遅いので、その時はページをリロードするかやり直す）

大量の通信内容が表示されており、このままでは目的の計測タグによる通信を探すことが難しいので、フィルター機能を使って表示する通信を絞り込む。
左上にFilterと書いてある入力フォームがあるので、ここに先ほど見つけた「固有の文字列」を入力する。
また、その右側に「All XHR JS CSS Img」のように並んでいるメニューがあるので、これは「All」を選択しておく。
もしフォームが見つけられない場合は折り畳まれているので、下の図でオレンジ色の丸で囲っているフィルタリングボタンをクリックしてフォームを表示させる。

今回はJ56lCIjxoIUBEIHawNADの文字列で絞り込んでみる。

通信内容を絞りこむことに成功したら、それぞれの通信をクリックして詳細を確認してみると、先ほど探した「固有の情報」が2つとも含まれている通信を見付けることができる。

意味	固有の情報
アカウントID	`974138625`
計測タグ固有のID	`J56lCIjxoIUBEIHawNAD`

また、通信先は
https://www.googleadservice.com となっており、Google社のサーバーと通信していることが推測できる。（このURLも計測タグ内に含まれていたものと一致する）
更に、Status Codeが200か301,302あたりであれば計測タグの通信は正常に完了していることが確認できる。
（400番台や500番台だと何らかのエラーを起こしている）

以上で、計測タグは正常に通信できていることがわかった。

正常に通信できていたとして、サーバーの内部でデータが意図したとおりに処理されるかはまた別の問題なので、
通信が確認できた上でトラブルが起きているときは、以下の内容を確認する。

そもそもサービス内の設定で計測設定がオンになっているか
IPアドレスやCookie情報による計測対象の制限が意図せぬ範囲で掛かっていないか
依頼すべき計測タグと違うものを設置依頼してしまっていないか
同じ計測サービスから発行される他のタグがある場合、そちらも正常に動作しているか（オーディエンスタグやリマーケティングタグ、LPタグなど）
結果が今見ている場所と別の場所の数値に反映されていないか
反映の遅延が起きているのではないか（→ 公表されている反映遅延時間を調べる）

また、タグマネージャーツール経由で計測タグを埋め込んでいる場合、
別のタグマネージャーサービス越しに計測タグを埋め込んでみたり、直接HTMLに埋め込んでみたりすることで正常に通信できるようになるケースもある。

目的の通信が見つからなかった場合

依頼ミスや担当者によるタグの埋め込み間違い、あるいは他の計測タグとの干渉で計測タグが上手く動いていない「可能性」があるのでJavaScriptやWebプログラミングが分かる人、ツール提供元のテクニカルサポートに相談する。

また、一部のタグは固有の文字列を加工した上で送信する or この方法ではフィルタリングできないmessageなどに情報を入れるケースがあるため、タグに含まれるドメイン名でフィルタリングを行ってみると見つかる場合がある。

固有の文字列でフィルタリングできない例：MIERUCA
【ヒートマップ】GTM同一コンテナで、複数ドメインを管理している場合のタグ設置方法 – MIERUCA（ミエルカ）ヘルプセンター

相談に必要な情報

計測タグのコード
計測タグの仕様がわかるURLやPDFなどの資料
タグを設定してもらった筈のURL（と、そこに到達するための方法）
依頼内容や担当者とのやり取りの履歴が分かるもの

最後に

何か問題が起きたとき、漠然と「どこが上手くいっていないのか」を考えようとするより「どこまでは上手くいっているのか」を調査すると、スムーズにトラブルが解決できることが多い。これを「問題の切り分け」と呼ぶ。
例えば、テレビをリモコンで点けることができなかったときは、

電気供給の問題
テレビ本体の問題
リモコンの問題

に分けることができる。また、電源供給の問題だけでも、更に細かく見ると以下のように分けられる。

電源供給の問題
1. ブレーカーは落ちていないか
2. コンセントは正常に電気を供給しているか
3. コンセントとテレビは繋がっているか
4. 延長タップの節電スイッチがオフになっていないか
5. 延長タップは断線していないか
6. ACアダプターは故障していないか
7. ACアダプターのプラグに接触の問題が起きていないか

このように障害が発生しうる箇所をリストアップして、できる検証を行いながら「ここまでは上手くいっていることが分かった。ここからが怪しい」と、問題の原因と思われる箇所を木の枝を刈るように徐々に絞り込んでいくことでスムーズなトラブル解決を行うことができる。計測タグの動作検証についても同様のことが言える。

今回の通信による計測タグ動作方法について、このやり方ですべての問題が解決する訳ではないが、「問題の切り分け」を行う上でのテクニックとして大きな武器になる。

Chrome開発者ツールを使った計測タグの動作確認方法（Network編）

やりたいこと

手順

計測タグ内の固有の情報を探す

開発者ツールを使用する

目的の通信が見つからなかった場合

相談に必要な情報

最後に

参考になるリンク