Google アナリティクスは無料で利用できるアクセス解析ツールです。
これを活用することで、Webサイトに訪れたユーザーの「アクセス経路」「滞在時間」などデータを分析することができます。

このように、とても便利なツールですが、初心者の方がこれを導入するには、少しレベルが高いように思います。
そこで今回は、Google アナリティクスの導入手順やトラッキングコードの設置方法についてご紹介していきます。

Google アナリティクスのトラッキングコードって何?

トラッキングコードとは、Google アナリティクスでWebサイトのアクセス解析を行う為に必要な計測コードのことです。
このコードをWebサイトに設置することで、ユーザーのページ遷移・滞在時間などを分析することができます。

このように、トラッキングコードをWebサイトへ設置することでGoogle アナリティクス上でユーザーの特性を分析し、自サイトの改善に役立てることができます。

トラッキングコードの種類

Google アナリティクスのトラッキングコードは、5種類あります。
何種類もあるのは、時代とともにトラッキングコードのバージョンが更新され続けてきたからです。

古いトラッキングコードはGoogleがサポートを終了していたり、分析できる機能に制限がある為、なるべく最新のものを設置する方が良いかと思います。

また、Google Tag Managerのトラッキングコードをサイト内へ設置することで、Google アナリティクスを管理することもできます。

※「Google Tag Manager」とは、Google アナリティクスや、AdWordsに使われるタグを1つのタグで一元管理できるツールです。
引用元:「ウェブサイトタグ管理のメリット-Google タグマネージャー」

urchin.js

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-xxxxxx-x";
urchinTracker();
</script>

urchin.jsは、Googleが2005年に提供を開始し、Google アナリティクスの一番最初のトラッキングコードになります。
2012年にGoogleがサポートの終了をしています。

引用元:アナリティクス 日本版 公式ブログ: Urchin の時代の終わりに

ga.js トラッキングコード(同期)

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>

ga.js(同期)は、「urchin.js」の次にGoogleによって2007年に提供が始まりました。

引用元:[グラフの複数データ表示機能]と[新しいトラッキングコード用の JavaScript ] をリリースしました

ga.js トラッキングコード(非同期)

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-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>

ga.js(非同期)は、2009年12月に提供が始まりました。
ga.js(同期)よりも「Webサイトの読み込み時間の短縮」「Javascriptを読み込む時のエラーの回避」などが改善されより正確に計測できるようになったことが特徴です。

引用元:Google Analyticsが非同期追跡を開始

ユニバーサルアナリティクス(analytics.js)

<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x', 'auto');
ga('send', 'pageview');
</script>

ユニバーサルアナリティクス(analytics.js)は、2014年にサービスの提供が開始されました。
ga.jsとの大きな違いは、クロスドメイントラッキングの設定が可能になり「User ID」を使って、各ユーザーのデータを収集できるようになりました。

現在もこのコードで利用することができますが、別プロパティのタグが並列で記述されていると二重計測になるので気をつけましょう。

※User IDとは、1人のユーザーが複数のデバイスを利用してサイトに訪問した場合、これらを1人のユーザーとしてカウントできる機能です

引用元:User-ID 機能について – アナリティクス ヘルプ

グローバルサイトタグ(gtag.js)

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-1');
</script>

グローバルサイトタグ(gtag.js)は最新の計測タグで、2017年8月以降に発行されたトラッキングコードです。
Google アナリティクスとGoogle広告などで使われる複数のタグを一括で設定できるようになりました。
ユニバーサルアナリティクス(analytics.js)とは違い、別プロパティのタグが並列で記述されていても二重計測されません。

Google Tag タグマネージャ

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

上記のトラッキングコードをサイト内に設置することで、Google タグマネージャでGoogle アナリティクスを管理することができます。
Google タグマネージャで管理するメリットとしては、様々なタグを設定できる点です。

これらを設定することで、Google アナリティクス上で計測したいデータをGoogle タグマネージャ上でカスタマイズすることができ、ユーザーのアクセス情報をより詳細に分析することができます。

※タグとは、トラッキングコードや関連するコードの総称のことを言います。

引用元:「タグ マネージャーの概要|タグマネージャスヘルプ」

トラッキングコードの取得から設置までの流れ

トラッキングコードの取得からWebサイトに設置するまでには、以下の3つの手順が必要になります。
もしも、下記の手順の中に既にお済のものがあれば、それを抜かして読み進めて良いかと思います。

  1. Google アカウントの取得
  2. Google アナリティクスにサイトを登録する
  3. トラッキングコードの設置

Google アカウントの取得

Google アカウントの作成

Google アカウント作成

まずは、Google アカウントの作成を行いましょう。

Google アナリティクスにサイトを登録する

Google アナリティクスにサイトを登録する

Google アナリティクス ログイン

Google アカウントの作成後、Google アナリティクスにログインしサイトの登録作業をします。
[無料で設定]ボタンをクリックしましょう。

