HOME > 解析タグが何をしているのか調べてみた。

2015/06/24

解析タグが何をしているのか調べてみた。

みなさまこんにちわ。
全国的に梅雨入りですね。

ジメジメした日が続いていますが家にこもってウェブの勉強をするいい機会だと思って乗り切りましょう！

さて、今回は解析タグがページ上で何をしているのか調べてみました。
このサイトをご覧いただいているみなさんも解析タグを取り扱う機会は多いのではないかと思うので「実際なにがどうなってんの？」と疑問に思っている方の参考になれば幸いです。

代表的な解析タグとして「Google Analytics」のタグを題材にしています。

まず解析タグを入れただけの下記のようなページを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Tag Test</title>
</head>
<body>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-32540483-9', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-32540483-9', 'auto');

ga('send', 'pageview');

</script>

</body>

</html>

これをアップロードして、ブラウザで開いてみます。
表示してみた結果が↓こちら。

<body>タグ内にGoogle Analyticsのトラッキングコードしか書いていないので何も表示されていません。

では、Google Chrome Developer Tools でソースコードを見てみましょう。
（Developer Toolsの使い方はこちら）

※Developer ToolsのElementタブに表示されるソースコードでは、JavaScriptなどで追加されたタグなども表示されます。
そのため、解析タグによって追加や変更されたタグを確認することもできます。

↓こんな感じになっていました。

<script async="" src="//www.google-analytics.com/analytics.js"></script>

1	<script async="" src="//www.google-analytics.com/analytics.js"></script>

というコードが一文追加されているのが分かります。

こういった追加コードはJavaScriptで追加処理が行われる場合が多いのですが、今回入れているJavaScriptコード1つなので、最初に埋め込んだトラッキングコードのJavaScript処理でこの一文が追加されていることが分かります。

ここで指定されている”analytics.js”がGoogle Analyticsのトラッキング用JavaScriptのコアになります。

async属性が指定されているので「非同期に読み込み、読み込み完了出来次第実行する」ようブラウザへの指示がされていることになります。

最初に埋め込んだトラッキングコードの

  ga('create', 'UA-32540483-9', 'auto');
  ga('send', 'pageview');

1 2	ga('create', 'UA-32540483-9', 'auto'); ga('send', 'pageview');

行頭にある「ga」はメソッド（命令文）を意味しています。

これにより解析処理を行おうとしているわけです。

ベーシックなJavaScriptには「ga」というメソッドは存在しません。
そのため、「ga」メソッドは別のJavaScriptで定義されていることが分かります。

このページで追加されている別のJavaScriptは「analytics.js」しかありません。
つまり「ga」というメソッドは「analytics.js」内で定義されていると推測できます。

試しにトラッキングコードから上記の2行以外が機能しないよう、コメントアウトしてみましょう。

↓こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Tag Test</title>
</head>
<body>

<script>
  // (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  // (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  // m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  // })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-32540483-9', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

// })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-32540483-9', 'auto');

ga('send', 'pageview');

</script>

</body>

</html>

これをブラウザで開き、Developer Toolsで見ると↓こんな感じでした。

さきほど追加されていた一文が追加されていないことが分かります。

つまり、コメントアウトした箇所のJavaScriptコードで一文追加する処理が行われていたことが分かります。

また、Console欄には下記エラーメッセージが表示されていました。

これは「ga」というメソッド定義が見つからないから意味わからないよ？という意味です。（だいぶおおざっぱに書きました。。汗）

（もっとおおざっぱに訳すと）「gaって何ソレ？」とブラウザが言っている状態なので、

  ga('create', 'UA-32540483-9', 'auto');
  ga('send', 'pageview');

1 2	ga('create', 'UA-32540483-9', 'auto'); ga('send', 'pageview');

の２行は処理されません。

２行目はpage viewデータをsend(送信)しているようですが処理されないのでページビューはカウントされないはずです。
（このページに設定したGoogle Analyticsアカウント管理画面で確認したところ、やはりpageviewは取得できていませんでした。）

このようにトラッキグコードを埋め込むことで、解析用メソッドが定義されたJavaScriptファイルを読み込むコード追加が行われ、その上で解析情報の送信処理を行っているわけです。

他の解析タグもほぼ同様の動きをしています。

ただ、JavaScriptでの処理が行われるため、他のスクリプトコードへの配慮がきちんとなされていないものがあった場合、競合が起こり正しく処理されない場合もあります。

解析用のタグを新たに追加しなければならなかったり、多くの解析タグが入ったページを運用しなければいけない時は、Google Chrome Developer Toolsなどの解析ツールを利用して、正しく解析タグが動作しているか確認するようにした方がよいでしょう。

最低限Console上にエラー表示がないか確認した方がよいでしょう。

ご自身が扱うことがある解析タグで同様のテストを行ってみるのも面白いかもしれません。

今回は以上です。

最後までお付き合いいただきありがとうございます。
また次回も宜しくお願いします。