開発者のための Google アナリティクス マスターガイド 第1回 (森田怜依) Google アナリティクス と Google タグマネージャでWebサイト計測を始めよう!

%e6%a3%ae%e7%94%b0%e3%81%95%e3%82%93%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81

マーケッター向けに語られることが多い Google アナリティクス。本連載では開発者の方に向けて Google アナリティクス と Google タグマネージャの使い方を、基本から単なるページビュー計測にとどまらない利用方法までご紹介します。第1回では Google アナリティクス と Google タグマネージャの始め方を解説します。

対象読者

  • JavaScriptを利用したウェブページを作ったことのある方
  • Google アナリティクス や Google タグマネージャについて基礎から学びたい方

Google アナリティクス とは

Google アナリティクス とは、マーケティングに役立つ機能のそろったプラットフォームです。主要な機能の一つとして、ウェブサイトやアプリのページビュー数やセッション数の計測が挙げられます。無料で簡単に計測を行えることから世界中で人気のツールです。

Google アナリティクス は、ウェブサイト計測以外にも、広告関連のツールであるAdWordsやAdSense、Google 検索と関連の深いSearch Consoleなどと連携する機能があり、さまざまなデータを統合してマーケティングに利用できるようになっています。

関連ツール
関連ツール

Google アナリティクス には、有料版である Google アナリティクス 360 という製品もありますが、こちらはいわば大企業向けの製品であり、無料でも十分な機能を利用することが可能です。無料版との比較表をご覧ください。

本連載では、Google アナリティクス の数ある機能の中から、ウェブサイトの計測に焦点をあて、簡単に正しい計測を行えるようご紹介していきます。

Google アナリティクス の計測の仕組み

Google アナリティクス によるウェブサイト計測は、ページに置いたJavaScriptのコードを実行することで行われます。

ページを表示するとトラッキングコード(計測を行うJavaScriptのコード)が実行され、Google アナリティクス のサーバにページのURLやユーザーの情報が送信されます。

今回はページビューを計測するためのトラッキングコードの設定の仕方をご紹介します。

なお、より詳細な計測の仕組みについては次回以降に解説する予定です。

従来のアナリティクスとユニバーサルアナリティクスとは

Google アナリティクス は、2014年に、従来の Google アナリティクス に新機能を追加した「ユニバーサルアナリティクス」をリリースしました。それ以来、古いバージョンの Google アナリティクス を指して「従来のアナリティクス」または「クラシックアナリティクス」というような呼び方がされています。

実は「クラシックアナリティクス」という呼び方は正式名称ではありません。広く知られた通称ではありますが、公式のヘルプでは「従来のアナリティクス」のような表現がされています。そこで本連載も「従来のアナリティクス」という表現で統一します。

従来のアナリティクスとユニバーサルアナリティクスでは、トラッキングコードを実行するためのJavaScriptライブラリが異なります。

バージョンごとのJavaScriptライブラリの違い

バージョン JavaScriptライブラリ
従来のアナリティクス ga.js
dc.js(広告向け機能を利用する場合に使用、トラッキングコードの書き方はga.jsと同じ)
ユニバーサルアナリティクス analytics.js

ga.jsのトラッキングコード例

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_trackPageview']);

analytics.jsのトラッキングコード例

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

本連載ではユニバーサルアナリティクスを利用することを前提に説明します。

従来のアナリティクスとユニバーサルアナリティクスのより詳細な違いや、ユニバーサルアナリティクスへのアップグレード方法については、連載の別の回で解説を予定しています。

Google タグマネージャとは

Google タグマネージャはタグ管理システムです。Google アナリティクス のトラッキング、AdWordsのリマーケティングタグ[1]など、マーケティング関連の計測をタグで管理・配信することが主な利用方法です。トラッキングコードをHTMLに記載しなくとも、Google タグマネージャの設定画面から計測設定することが可能です。

  • [1] リマーケティングとは、ウェブサイトにアクセスしたことのある人に対して広告を出す機能のことです。リマーケティングタグはウェブサイトにアクセスした人であるという記録を残すために設置します。

Google タグマネージャを介して Google アナリティクス を計測する利点は、トラッキングコードが簡単に設定できることです。トラッキングコードはJavaScriptのため、知識のない方がカスタマイズするのは少し難しいと言えるでしょう。タグマネージャでは、画像のようにテンプレートを利用して、入力欄に必要事項を入力するだけで計測設定ができます。

タグマネージャサンプル
タグマネージャサンプル

