ga.js の概要(従来版)

ga.js は、ウェブサイト上でのユーザーの操作を測定するための JavaScript ライブラリです。これは従来のライブラリです。Google アナリティクスを初めて使用する場合は、最新のトラッキング ライブラリである analytics.js を使用する必要があります。

トラッキング コードのクイックスタート

アナリティクス スニペットは、ページに貼り付ける小さな JavaScript コードです。ページに ga.js を挿入して、Google アナリティクスのトラッキングを有効にします。これをページで使用するには、以下のコード スニペットをコピーして、UA-XXXXX-X を実際のウェブ プロパティ ID に置き換えます。 このスニペットをウェブサイトのテンプレート ページの </head> 終了タグの前に貼り付けます。

基本的なページ トラッキング以外の操作が必要な場合は、API で使用可能なメソッドの一覧についてはトラッキング リファレンスをご覧ください。非同期構文の使用方法について詳しくは、使用ガイドをご覧ください。トラッキングを設定する詳しい手順については、トラッキングの設定に関するヘルプセンター記事をご覧ください。

<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>

上記のスニペットは、ページを非同期でトラッキングするために必要な最小限の設定を表しています。_setAccount を使ってページのウェブ プロパティ ID を設定し、_trackPageview を呼び出してトラッキング データを Google アナリティクス サーバーに送り返します。

重要: 従来のスニペットから最新の非同期バージョンにページを更新する場合は、まず既存のトラッキング スニペットを削除する必要があります。両方のスニペットを同じページで併用することはおすすめしません。移行手順については、非同期サービスへの移行をご覧ください。

非同期構文の仕組み

_gaq オブジェクトは、非同期構文を可能にします。これはキューとして機能します。キューは先入れ先出しのデータ構造であり、ga.js で API 呼び出しを実行する準備が整うまで、API 呼び出しを収集します。キューに何かを追加するには、_gaq.push メソッドを使用します。

API 呼び出しをキューにプッシュするには、従来の JavaScript 構文からコマンド配列に変換する必要があります。コマンド配列は、単に特定の形式に従った JavaScript 配列です。コマンド配列の最初の要素は、呼び出すトラッカー オブジェクト メソッドの名前です。文字列にする必要があります。残りの要素は、トラッカー オブジェクトのメソッドに渡す引数です。任意の JavaScript 値を指定できます。

次のコードは、従来の構文を使用して _trackPageview() を呼び出します。

var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

非同期構文の同等のコードでは、_gaq.push を 2 回呼び出す必要があります。

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

非同期構文ではトラッカー オブジェクトの作成は暗黙的に行われますが、トラッカーのウェブ プロパティ ID を設定する方法は必要です。この機能を提供するため、_setAccount メソッドが追加されました。その他のトラッカー オブジェクトのメソッドはすべて、非同期トラッキングと従来のトラッキングで同じです。構文のみが異なります。

非同期構文について詳しくは、トラッキング リファレンス_gaq.push メソッドの説明をご覧ください。

トップへ戻る

HTML イベント ハンドラによるトラッキング

DOM イベント ハンドラ内からも非同期トラッキング構文を使用する必要があります。たとえば、次のボタンをクリックすると、イベントが生成されます。

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>

ブラウザが ga.js の読み込みを完了する前にこのボタンがクリックされても、イベントがキャプチャされ、最終的に実行されます。従来のトラッキングでは、このような場合にブラウザから例外がスローされることがあります。

トップへ戻る

キューへの関数の push

コマンド配列に加えて、関数オブジェクトを _gaq キューに push することもできます。関数には任意の JavaScript を含めることができ、コマンド配列と同様に、_gaq に push された順序で実行されます。この方法は、値を返すトラッキング API を呼び出す場合に役立ちます。たとえば、以下のコードはリンカー URL を作成し、その結果を使用してリンクの href プロパティを設定します。

