サイトに analytics.js を追加する

analytics.js ライブラリ(別名: Google アナリティクス タグ)は、ユーザーとウェブサイトの接点を測定する JavaScript ライブラリです。このドキュメントでは、サイトに Google アナリティクス タグを追加する方法について説明します。

Google アナリティクス タグ

Google アナリティクス タグは <head> タグの先頭付近で、他のスクリプトや CSS タグの前に追加してください。また、測定対象の Google アナリティクス プロパティのプロパティ ID も追加します。

<!-- Google Analytics -->
<script>
(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上のコードで行われる主な処理は次の 4 つです。

  1. analytics.js JavaScript ライブラリを https://www.google-analytics.com/analytics.js から非同期的にダウンロードする <script> 要素を作成します。
  2. グローバル ga 関数(ga() コマンドキュー)を初期化します。analytics.js ライブラリが読み込まれ、準備が完了した段階でコマンドが実行されるようスケジュール設定できます。
  3. 'GA_MEASUREMENT_ID' パラメータで指定したプロパティに新しいトラッカー オブジェクトを作成するコマンドを ga() コマンドキューに追加します。
  4. 現在のページのページビューを Google アナリティクスに送信する別のコマンドを ga() コマンドキューに追加します。

実装をカスタマイズする場合は、Google アナリティクス タグの最後の 2 行(create コマンドと send コマンド)を変更するか、より多くの接点をキャプチャするためにコードを追加することが必要になる場合があります。ただし、analytics.js ライブラリを読み込むコード、または ga() コマンドキュー関数を初期化するコードは変更しないでください。

代替の非同期タグ

上記の Google アナリティクス タグにより、すべてのブラウザでスクリプトが確実に読み込まれ、非同期的に実行されますが、最新のブラウザでは、スクリプトをプリロードできないという欠点があります。

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

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

Google アナリティクス タグで取得されるデータ

上記のいずれかのタグをウェブサイトに追加する際は、ユーザーが訪問する各ページでページビューを送信します。このデータは Google アナリティクスで処理され、次のような多数のデータを推定できます。

  • ユーザーがサイトに滞在した合計時間
  • 各ページでのユーザーの滞在時間および訪問したページの順番
  • クリックされた内部リンク(次のページビューの URL に基づく)

また、新しいトラッカーを作成する際に analytics.js によって確認される IP アドレス、ユーザー エージェント文字列、最初のページは、次のようなデータを取得するために使用されます。

  • ユーザーの地理的な位置
  • 使用されているブラウザとオペレーティング システム
  • 画面サイズ、Flash や Java のインストール有無
  • 参照元サイト

次のステップ

基本的なレポートであれば、Google アナリティクス タグで収集されるデータで十分ですが、ユーザーに関する追加の情報が必要になる状況も数多くあります。

このサイトのガイドでは、analytics.js を使用して対象となる接点を測定する方法を説明していますが、いずれかの機能を実装する際は、事前に左側のナビゲーションの「基本」で示されているガイドを確認することをおすすめします。各ガイドには、analytics.js ライブラリの概要が説明されており、サイト内で使用されているコードサンプルをより深く理解するために活用できます。

このシリーズの次のガイドでは、analytics.js の仕組みを説明します。