Google タグマネージャを利用する利点をもう1つ挙げると、なんといってもGoogle タグマネージャさえ入っていればページ、つまりHTMLファイルやJavaScriptファイルの修正が不要なところです。

例えば、Google アナリティクス のトラッキングコードを、HTMLファイルに直接記載していたとしましょう。その後新たにリンクのクリックイベントを計測したくなった場合、リンクのonclickでトラッキングコードを実行するよう、HTMLファイルを修正しなければなりません。

ところが、Google アナリティクス の代わりに、Google タグマネージャのスニペットをHTMLファイルに記載し、Google タグマネージャで Google アナリティクス の計測設定をしていたとします。この場合、新たにリンククリックを計測したくなってもHTMLファイルの修正は不要です。設定画面から、簡単に、<a>タグのidやclassなどを条件にクリックを計測することができます。

Google タグマネージャの仕組み

Google タグマネージャを使う際は、設定画面で「ある条件のときこのコードを実行する」という設定を行います。例えば「ドメインがexample.comのとき、Google アナリティクス のページビューのコードを実行する」といった設定です。実行したいコードとして設定したものはタグとして管理されます。例えば「Google アナリティクス ページビュータグ」のように呼ばれます。

この設定を公開すると、タグマネージャはこの設定の通り動作するJavaScriptのコードを生成します。そしてページに置かれたタグマネージャのスニペットがこのJavaScriptコードを読み込むことで、設定した内容が実現されます。

タグマネージャの仕組み
タグマネージャの仕組み

Google タグマネージャは必要か

Google アナリティクス の計測を最初に設定する場合、以下のどちらかの方法を選択することになります。

  1. ページに直接トラッキングコードを記載する
  2. Google タグマネージャ経由でトラッキングを設定する

先に記載した通り、簡単に計測設定が行える点、そしてページの修正が不要という点から、2の Google タグマネージャ経由での計測がおすすめです。

タグマネージャを利用することで何かできなくなることはほとんどありません。

テンプレートを利用すると通常のJavaScriptコードならば実行できたことができなくなることはありますが、テンプレートの利用をやめ、タグマネージャ経由でJavaScriptコードを好きに動かすことも可能です。

しかし、タグマネージャは非同期で読み込まれるため、実行順序に配慮が必要になることがあります。そのためかえって実装が複雑になることも全くないわけではありません。

本連載で計測の設定方法をご紹介する際は、1と2どちらにも対応できるよう両パターンの設定方法を紹介します。

Google アナリティクス の準備

Google アナリティクス へのアクセス

それでは Google アナリティクス を利用し始めるため準備をしましょう。まず、Google アナリティクス のサイトへアクセスしてください。

執筆時点(2016年6月11日)では、以下のような画面が表示されます。

アナリティクストップ
アナリティクストップ

ブラウザの言語設定が日本語になっていない場合は、もしかすると日本語ではないページが表示されるかもしれません。言語はページ右下にあるプルダウンから変更できます。

今後作業を進めていく中で望んだ言語で表示されないページがあった場合は、以下を試してください。すべてのページではありませんが、多くの場合これで言語を変更できます。

  1. ページ内にある言語選択プルダウンから選択
    • プルダウンがないページもあります
  2. 各サービスのユーザー設定から言語を選択
  3. URLのクエリパラメータに”hl=言語”を付与
    • 日本語にしたい場合は「?hl=ja」, 英語にしたい場合は「?hl=en」
    • Google の提供するさまざまなページでこのパラメータは有効です

それでは、右上の[アカウントを作成]を選択します。

まずは Google アカウントでのログインを求められますので、ログインするか、Google アカウントを作成してください。その後、画面の案内に従って進めてください。

トラッキングIDを取得

進めていくと、新しい Google アナリティクス アカウントの作成画面になります。

GAアカウント作成
GAアカウント作成

ウェブサイトの計測を行う場合は、トラッキングの対象として[ウェブサイト]を選択したうえで各項目を入力・選択します。

GAアカウント作成での入力・選択項目

項目 補足
アカウント名 会社名を記入するのが一般的です
ウェブサイト名 ウェブサイトの名前を入力してください
ウェブサイトのURL プロトコルを選択し、ドメインを記入してください
ディレクトリは不要です
例:ウェブサイトが http://example.com/mysite/ だった場合、「example.com」と入力
業種 ウェブサイトのジャンルに近いものを選択してください
レポートのタイムゾーン タイムゾーンを選択してください
データ共有設定 詳しくはこちらのヘルプ記事をご覧ください
どの項目もオンにすることが推奨ですが、特にベンチマークについてはベンチマークレポートを見るために必要なため設定をおすすめします