_gaq.push(function() {
  var pageTracker = _gat._getTracker('UA-XXXXX-X');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

上記の例では _gat を使ってトラッカー オブジェクトを作成していますが、これはローカル変数に割り当てられているため、関数外のコードでは使用できません。これは許容されますが、_gat._createTracker メソッドを使用して、グローバルにアクセス可能な永続的なオブジェクトを作成できます。 次のコードは、その仕組みを示しています。

_gaq.push(function() {
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

_gaq.push(['myTracker._trackPageview']);

上記の例では、関数内に非同期トラッカーを作成し、コマンド配列で名前を使って後で参照しています。

逆のユースケースも考えられます。たとえば、以前に push されたコマンド配列を介して作成された非同期トラッカー オブジェクトを使用する必要がある場合は、_gat._getTrackerByName メソッドを使用します。次のコードにその仕組みを示します。

_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);

_gaq.push(function() {
  var pageTracker = _gat._getTrackerByName('myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

トップへ戻る

1 回のプッシュで複数のコマンド

呼び出しごとに「_gaq.push(...)」と入力する代わりに、すべてのコマンドを一度にプッシュできます。この方法を次のコードで示します。

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

これがうまく機能するのは、_gaq.push メソッドが Array.push メソッドを模倣し、1 回の呼び出しで複数のアイテムをプッシュできるようにするためです。

トップへ戻る

スニペットの分割

アナリティクス スニペットをページの下部に配置する場合は、スニペット全体を下部に配置する必要はありません。非同期読み込みのメリットのほとんどは、スニペットを半分に分割して、前半をページの上部に、残りを下部に移動することでも活用できます。トラッキング スニペットの最初の部分はページ レンダリングにほとんど影響しないか、まったく影響しないため、この部分は上部に配置し、スニペットの ga.js を挿入する部分を下部に配置できます。

非同期スニペットを半分に分割したページは次のようになります。

<html>

<head>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
  </script>
</head>

<body>
  <p>Page Content</p>

  <script src="some_random_script.js"></script>

  <p>Page Content</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>

どちらのコードもそれぞれ個別の script タグでラップする必要がありますが、一番下に移動する必要があるのは元の非同期スニペットの最後の 6 行だけです。_gaq にメソッドを push する行はすべて先頭にしてもかまいません。

トップへ戻る

よくある問題の回避方法

非同期の構文または従来の構文を使用する場合は、次の点に注意してください。

  • メソッド名では大文字と小文字が区別されます。
    大文字と小文字を正しく指定せずにメソッド名を使用すると、メソッドの呼び出しが機能しなくなります。例:
    _gaq.push(['_trackpageview']);   // bad
    _gaq.push(['_trackPageview']);   // good
  • 正しいメソッド名を使用します。
    トラッキングが正しく機能しない場合は、メソッドに正しい名前を使用していることを確認してください。例:
    _gaq.push(['_setDomain', 'example.com']);       // bad
    _gaq.push(['_setDomainName', 'example.com']);   // good
    
  • 文字列のみを引用符で囲んで渡すようにしてください。文字列以外の値は引用符で囲まないでください。
    ブール値、オブジェクト リテラル、関数、配列など、文字列以外の値は、引用符なしで渡す必要があります。文字列として解釈されるものを渡す場合にのみ、引用符を使用します。従来の構文から移行する場合、引用符なしで渡された関数パラメータは非同期の構文でも引用符で囲まないでください。例:
    _gaq.push(['_setAllowLinker', 'false']);    // bad
    _gaq.push(['_setAllowLinker', false]);      // good
    
  • 文字列の先頭や末尾に空白文字が含まれないようにします。
    例:
    _gaq.push(['_setAccount', ' UA-65432-1']);    // bad
    _gaq.push(['_setAccount', 'UA-65432-1']);     // good
    

トップへ戻る

トラッキングの無効化

場合によっては、コード スニペットを削除せずに、ページの Google アナリティクス トラッキング コードを無効にする必要があります。たとえば、サイトのプライバシー ポリシーに、訪問者が Google アナリティクスによるトラッキングをオプトアウトできる場合などです。

ga.js トラッキング スニペットに window プロパティが追加されました。このプロパティを true に設定すると、トラッキング スニペットによる Google アナリティクスへのデータ送信が無効化されます。Google アナリティクスは、Cookie の設定時または Google アナリティクスのサーバーへのデータの送信時に、このプロパティが true に設定されているかどうかをチェックします。設定すると、 Google アナリティクス オプトアウト ブラウザ プラグインがインストールされている場合と同じ効果が得られます。

トラッキングを無効にするには、次の window プロパティを true に設定します。

window['ga-disable-UA-XXXXXX-Y'] = true;

ここで、値 UA-XXXXXX-Y は、トラッキングを無効にするウェブ プロパティ ID に対応します。

このウィンドウ プロパティは、トラッキング コードを呼び出す前に設定する必要があります。このプロパティは、Google アナリティクスによるトラッキングを無効にするすべてのページで設定する必要があります。このプロパティが未設定または false に設定されている場合、トラッキングは通常どおり動作します。

たとえば、ページの Google アナリティクス トラッキング コードに次のようなコードが含まれているとします。

_gaq.push['_setAccount', 'UA-123456-1']

そのトラッキング コードで Cookie の設定や Google アナリティクスへのデータの送信を行えないようにするには、トラッキング コードが呼び出される前に次のコードを使用します。

window['ga-disable-UA-123456-1'] = true;

複数のウェブ プロパティ ID を持つページで複数のトラッカーを使用する場合は、それぞれのウェブ プロパティで同等の window['ga-disable-UA-XXXXXX-Y'] 変数を true に設定して、そのページでの Google アナリティクス トラッキングを完全に無効にする必要があります。

ユーザーにオプトアウト機能を提供するために使用できるコードの簡単な例を次に示します。

まず、新しい HTML リンクをサイトに追加し、オプトアウトのロジックを実行します。

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

次に、ga.js コード スニペットのに、以下のコード スニペットを追加します。gaProperty の値を UA-XXXX-Y からサイトで使用しているプロパティに置き換えてください。これは、_setAccount コマンドに渡す値と同じです。

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

ユーザーがオプトアウト HTML リンクをクリックすると、カスタム gaOptout 関数が実行されます。今後、Cookie が長期間設定され、analytics.js によるデータ収集が無効になります。ユーザーがこのサイトに戻ったときに、上記のスクリプトによってオプトアウト Cookie が設定されているかどうかを確認します。設定されている場合、analytics.js によるデータ収集も無効になります。

SSL の使用(HTTPS)

Google アナリティクスで、安全性の低いページ(HTTP)からのデータを常に SSL を使用して送信する場合は、次の例のように _gat._forceSSL メソッドを使用します。

_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_gat._forceSSL']);       // Send all hits using SSL, even from insecure (HTTP) pages.
_gaq.push(['_trackPageview']);

トップへ戻る