Google Analyticsのトラッキングコードを外部ファイルに

Google Analyticsは ホームページのアクセス解析には簡単で便利なものです。Google Adsenseの解析にも使えます。非同期トラッキングコードは headタグの最後に入れるようになっています。このトラッキングコードを外部ファイルにして読み込んでみました。

Google Analyticsのトラッキングコードとは

Google Analyticsのトラッキングコードは以前はHTMLのbodyタグの最後に挿入するようになっていましたが、最近確認すると、 非同期楽天 のトラッキングコードになってheadタグの最後に入れるようになっています。非同期トラッキングコードとは次のようなものです。

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

非同期トラッキングコードの良い点

ページの読み込み時間が短縮される

データの収集と正確性が向上する

Javascriptが正常に読み込まれなかったことによるエラーが回避される

Google Analyticsのトラッキングコードを外部ファイルにして読み込む

そこでヘッドタグの最後に入れてみましたが、コードを見るとヘッドタグの中がゴチャゴチャしていて見にくいようです。よく見るとこれはJavascriptそのものです。先日external.jsをヘッドタグ内に読み込むようにしたばかりなので、この中にトラッキングコードも入れてみたらどうかと、実験してみました。結果は問題なくアクセス解析が行われているようです。

外部ファイルにする時は次のようにscriptタグを取り除いて、既存のファイルの次に追加します。このようにするとファイルを読み込む時間も短縮できるはずです。SEOにも良いはずです。

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Google Adsenseのトラッキングコードも外部ファイルに追加

別サイトやサブドメインで運用しているGoogle Adsenseのトラッキングコードを追加する場合は同様にコードを追加します。

window.google_analytics_uacct = "UA-XXXXX-X";

トラッキングコード等をヘッドタグ内で呼び出す方法

このコードを例えばexample.jsという名前でドメインルート等に保存し、アップロードします。これを呼び出すには、HTMLヘッダー部で次のように記述します。

<script type="text/javascript" src="http://hogehoge.jp/example.js"></script>