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 呼び出しを収集する先入れ先出しのデータ構造であるキューとして機能します。キューに何かを追加するには、_gaq.push メソッドを使用します。

API 呼び出しをキューに push するには、呼び出しを従来の 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']);

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

逆のユースケースも考えられます。たとえば、以前にプッシュしたコマンド配列で作成した非同期トラッカー オブジェクトを使用する必要がある場合は、_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']);

トップへ戻る