高度な設定 - ウェブトラッキング（analytics.js）

このドキュメントでは、analytics.js コレクションライブラリの概要を説明します。

JavaScript スニペット

Google アナリティクスをサイト上で有効にするには、JavaScript コードをページの </head> 終了タグの直前に追加する必要があります。その場合、スニペットの一部は以下のようになります。

(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 という新しいグローバル関数が作成されます。続いて非同期的に analytics.js ライブラリがページに読み込まれます。

ga グローバル関数は、analytics.js ライブラリの操作の中心を担います。この関数によって一連のパラメータを受け入れ、その際の最初のパラメータが Google アナリティクスのコマンドとなります。たとえばデフォルトのスニペットでは以下のようになります。

ga('create', 'UA-XXXX-Y', 'auto');  // Creates a tracker.
ga('send', 'pageview');             // Sends a pageview.

最初の行で create コマンドを呼び出し、2 行目で send コマンドを呼び出します。

JavaScript によって analytics.js ライブラリが非同期的に読み込まれますが、ga 関数はその前に使用できるようになっています。最初にコマンドを実行すると、それぞれのコマンドがキューに追加されます。ライブラリの読み込みが完了すると、キュー内のすべてのコマンドが実行され、新しいコマンドがすぐに実行されます。そのため、開発者の方は Google アナリティクスの非同期性に捉われず、ga 関数を使用することに集中できます。

グローバルオブジェクトの名前の変更

場合によっては、ga の変数名がページ上の既存のオブジェクトで既に使用されていることもあります。既存のオブジェクトを上書きしてしまわないように、ga 関数の名前を __gaTracker などに変更することができます。この処理は、上記のスニペットの ga パラメータを次のように書き換えるだけで可能です。

(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','__gaTracker');

これにより、コマンドの呼び出し時に、ga の代わりに __gaTracker を使用できるようになります。

__gaTracker('create', 'UA-XXXX-Y', 'auto');
__gaTracker('send', 'pageview');

JavaScript スニペットに関する参照情報

以下はコメントと空白を含む基本的な JavaScript スニペットの例です。

<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analy  tics.js.
 * Paramenters o, a, and m are all used internally.  They could have been declared using 'var',
 * instead they are declared as parameters to save 4 bytes ('var ').
 *
 * @param {Window}      i The global context object.
 * @param {Document}    s The DOM document object.
 * @param {string}      o Must be 'script'.
 * @param {string}      g URL of the analytics.js script. Inherits protocol from page.
 * @param {string}      r Global name of analytics object.  Defaults to 'ga'.
 * @param {DOMElement?} a Async script tag.
 * @param {DOMElement?} m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.  The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.  Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.  Inserts above current tag to prevent blocking in
  // addition to using the async attribute.
  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-XXXX-Y', 'auto'); // Creates the tracker with default parameters.
ga('send', 'pageview');            // Sends a pageview hit.
</script>
<!-- End Google Analytics -->

代替非同期コード

上記の正規の analytics.js スニペットにより、すべてのブラウザでスクリプトが確実に読み込まれ、非同期的に実行されますが、最新のブラウザでは、スクリプトをプリロードできないという欠点があります。

このような場合に備えて、次のような代替スニペットがあります。この代替スニペットにより、最新ブラウザでのパフォーマンスはわずかに向上しますが、IE 9 や古いモバイルブラウザでは async 属性が認識されないため、読み込みと実行が同期的に行われる可能性があります。このため、ユーザーが主に最新のブラウザを使用してサイトにアクセスする場合のみ、このスニペットを使用することをおすすめします。

<!-- Google Analytics -->
<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

トラッカーオブジェクトの作成

Google アナリティクスにデータを送信するには、トラッキングオブジェクトを作成します。それぞれのトラッキングオブジェクトから、単一の Google アナリティクスのウェブプロパティにデータを送信することができます。トラッキングオブジェクトを作成するために、デフォルトでは以下のコードが使用されます。

ga('create', 'UA-XXXX-Y', 'auto');

ga 関数の最初のパラメータは create コマンド、2 つ目のパラメータはデータを送信するウェブプロパティの ID となっています。

トラッカーオブジェクトの設定変更

トラッキングオブジェクトの設定変更はすべてオブジェクトの最初の作成時に済ませておく必要があります。設定の変更をするには、設定オブジェクトを最後のパラメータとして ga 関数に渡します。たとえば Cookie 設定の一部を上書きする場合は、以下のようになります。

ga('create', 'UA-12345-6', {
   'cookieDomain': 'foo.example.com',
   'cookieName': 'myNewName',
   'cookieExpires': 20000
});

上記の例では、Cookie のドメイン、名前、有効期間がオプションの設定オブジェクトによってすべて変更されています。

create コマンドで設定できるすべてのフィールドの詳細については、フィールドに関するリファレンスの create 専用セクションをご覧ください。

ローカルホストでのテスト

localhost で実行するウェブサーバーから analytics.js のテストが必要になることがあります。analytics.js の Cookie を設定するには、以下のようにデフォルトの Cookie ドメインを無効にする必要があります。

ga('create', 'UA-XXXX-Y', {
  'cookieDomain': 'none'
});

データの送信

トラッキングオブジェクトが作成されウェブプロパティに関連付けられたら、send コマンドを使用してそのウェブプロパティにデータを送信します。Google アナリティクスに送信するデータは「ヒット」と呼ばれます。analytics.js ライブラリでは、hitType を指定することでさまざまなタイプのデータを送信できます。send コマンドを使用する場合は、送信対象のデータの hitType も指定する必要があります。

たとえば、ページビューヒットを送信する場合は以下のようになります。

ga('send', 'pageview');

これにより、デフォルトの URL のデータが Google アナリティクスに送信されます。

フィールド名オブジェクト

ページビューとして送信される複数の値の上書きが必要になることがあります。analytics.js ライブラリでは、send コマンドの最後のパラメータとしてフィールド名オブジェクトを渡すことができます。この方法は、ページタイトルなど、ページビューのさまざまなプロパティを追加設定できるため便利です。

ga('send', 'pageview', {
  'page': '/my-new-page',
  'title': 'My New Page Title'
});

トラッカーオブジェクトの設定方法の詳細については、フィールドに関するリファレンスをご覧ください。

ヒットコールバックの設定

外部リンクをトラッキングしている場合などは、トラッカーによるデータ送信が完了するタイミングを把握しておくと、クリックデータが Google アナリティクスに送信されてから、ユーザーをリンク先に誘導できるようになります。これには、send コマンドを使用して、analytics.js によるデータ送信の完了直後に実行されるフィールド名オブジェクトで hitCallback 関数を指定します。hitCallback 関数を設定する方法は以下のとおりです。

ga('send', 'pageview', {
  'page': '/my-new-page',
  'hitCallback': function() {
    alert('analytics.js done sending data');
  }
});

この例では、フィールド名オブジェクトにより、page パラメータと hitCallback の両方がせっていされトラッカーによるデータ送信が完了すると、ユーザーにはアラートボックスが表示されます。

複数の send コマンド全体でのパラメータの設定

パラメータを設定し、複数の send コマンドで値の維持が必要なことがあります。たとえば 1 回のページビューと 2 回のイベントをトラッキングするウェブページがあるとします。このとき、各ヒットのページパスを独自のカスタムパスで上書きしたい場合は、個々の send コマンドで新しいパスを設定するか、set メソッドを使用して以下のように設定することができます。

ga('set', 'page', '/my-custom-page');

ga('send', 'pageview');
ga('send', 'event', 'image1', 'clicked');
ga('send', 'event', 'image2', 'clicked');

2 行目以降のコードの実行時に、3 つの send コマンドすべてに対し、上書きされたページ「/my-custom-page」が送信されます。

`useBeacon` によるヒットの送信

navigator.sendBeacon を使用してヒットを送信するには、 useBeacon パラメータを true に設定します。navigator.sendBeacon メソッドを使用すると、リクエストの途中でユーザーが別のページに移動したり、ブラウザを閉じたりした場合でも、データが確実に送信されます。この機能は、ユーザーが別のサイトに移動する直前に、移動を遅延することなくイベントをトラッキングしたい場合、特に便利です。

注: ブラウザで sendBeacon がサポートされていない場合、この機能の代わりにデフォルトのヒットメカニズムが使用されます。

ga('send', 'event', 'click', 'download-me', {useBeacon: true});

関数のプッシュ

analytics.js ライブラリが読み込まれてからコードを実行したい場合もあります。そうした場合には、関数をパラメータとして ga 関数に渡します。

ga(function() {
  alert('library done loading');
});

ライブラリの読み込み後、ユーザーにアラートボックスが表示されます。

パラメータの取得

analytics.js では、get コマンドを使用して、トラッキングオブジェクトに設定された任意の値を取得できます。トラッカーオブジェクトはライブラリの読み込み後に作成されるため、プッシュされた関数内のパラメータを取得する必要があります。

ga(function(tracker) {
  var defaultPage = tracker.get('page');
});

この例では、関数で tracker という名前のパラメータを使用しています。ライブラリの読み込みが完了すると関数が実行され、tracker の値が、最初の create コマンドの結果として作成されたデフォルトのトラッキングオブジェクトとなります。tracker はその後、デフォルトのページの値を取得するために使用されます。

SSL の使用（HTTPS）

デフォルトでは、Google アナリティクスによって外部リクエストの送信時にホストページのプロトコルのマッチングが行われます。セキュリティで保護されていないページ（HTTP）からの送信も含め、常に SSL を使用して Google アナリティクスのデータを送信するには、以下のように forceSSL フィールドを true に設定します。

ga('create', 'UA-XXXX-Y', 'auto');
ga('set', 'forceSSL', true);        // Send all data using SSL, even from insecure (HTTP) pages.
ga('send', 'pageview');

複数のトラッキングオブジェクトの処理

単一のページから複数のウェブプロパティにデータを送信したい場合もあります。これは、複数の所有者が各セクションを管理し、各所有者がそれぞれのウェブプロパティを確認しているサイトに対して有効です。

これを行うためには、以下のように、データを送信する各ウェブプロパティでトラッキングオブジェクトを作成します。

ga('create', 'UA-XXXX-Y', 'auto');
ga('create', 'UA-12345-6', 'auto', {'name': 'newTracker'});  // New tracker.

これを実行すると、2 つのトラッキングオブジェクトが作成されます。最初のトラッカーは、名前のないデフォルトのトラッキングオブジェクトとなります。2 つ目のトラッカーの名前は newTracker となります。

両方のトラッカーを使用してページビューを送信するには、トラッカーの名前をコマンドの先頭に追加し、直後にピリオドを付けます。たとえば以下のようになります。

ga('send', 'pageview');
ga('newTracker.send', 'pageview'); // Send page view for new tracker.

これにより、デフォルトと新規の両方のトラッカーにページビューが送信されます。

関数内のトラッカーオブジェクトに名前でアクセスするには、getByName メソッドを使用します。

ga(function() {
  var newTracker = ga.getByName('newTracker');
});

設定されたすべてのトラッカーの配列を取得するには、getAll メソッドを使用します。

ga(function() {
  var allTrackers = ga.getAll();
});

拡張リンクのアトリビューション

拡張リンクのアトリビューションを利用すると、リンク要素 ID により、同じ URL を参照する単一ページ上の複数のリンクを自動的に区別できるため、ページ解析レポートの精度を高めることができます。

拡張リンクのアトリビューションを利用する手順は以下のとおりです。

Google アナリティクスアカウントの [アナリティクス設定] で、拡張リンクのアトリビューションを有効にします。
各ページのコードを次のように書き換えて、拡張リンクのアトリビューションプラグインを読み込みます。

ga('create', 'UA-XXXX-Y', 'auto');
ga('require', 'linkid');   // Load the plug-in. Note: this call will block until the plug-in is loaded.
ga('send', 'pageview');

拡張リンクのアトリビューションの設定変更

拡張リンクのアトリビューションプラグインでは、リンクや親要素、Cookie の要素 ID によって、同じ URL を参照する複数のリンクを区別します。このプラグインでは、プラグインの読み込み時に設定オプションを利用することで、要素 ID の検索や Cookie の動作の度合いを状況に合わせて変更することができます。

ga('create', 'UA-XXXX-Y', 'auto');
ga('require', 'linkid', {
           'cookieName': '_ela',        // Cookie name. _gali by default.
           'duration': 45,              // Cookie duration. 30 seconds by default.
           'levels': 5});               // Max DOM levels from link to look for element ID. 3 by default.
ga('send', 'pageview');

IP 匿名化

場合によっては、Google アナリティクスに送信されるヒット（http リクエスト）の IP アドレスを匿名化する必要があります。ページから（トラッカーオブジェクトの有効時に）送信されるヒットの IP アドレスは、set コマンドを使用し、anonymizeIp フィールドを true に設定すればすべて匿名化することができます。

ga('set', 'anonymizeIp', true);

個々のヒットの IP アドレスを匿名化する場合は、以下のように、ヒットのオプションの設定オブジェクトで anonymizeIp フィールドを設定します。

ga('send', 'pageview', {
  'anonymizeIp': true
});

IP 匿名化の仕組みの詳細については、Google アナリティクスでの IP の匿名化に関するヘルプセンター記事をご覧ください。

ユーザーオプトアウト

JavaScript スニペットを削除せずに、ページ上の Google アナリティクストラッキングコードを無効にすることが必要な場合があります。たとえば、ユーザーが Google アナリティクスによるトラッキングが行われないように選択できる記載がサイトのプライバシーポリシーにある場合などです。

analytics.js ライブラリにはウィンドウプロパティが含まれており、このプロパティを true に設定すると、analytics.js による Google アナリティクスへのデータ送信が無効になります。Google アナリティクスでは、Cookie の設定や Google アナリティクスのサーバーへのデータ送信時に、このプロパティが true に設定されているかどうかがチェックされます。true の場合は、ブラウザに Google アナリティクスのオプトアウトプラグインがインストールされている場合と同じ処理が行われます。

トラッキングを無効にするには、以下のようにウィンドウプロパティを true に設定します。

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

値 UA-XXXX-Y は、トラッキングを無効にするウェブプロパティ ID となります。

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

例

ユーザー用のオプトアウト機能を実装するためのコードについて、以下で簡単な例を紹介します。

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

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

続いて以下のコードスニペットを、analytics.js のコードスニペットの前に追加します。gaProperty の値は、UA-XXXX-Y からサイト上のプロパティに置き換えてください。create コマンドに渡すものと同じ値にします。

<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 によるデータ収集も無効になります。

デバッグ

次のように、analytics_debug.js を使用して、デバッグ済みの analytics.js を有効にすることができます。

(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_debug.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

analytics_debug.js は長すぎて google-analytics.com でのヒットに時間がかかるため、一時的な使用に留めるか、開発段階でのみ使用してください。

トレースのデバッグ

トレースのデバッグにより、より詳細な情報をコンソールに出力できます。トレースのデバッグを有効にするには、https://www.google-analytics.com/analytics_debug.js を使用して、次のコード行をスニペットの前に追加します。

window.ga_debug = {trace: true};