上記の項目はすべて後から変更することができます。

入力して画面の案内に従って進むと、トラッキングID(UA-XXXXXXXX-1)が書かれたページへ遷移します。

トラッキングIDの取得
トラッキングIDの取得

これでトラッキングIDの取得が完了しました。

2つ目以降のトラッキングIDを取得するには

新しいトラッキングIDを取得するには、新しいプロパティが必要です。

今あるアカウントの下に新しいプロパティを作成するか、アカウントごと新しいものを用意することになります。

アナリティクス設定の画面を見ると、先ほど[アカウント名]として入力したものが「アカウント」、[ウェブサイト名]として入力したものが「プロパティ」と表示されています。

[アカウント]を選択すると新しいアカウントを、[プロパティ]を選択すると新しいプロパティを作成する選択肢が表示されます。そこから画面の案内に従って2つ目以降を作成してください。

プロパティを追加
プロパティを追加

Google タグマネージャの準備

Google タグマネージャへのアクセスとスニペットの取得

Google タグマネージャを準備するには、まず「Google タグマネージャ」を開きます。

今までに Google タグマネージャを使ったことがない方であれば、Google タグマネージャアカウントの作成画面になります。

GTMアカウント作成
GTMアカウント作成

GTMアカウント作成での入力・選択項目

項目 補足
アカウント名 会社名を記入するのが一般的です
Google や他の人と匿名でデータを共有 お好みでチェックしてください
コンテナ名 ウェブサイトの名前やURLを記入するのが一般的です

上記の項目はすべてあとから変更することができます。

ウェブサイトへ導入する場合は、[コンテナの使用場所]として[ウェブ]を選択し、作成します。

画面の案内に従って進めると、タグマネージャのスニペットが表示されます。このスニペットは今コピーしてもいいですし、あとから参照することもできます。

これでタグマネージャを使用する準備が整いました。

2つ目以降のスニペットを取得するには

新しいスニペットを取得するには、新しいコンテナが必要です。

今あるアカウントの下に新しいコンテナを作成するか、アカウントごと新しいものを用意することになります。

Google アナリティクス と同様に、管理の画面に行くと先ほど作成したアカウントとコンテナの名前が表示されています。それぞれ選択すると新しいアカウントまたはコンテナを作成する選択肢が表示されます。

コンテナを追加1
コンテナを追加1

もう1つ方法があります。アカウント一覧の画面へ移動してください。[アカウントを作成]というリンクからアカウントを作成することができます。

コンテナを作成する場合は、アカウントの右側にあるメニューより[コンテナを作成]を選択してください

コンテナを追加2
コンテナを追加2

ページビューの計測方法

Google アナリティクス では、Google アナリティクス サーバーへ送る個々の計測データを「ヒット」と呼びます。ヒットは大抵の場合、ユーザーの一つひとつの行動を表します。

ここでは基本的なヒットである、ページビューの計測方法をご紹介します。

ページビューの計測を試すため、まずはテスト用のページであるHTMLファイルを用意してください。

A. ページにトラッキングコードを記載する場合

先ほどトラッキングIDが表示されていたページへ遷移しましょう。[アナリティクス設定]>[プロパティ]の下、[トラッキング情報]>[トラッキングコード]がそのページです。ここにトラッキングコードが記載されていますのでコピーしてください。以下のようなコードです。

トラッキングコード

<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-XXXXXXXX-Y', 'auto');
  ga('send', 'pageview');

</script>

これを、ページビューを計測したいページの</head>の前に挿入してください。これでページビュー計測の設定は完了です。

B. Google タグマネージャを利用する場合

先ほど取得したスニペットをコピーしてください。スニペットは[管理]>[コンテナ]の下、[Google タグマネージャをインストール]からコピーすることが可能です。以下のようなコードです。

Google タグマネージャ

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

これを、ページビューを計測したいページの<body>直後に挿入します。これでページへの Google タグマネージャの導入は完了です。

次に、Google タグマネージャの画面からページビューの設定を行います。コンテナの設定画面へ移動してください。

コンテナ設定画面
コンテナ設定画面

左メニューより[タグ]を選択し、[新規]を押してください。

タグ一覧
タグ一覧

ページビュー計測用のタグを作成するため、名前入力欄には「ページビュー」などわかりやすい名前を付けます。プロダクトは Google Analytics を選択してください。その後、「ユニバーサルアナリティクス」か「従来の Google アナリティクス」かを聞かれますが、新しくウェブサイトを計測する場合はユニバーサルアナリティクスを選択してください。

