Googleアナリティクスの導入から、運用、活用まで、正式なサポートがない初めての人でもゼロから学んでいけるように、丁寧に解説していく。
Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座トラッキングコードをカスタマイズするための基礎知識［第63回］
トラッキングコードを使ったGoogleアナリティクスのカスタマイズについて、これから数回にわたって解説していく。
普通のユーザーがトラッキングコードに触れるのは、Googleアナリティクスを使用開始するときだけだ。しかも、データを収集したいすべてのページに貼り付けただけで、中味がどういうものだったかについては、おそらく記憶にないだろう。
まずは、トラッキングコードについて、説明しておく。
トラッキングコードとは、サイト訪問者のアクセス情報をGoogleアナリティクスのサーバーに送信してデータを分析できるように収集するための仕組みだ。Webサイト向けトラッキングコードは、JavaScriptのプログラムとして作られている。
現在、Googleアナリティクスで使われているトラッキングコードには、主に次の2種類がある。
- Universal Analytics ―― ユニバーサルアナリティクス用のanalytics.js
- 標準のアナリティクス ―― 従来のトラッキングコード（非同期のga.jsトラッキングコード）
ユニバーサルアナリティクス用のanalytics.jsも使えるが、2013年7月23日時点では、現状のすべての機能が使えるわけではない。また、ほとんどのプロパティで使われているのは従来のトラッキングコード（非同期のga.jsトラッキングコード）だと思われるので、本稿では非同期のga.jsトラッキングコードについて解説する。
analytics.jsとga.js非同期トラッキングコードでは、データ収集の仕組み自体が大幅に異なるのだが、トラッキングコードのカスタマイズ方法は類似点も多いので、非同期のga.jsトラッキングコードのカスタマイズをしっかり学べば、analytics.jsのカスタマイズの参考にもなるはずだ。
また、ワンタグでタグを管理するタグマネージメントツールである、Google Tag Managerを使う方法もあるが、まだ普及初期であることと、実際にコードの内容が目に見えない形になってしまうので、本稿では基本的にHTMLファイルに直接JavaScriptを記述する場合について解説していく。場合によってはJavaScriptライブラリのjQueryを利用して、効率よく記述することも可能だが、本連載ではそこまでは踏み込まない。
実装するga.js非同期トラッキングコード
下記がカスタマイズをしていない必要最小限の非同期トラッキングコードの内容だ。前回解説したとおり、UA-XXXXXXX-Yの部分が、各プロパティ（データ収集の単位）でユニーク（別々）になる文字列だが、それ以外はすべてのプロパティで共通だ。
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-Y']);
_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>ga.jsトラッキングコードはページのどこに貼り付けるのか
ga.jsトラッキングコードには、同期バージョンと非同期バージョンの2つが存在している（特に何もしなければ非同期バージョンになる）。「同期」と「非同期」の違いは次のようなものだ。
- 同期バージョン ―― HTMLファイルが読み込まれた順番にJavaScriptが実行される
- 非同期バージョン ―― HTMLファイルの読み込み順とは関係ないタイミングでJavaScriptが実行される
ga.js同期バージョンは</body>の直前に実装
ga.js同期バージョンでは、HTMLソースコードの</body>直前に実装する（貼り付ける）ことが推奨されている（カスタマイズの方法によっては例外があるが）。
これは、JavaScriptの読み込みが万が一エラーなどを起こしても、他のコンテンツの読み込みなどに影響を及ぼさないようにするためだ。
ga.js非同期バージョンは</head>の直前に実装
ga.js非同期バージョンでは、ga.jsの読み込みと並行してコンテンツの読み込みができるように変更された。そのため実装するコードも、位置も、同期バージョンとは異なる。非同期バージョンのga.jsを実装する位置は</head>の直前に実装することが推奨されている。
細かいことだが、この変更によって、従来はページ読み込みが完了することで、1ページビューと見なされていたのが、非同期バージョン導入後は、完全にページ読み込みされなくても1ページビューと見なされるようになったとも言えるだろう。仕組みが変われば計測にも多少の影響はあるというものだ。
</head>の直前に実装できない場合は、トラッキングコードを分割する
ただ、</head>の直前に実装することがさまざまな事情で難しい場合は、トラッキングコードを分割することもできる。トラッキングコードの最初の部分は、ページの表示にほとんどまたはまったく影響を与えないため、この部分を上部</head>の直前に配置し、ga.js を挿入するコードの部分を下部</body>直前に配置するというものだ。
非同期ga.jsトラッキングコードを半分に分割した記述例は次のようになる。赤字がトラッキングコードの部分で、2分割されている。
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-Y']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>コンテンツ</p>
<p>コンテンツ</p>
<script type="text/javascript"> (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>
</body>
</html>トラッキングコードの取得
トラッキングコードの入手と実装については、この連載の最初にすでに解説した。下記記事を参照してほしい。
追加カスタマイズの実装場所
トラッキングコードのカスタマイズの多くは、トラッキングコードの中にある下記2行のコードの間に追記カスタマイズしたトラッキングコード（赤字部分が一例）を挿入するのが基本形になる。
非同期ga.jsトラッキングコード（カスタマイズ前）
_gaq.push(['_setAccount', 'UA-XXXXXXX-Y']);
_gaq.push(['_trackPageview']);非同期ga.jsトラッキングコード（カスタマイズ後）
_gaq.push(['_setAccount', 'UA- XXXXXXX-Y ']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);あるいは非同期版では下記のように一度にすべてのコマンドを指定することも可能なので、下記のようにも記述できる。
_gaq.push(
['_setAccount', 'UA- XXXXXXX-Y '],
['_setDomainName', 'none'],
['_setAllowLinker', true],
['_trackPageview']
);
カスタマイズするための具体的なトラッキングコードの数々については、次回以降で解説していく。
上級者向け：特定の条件発生時にデータを取得したい場合
以下は、上級者向けの補足だ。
特定の条件が発生した場合にだけデータを取得したいような場合もあるだろう。そういった目的の場合、データ取得の命令を基本のトラッキングコードの場所に書くわけにはいかない。そのため、データを取得したいタイミングで、データを単独で飛ばすことができる以下の5つの命令を実行するようにJavaScriptコードを記述する。
- _trackEvent
- _trackPageview
- _trackSocial
- _trackTiming
- _trackTrans
ただし、_trackTransはeコマースのトラッキングコードという別の明確な目的があるし、_trackTimingや_trackSocialもそれぞれ役割が決まっているので、適当に実装すればいいわけではない。一般的には_trackEventを使うのがいいだろう。
特定の条件が発生した場合にだけカスタム変数を指定したい場合もあるだろう。たとえば「入力フォームで［郵便番号から住所を検索］機能を使った訪問」をカスタム変数で識別したい場合などだ。このような場合には、その命令を標準の「_trackPageview」の前には置けない（特定のボタンをクリックしたときにだけ指定したいため）。
そのため下記のようにして、カスタム変数を設定する_setCustomVarを設定したあとに、_trackEventを指定するといい（イベントのレポートにデータが出てくるのだが、データを使う必要がなければ、無視してしまえばよい）。
_gaq.push(['_setCustomVar', 1, 'name', 'value', 2]);
_gaq.push(['_trackEvent', 'category', 'action', 'label', 1, true]);カスタム変数を指定する命令（_setCustomVar）は、それ単体ではデータがサーバーに送られないため、カスタム変数を指定したあとで_trackEvent（または_trackPageviewや_trackTrans）を実行しなければデータが取得できないのだ。
こうしたトラッキング命令の仕組みを理解して、正しい方法で実装するようにしよう。
筆者の『ユニバーサルアナリティクス版Googleアナリティクス完全マニュアル（PDF）』が発行されました。
筆者が講義を行うGoogle アナリティクス徹底講座も、定期的に開催しています。 → Google アナリティクス ゼミナール
衣袋 宏美（いぶくろ ひろみ）
1960年東京都生まれ。東京大学教養学部教養学科卒業。大手電気メーカー勤務後、日経BP社へ。調査部、インターネット視聴率センター長などを経て、2000年ネットレイティングスへ。視聴率サービスやアクセス解析サービスの立ち上げに尽力。2006年株式会社クロス・フュージョンを設立し代表取締役に。2023年活動停止。
- 『Google Analyticsによるアクセス解析入門』単著
- 『PROFESSIONALアクセス解析』単著
- 『ネット視聴率白書2008-2009』編著
- 『Webアナリスト養成講座』監訳
- ブログ： Insight for WebAnalytics
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!