アカウント名の入力

[無料で設定]ボタンのクリック後、[新しいアカウント]作成画面に移行するので、上記画像の赤枠部分に項目を入力し、[次へ]ボタンをクリックします。

測定対象の選択

次は、測定をしたい対象を選びます。
[ウェブ][Apps][アプリとウェブ]のどれかを選択し、[次へ]ボタンをクリックします。

アカウントの作成

[ウェブサイトの名前][ウェブサイトのURL]-][業種][レポートのタイムゾーン]それぞれの項目を入力し、[次へ]ボタンをクリックします。

「レポートのタイムゾーン」の項目は、デフォルトがアメリカになっているので、「日本」にします。

Google アナリティクスの利用規約

最後に[Google アナリティクスの利用規約]表示されます。
デフォルトがアメリカの設定になっているので、「日本」に変更し利用規約の内容を一通り確認したら、[同意する]をクリックします。

以上が、Google アナリティクスにサイトを登録する手順になります。

トラッキングコードの設置

トラッキングコード取得

サイトの登録後、Google アナリティクスにログインし、左画面の[管理][トラッキング情報]をクリックします。

トラッキングコードの設置

上記画像の赤枠内のグローバル サイトタグが表示されているので、これをコピーして、HTMLのheadタグの直後に貼りましょう。
トラッキングコードが設置されていないページがあると、データが正確に計測されない為、貼り忘れのないようにしましょう。

トラッキングコードが正しく設置されたか確認

トラッキングコードを対象のWebサイト設置後、正しく計測されているかは必ず確認しましょう。
正しく設置されていないまま放置し、後日Google アナリティクスで確認したら集計データが確認できないということが起きるかもしれません。

確認方法は複数ありますが、今回は「リアルタイムレポート」「ステータス」で確認する方法をご紹介します。

リアルタイムレポートからの確認

「リアルタイムレポート」とは、Webサイトに訪問したユーザーがどのページを訪れているのかなど、ユーザーの動向をリアルタイムで確認できる機能です。

この機能でアクティブユーザーがGoogle アナリティクス上でリアルタイムで計測されているかを確認しましょう。

アクティブユーザーがリアルタイムで計測されていれば、正しくトラッキングコードが設置されていると判断して良いかと思います。
リアルタイムレポートの確認方法は、以下になります。

※アクティブユーザーとは、ある期間内にWebサイトを訪れたユーザーを指します。

引用元:アクティブ ユーザー – アナリティクス ヘルプ

リアルタイムレポートの確認方法

Google アナリティクスの左メニュー[リアルタイム][概要]をクリックします。

現在のアクティブユーザー数を確認

現在のアクティブユーザーの数がリアルタイムで集計されてれば、トラッキングコードが正しく設定されていると言えます。

このように、リアルタイムレポートを活用することで、設定がうまくいってるかを簡単に確認できるのでぜひ活用しましょう。

ステータスからの確認

Google アナリティクスの「ステータス」から計測タグが実装されているかを確認する方法もあります。

ステータスからの確認方法

左メニューの[管理][トラッキング情報][トラッキングコード]をクリックします。

過去48 時間にトラフィック データを受信しています。」と表示

ステータス画面の赤枠部分に「過去48 時間にトラフィック データを受信しています。」と表示されていれば、トラッキングコードが正しく設定がされている状態です。

「過去48時間に受信したデータはありません。」と表示

一方で、「過去48時間に受信したデータはありません。」と表示された場合は、その下にある「テストトラフィックを送信」ボタンをクリックしましょう。

別ウインドの表示

ボタンをクリックすると、上記画像のような別ウインドが表示されます。
別ウインドが開かれるのは、対象サイトがGoogle アナリティクス上で正常に集計されているかを確認するためです。

「1現在のアクティブユーザーです。」の表示
「テストトラフィックを送信」ボタンをクリック後、「1現在のアクティブユーザーです。」と表示されれば、トラッキングコードが正常に設定されていると判断して良いかと思います。

ここで注意したいのが、ブラウザにGoogle アナリティクスオプトアウトアドオンのような自身のアクセスを除外するアドオンがインストールされている場合です。

もしも、インストールされている場合は、「テストトラフィックを送信」をクリックしても「過去48時間に受信したデータはありません。」という表示のままです。
その為、このような場合は「シークレットモード」のブラウザで確認することをおすすめします。

それでも「過去48時間に受信したデータはありません。」という表示のままの状態であれば、再度トラッキングコードが正しく設定されているかを確認しましょう。

まとめ

このように、Google アナリティクスの導入手順やトラッキングコードの設置方法について紹介しました。
導入手順を見て分かるように、設定自体はとても簡単です。

その為、Google アナリティクスの活用を検討している方は、気軽に設定して導入してはいかがでしょうか。

関連記事