ここまで進めると以下のような画面になります。

新しいタグ
新しいタグ

設定中のタグはそのまま置いておき、Google アナリティクス のトラッキングIDが表示されていたページへ遷移しましょう。そこに記載されている「UA-XXXXXXXX-Y」をコピーしてください。

トラッキングIDはトラッキングコードのページ以外に、プロパティ設定やアカウント一覧からも確認できます。

プロパティ設定
プロパティ設定

アカウント一覧
アカウント一覧

コピーしたトラッキングコードを、作成途中のタグの[トラッキング ID]の欄に入力します。

[ディスプレイ広告向け機能を有効にする]は今はチェックを入れる必要はありません。これを利用すると特別なレポートを利用することができますが、利用するためにはウェブサイトに注意書きが必要です。詳細はまた別の回でご紹介します。

[トラッキング タイプ]はページビューを選択し、[続行]を押してください。

最後に配信するタイミングとして[すべてのページ]を選択してタグを作成します。

ページビュータグ
ページビュータグ

これでタグの設定はおわりですが、この設定はまだ編集中という扱いで、実際に動作させるためには公開する必要があります。

Google タグマネージャを公開すると、Google タグマネージャを導入しているすべてのページに設定が反映されます。タグの設定が間違っていた場合や Google タグマネージャと相性のよくないページだった場合、ページ本来の表示や機能に影響を与えてしまうことがあります。公開前は必ずプレビューを行ってください。プレビューの使用方法は別の回でご紹介する予定です。

今回はテスト用のページに導入したと想定してプレビューせずにすぐに公開します。右上、[公開]ボタンより[今すぐ公開]を押してください。

これで Google タグマネージャを利用したページビューの計測設定は完了です。

計測を開始する

ローカルのHTMLファイルをそのままブラウザで表示しても計測はできません。ローカルサーバへ置くなどして計測確認の準備をしてください。

サーバにHTMLファイルを置いたら、まずは Google アナリティクス の「リアルタイムレポート」の画面を開いてください。[レポート]>[リアルタイム]>[サマリー レポート]です。

そしてサーバに置いたHTMLファイルを表示してみてください。以下のように自分の見たタイミングでレポートに反映されたら、計測ができています。

リアルタイムレポート
リアルタイムレポート

ドメインがlocalhostの場合、うまく計測できないことがあります。localhostでも計測できるようにする設定がありますが、今回はその設定方法については省略します。localhostでうまく計測できなかったら127.0.0.1、またはhostsで適宜ドメインを設定して計測確認を行ってください。

計測確認はできたでしょうか。できていれば、もう準備は万端です。HTMLファイルを本番サーバーへ置けば実際のウェブサイトのページビューが計測されるようになります。

全ページのページビューを計測するには全ページにトラッキングコードまたはタグマネージャのスニペットを置いてください。もちろん、SSIを利用して全ページに配置しても問題ありません。

おわりに

Google アナリティクス や Google タグマネージャの基本的な仕組みと、ページビューの計測設定は理解できたでしょうか。

見てきた通り、ページビューを計測するだけであれば、コピー&ペーストすればよく特に難しい設定は必要ありません。そしてページビュー以外のものを計測する際も、大体の場合は特に難しい設定なく計測できます。この簡単さが Google アナリティクス の良い所です。

ところが簡単だからといってよく理解せずに使用していると失敗してしまうツールでもあります。

Google アナリティクス や Google タグマネージャに新しい設定を入れたら異常なほどセッションが増えた、逆に急激にセッションが減った、といった計測上の失敗。ページが表示されなくなった、などのページ自体の機能を損なう失敗。直帰率が改善した! と思ったら設定上そう見えるだけだった、という数値の意味の読み間違いによる失敗。

こういった失敗は非常に多く、間違えたことに気付けないまま長い時間過ごしてしまうことも少なくありません。

Google アナリティクス を正しく理解して計測設定を行えるよう、次回以降も解説を行っていきます。ぜひいろんな計測をしてみて、ご自身のウェブサイトに対する理解を深めて改善していってみましょう。

森田怜依

執筆者 森田怜依

ウェブアプリやスマートフォンアプリの開発実績を活かした、Google アナリティクス とその他のシステムを組み合わせた活用方法の促進、Google アナリティクス 360 の導入・サポートを行っています。

本稿は、開発者のための実装系WebマガジンCodezineにて連載中です。

お問い合わせ

当社のサービス・製品に関するご相談やご質問、お見積りのご依頼など、こちらからお問い合わせください。