Googleアナリティクス基礎:トラッキングコードの設置

トラッキングコード

こんにちは。Webアナリストのカグア!です。今日は、Googleアナリティクスの基本であるトラッキングコードについて解説します。

なお、本記事は2015年6月時点での記事や公式ヘルプを参考にしています。ある程度網羅しているつもりですが、より詳しい設置を知りたい方は記事末の書籍をどうぞです。

追記:2017年12月5日 外部ファイル化について追記しました。gtag.jsでは外部ファイル化は難しいはず。
追記:2015年10月13日 関連リンクを加筆しました。

関連記事
>><完全版>Googleアナリティクスで自分や関係者のアクセス除外
>>イベントトラッキングの設定、ユニバーサル・タグマネージャ対応2015
>>カスタムディメンションの設定~UA・GTM対応<2015年完全版>
>>GoogleアナリティクスAPI、トラッキングコード開発まとめ最新43選
>>タグマネージャのGoogleアナリティクスで設定可能なフィールド一覧
>>Googleアナリティクス活用:拡張eコマースの設定とトラッキングコードをEC-CUBEで実装
>>Googleアナリティクスでリアルタイムに出るがレポートに出ないの対応

Googleアナリティクスのトラッキングコードとは

トラッキングコード

Googleアナリティクスは、Webページのアクセスを記録するツールです。2015年6月現在ではアプリなども計測できるようになりましたが、もともとはホームページの解析ツールとして、Googleに買収されて今にいたります。

わたしたちがホームページにアクセスしますと、そのページ内に組み込んだGoogleアナリティクスのプログラムが動作し、そのデータをGoogleのサーバーに送信しデータが蓄積され、それを運営者が集計し分析に役立てます。つまり、Googleアナリティクスで分析をするためには、そもそもこのプログラム=トラッキングコードが、ホームページに組み込まれ動作することが重要なのです。

トラッキングコードは、JavaScriptというプログラム言語で書かれています。
ジャバスクリプト

JavaScriptとはホームページを見るためのブラウザというソフト上で動作します。ですから、ブラウザが動くのであれば、パソコンでなくともスマホでもゲーム機でもGoogleアナリティクスのトラッキングコードは動作します。それくらいメジャーなプログラム言語であるJavaScriptを実装していますので、世界中に多くの技術者が存在し、扱える人も多いことが、Googleアナリティクス利用のメリットの一つにもなっています。

なお、Googleアナリティクスの公式ヘルプでは、アプリ計測と区別するために、ホームページにおけるトラッキングコードは、「ウェブ トラッキング コード」と表記されています。ご注意ください。

トラッキングコードの構成

トラッキングコード概念

トラッキングコードは2つの部分から成り立っています。そして、そのうちの1つはさらに設定部分とデータ送信部分とで、さらに2つの構成になっています。

前半部分は、Googleアナリティクスがデータ計測するために必要なさまざまな処理を行い準備をするためのものです。これがうまく動作しませんと、そもそも計測がされないことになります。とはいえ、普及しているブラウザであれば問題無く動作します。動作しないのは、一部のガラケー(フィーチャーフォン)といったJavaScriptが動作しない端末となります。

後半部分は、設定部分とデータ送信部分になりす。

設定部分では、運営者の登録ID(プロパティID)やさまざまな変数など、データ送信に必要な情報を書きます。データ送信部分は、標準ですと、ページのアドレスを自動的に取得してそれを送信する命令が書かれています。

実際には、以下の2行となります。UA-xxxxxxxx-1 には自分自身のわりふられたプロパティIDを書きます。

ga('create', 'UA-xxxxxxxx-1', 'auto');
ga('send', 'pageview');

UA-xxxxxxxx-1 というトラッキング情報をクリエイトしなさい、gaにpageview(ページビュー)データをsend(送信)しなさい、となります。

トラッキングコードを貼り付ける手順

プロパティID

はじめてGoogleアナリティクスを利用するさいでしたら、Googleアナリティクスにログインし、画面の指示にしたがってURLなどを入力していきますと、最後の画面に表示さるプログラムがトラッキングコードです。これをコピーして、ホームページのすべてのページに貼り付ければOKです。

すでに、Googleアナリティクスを利用していて、新たなサイトに貼り付けたいというときは次のようにします。

画面上方の「アナリティクス設定」をクリックし、プロパティ欄(画面中央)のプロパティメニューをクリック。「新しいプロパティを作成」を選びますと、URLなどを入力する画面に切り替わります。それらを入力しますと、その最後にトラッキングコードが表示されます。
コピー

あとは同様にして、それを新しく計測開始するサイトの全ページに貼り付けます。

トラッキングコードは全ページに入れる

全ページにはる

もうお気づきだと思いますが、トラッキングコードは稼働してはじめてデータを送信するわけです。つまり、稼働させる何かのきっかけが必要になります。それが通常ですとページビュー=ページ閲覧 になるわけです。ということは、全てのページにGoogleアナリティクスのトラッキングコードが組み込まれていて、その都度、稼働するようにしておかないといけないわけです。

全てのページに組み込むといっても、基本的には同じ場所に、コピー&貼り付けで十分です。ページごとに中身を変えて貼り付けることはしなくても大丈夫です。また、WordPressなどのブログシステムなどであれば、システム側で1箇所貼り付ければ自動的に全部のページに自動的に貼り付けてくれるので便利です。

トラッキングコードを貼る場所はヘッド内

厳密には、公式ヘルプによりますと、トラッキング コード スニペットというんだそうですw。とにかく、<script>から</script> までの部分をいいます。これをすべてのページに貼るわけですが、場所が重要です。

ホームページはタグと呼ばれる<>で囲われた命令群で作られているのですが、目に見えるページ本文に該当する部分が、~</HEAD> で書かれています。 Googleアナリティクスのトラッキングコードは、この </head> の直前に書くとされています。

>>ウェブ トラッキング コードを設定する – アナリティクス ヘルプ

どこでも動作するが推奨箇所がベター

ただ、実際にはどこにはりつけても動作はします。以前のGoogleアナリティクスのバージョンですと、</BODY> の前ですとか、後述しますGoogleタグマネージャを使った場合ですと、 の直前に貼り付けられない場合は、まずは組み込めることを優先して、場所はあまりこだわらなくても良いかと思います。

googleアナリティクスのトラッキングコードを確認する方法

トラッキングコードを貼り付けたならば、正常に動作しているか確認します。

確認方法はおもに3つ。どちらでも構いませんが、すべてのページでちゃんと動作するかを確認したほうが良いですから、結果的には後述の2つとも行うことになります。

1.アナリティクス設定画面で確認する

トラッキングコード貼付け後、Googleアナリティクスにログインします。画面上方の「アナリティクス設定」をクリックし、プロパティ欄のトラッキング情報>トラッキングコードを選びます。

そこに「ステータス: データを受信しています」と表示されていればOKです。Googleアナリティクスが、登録されたURLにアクセスしコードの有無を自動的に確認してくれています。
ステータス

このメッセージにならないときは、何かしら不備があると思われますので、自身のホームページでトラッキングコードを確認しましょう。

2.リアルタイム解析で確認する

リアルタイム

次に全てのページ(作業がすべて完了していれば主要なページだけでも良いとは思いますが)に、実際にアクセス、その様子をリアルタイムで確認できます「リアルタイム」を使いましょう。

Googleアナリティクスにログインし、画面上方「レポート」をクリックし、画面左のメニューの「リアルタイム」を選びます。リアルタイム解析の画面が表示されます。今この瞬間のアクセス状況が本当にリアルタイムに表示される機能です。

リアルタイムといっても数秒の間隔はあきますが、それでもちゃんと組み込まれていれば、アクセス全てにちゃんと反応してくれるはずです。反応がなければ、該当ページのトラッキングコードを確認してください。

3.デベロッパーツールでビーコンを確認する

デベロッパーツール

Chromeブラウザではデベロッパーツールという便利なモードがあります。キーボードの[F12](MACですとCommand+Option+Iキー)を押下しますと、上図のようなサブ画面がブラウザの下方に表示されます。

そこで、Networkタブをクリックしますと、ブラウザのhttpアクセスによって生じたさまざまなデータ送信が確認できます。そこで、analytics 関連のものだけをフックさせます。Googleアナリティクスのビーコン(データ送信)が見つかれば、トラッキングコードの設置は問題ないと言えます。

トラッキングコードのJavaScriptは実はこのようなデータを、ページ表示の背後で送信しているのです。これはアプリでも同様です。

4.どうしても設置できないときは

ただ、どうしてもリアルタイム解析に反応しないときもあるかもしれません。

基本的には設置者がなんとかしなくてはいけません。Googleアナリティクスはサポートダイヤルなどはありません。制作会社に代行して設置してもらったのであれば業者に問い合わせてみましょう。

また、ある程度の情報を公開しても良いのであればオープンな掲示板を利用するのも良いです。

>>Google アナリティクス ヘルプ フォーラム

Googleが公式に運営しています掲示板です。AdWordsなどではGoogleスタッフも登場するようですが、Googleアナリティクスでは有志の専門家たちが毎日チェックし返信を書いてくれています。日々、新しい質問が投稿されては解決していますので、安心して聞きましょう。トラッキングコード設置の質問も不定期にあるほどポピュラーな悩みですので、気後れせずにどんどん質問するのが良いでしょう。

トラッキングコードを変更したいとき

変えたい

たとえば、前任者がトラッキングコードを設置したが辞めてしまった。そしてログインさえもできなくなってしまった。

そんな場合には、もう諦めてトラッキングコードを変更することになります。さすがに、Googleも個人のプライバシーであるログインパスワードなどは教えてくれませんし、問い合わせる窓口もありません。気持ちを切り替えて、新たにトラッキングコードを変更しましょう。

そのさいは前述のように、新規にGoogleアナリティクスに登録するところからはじめ、「新しいプロパティ(サイト)」を登録し、トラッキングコードを取得してください。そしてそれに差し替えればOKです。Googleアナリティクスのデータはさかのぼって取得することはできませんので、割りきって一刻も早く、トラッキングコードを変更することをおすすめします。

トラッキングコード設置のいろいろなケース

いままでは標準的なトラッキングコード設置の手順を解説してきました。後半では、いろいろなケースや要望ごとに、その設置方法を解説します。

トラッキングコードを複数で設置したい

たとえば、本社と支社とで別々にホームページがあるとします。個々にGoogleアナリティクスを設定していました。しかし、その後、すべてのページビューを合算して見てみたい、といった要望があったとします。

そういうときには、あらたにトラッキングコードを取得し、もともとあるトラッキングコードに別途追加して、複数の計測を走らせると良いです。マルチトラッキングといいます。

ga('create', 'UA-xxxxxxx-1', 'auto');
ga('create', 'UA-xxxxxxx-2', 'auto', {'name': 'b'});
ga('send', 'pageview');
ga('b.send', 'pageview');

Googleアナリティクスではトラッカーという計測用の専用のプログラム部品を作っています。それを、上記のようにnew(作成)したうえで、pageview の命令も追加します。そのとき、b.send というように追加したトラッカーの後ろにピリオドで追加して命令を書くのです。これがポイントです。

こうすると、既存の計測とともに新たに追加した計測もされることになります。もともとの分析を邪魔すること無く複数のトラッキングコードを配置できます。ただし、上記のbというトラッカーは、それ以降なにか特別なことをしたいときには、かならずそのトラッカーを付与するようにします。たとえば、イベントトラッキングという計測をそのbというトラッカーで行いたいときには、b.event などと追記します。そこだけ注意しましょう。

外部ファイルでトラッキングコードを設置したい

追記:2017年12月5日 2017年12月時点で最新版トラッキングコードである gtag.js はそもそもGoogleタグマネージャが背後で動く仕組みなので、外部ファイル化はできないと思われます。

<SCRIPT>~</SCRIPT> の~という部分だけをテキストファイルで作成し保存します。たとえば、keisoku.js などとして、トップページと同じ場所にアップロードしておきます。 そうすれば、以後はその外部ファイルを呼び出せばGoogleアナリティクスを実行できます。 [html]<script type="text/javascript"src="http://xxxxxxx.jp/keisoku.js"></script>[/html] 外部ファイルにしたからといっても、正確にその部分を抜き出して保存している場合は、通常の実行となんら変わりありません。注意点としては、その誰でも変更可能にしてしまいますと、すべてのファイルに同一に読み込まれるわけですからセキュリティ上リスクはあります。管理には十分に注意しましょう。※gtag.js 以降については 異なります。

phpでトラッキングコードを設置したい

メジャメント

phpでトラッキングをしたい場合は、JavaScriptのトラッキングコードをそのままechoなどで出力するか、後述しますMeasurement Protocol の画像ピクセルを書き出して、echo などでIMGタグを出力するか、のいずれかとなります。かつてはガラケー用のPHPスクリプトも配布されていましたが、ユニバーサルアナリティクスになり、Measurement Protocolが実装されますと、その存在意義は薄れています。

かつては、Googleアナリティクスの新規プロパティID登録時にリンクがあったのですが、現在ではその名残で説明書きがあるだけです。ただ、それもガラケーを意識してでの説明というよりは純粋にphpで外部ファイルにしてみては、という意味かと思います。

ガラケー時代にGoogleアナリティクスが公開していました計測用のga.phpは、未検証ですが、いまでもGitHubで探すことができます。ご興味がある方は挑戦してみてください。

>>php-ga/ga.php at master · mptre/php-ga · GitHub

wordpressでトラッキングコードを設置したい

WordPress2

WordPressでGoogleアナリティクスのトラッキングコードを設置する場合、2つのケースがあります。1つはプラグインを使って設置する方法。これはプラグインが自動認識してたいていの場合、自分のアクセスを記録しないようにするなどしてくれるので便利です。反面、Googleアナリティクスのアップデートに対応するかどうかはプラグイン作者次第、とも言えます。

もう1つはヘッダーに直接トラッキングコードを記述してしまう方法。自分自身で管理できカスタマイズなどもしやすいですが、テンプレートが更新してしまうと上書きされて消えてしまう可能性もある点に注意です。

>>WordPress › Search for Google Analytics « WordPress Plugins

GoogleアナリティクスのWordPressプラグインでは、Google Analyticatorが有名ですが、プラグインはインストールが簡単なことがメリットですので、いろいろと試して、自分の運用にあったものを選ぶと良いでしょう。

自分がログインしている状態であれば、それをフックにして、Googleアナリティクスのトラッキングコードを非表示にすることで、自分除外も可能です。WordPressでは、is_user_logged_in() という関数が用意されていますので、これをifなどと絡めると良いでしょう。

>>Google Analyticsのコードをログイン時は非表示にするコード | Webourgeon

タグマネージャーを使って設置する

タグマネージャー

今後もっとも増えそうな設置方法です。タグマネージャーとは、Googleアナリティクスにかぎらず様々なタグをまとめて登録し、ホームページに実際に組み込むさいには、タグマネージャーのタグだけ貼り付ければ良い、という管理ツールです。Googleでも、Googleタグマネージャというサービスとして提供されて、便利に使えます。

>>Google タグマネージャ公式サイト

タグマネージャーに登録し、コンテナと呼ばれるタグを発行し、それを前述のトラッキングコードと同様に全てのページに貼り付けます。ただし、Googleタグマネージャのタグの場合、<body> 直後に貼り付けることが推奨されています。BODY内であればどこでも良いと思いますが注意してください。

コンテナタグを貼り付けた後は、Googleタグマネージャ管理画面内で、上図のようにタグ生成して保存・公開すれば、自動的にGoogleタグマネージャのタグを貼り付けたページでは、トラッキングコードが稼働します。便利ですね。

メジャメントプロトコルって何?

Measurement Protocol は、Googleアナリティクスがユニバーサルアナリティクスにバージョンアップしたときに実装された、従来のトラッキングコードとはまったく異なるデータ収集方法です。

<img src="http://www.google-analytics.com/collect?v=1&tid=UA-XXXX-Y&cid=555&t=pageview&dp=%2Fhome" />

たとえば、上記は、プロパティIDがUA-XXXX-Yで、クライアントIDが555というアクセスがあって、/homeというページビューをした、というデータを計測したこととイコールになります。ちゃんとリアルタイム解析にも表示されます。

従来のトラッキングコードではJavaScriptが使われていましたが、Measurement Protocolでは、指定されたURLを呼び出せばビーコンが送信され、簡単に計測ができます。たとえば、画像としてHTMLメールに貼り付けて開封チェックができたり、ガラケーなどJavaScriptが動作しないブラウザ用に設置したりなど、またブラウザを持たないネット接続機器も増えてきましたのでそういう端末での計測にも使えます。

>>Measurement Protocol Overview   |   Analytics Measurement Protocol   |   Google Developers

日本語の解説はいずれ(2015年6月7日現在、かつてあった日本語ヘルプはリダイレクトで海外に飛ばされてしまいます)ヘルプも充実してくると思われますが、こちらにもあります。

>>Google AnalyticsのトラッキングAPIを直に叩くときのめも – ゆうなんとかさんの雑記帳的な。

ガラケーでトラッキングコードを設置したい

ga.phpというライブラリがGoogleから正式に提供されていたときは、わたしもエントリーを書きました。

>>ゼロから学ぶGoogle Analytics 携帯版
>>携帯版Google Analytics設置でよくあるつまづき5つ

2015年6月現在では、IMGタグなどから呼び出せるMeasurement Protocolを使うことが望ましいでしょう。1×1ピクセルのgif画像を結果として呼び出すことになり、ガラケー(フィーチャーフォン)のブラウザなどでも計測が可能です。

>>続・Universal Analyticsのフィーチャーフォン(ガラケー)設定 | とあるへたれのWordPress
>>ビーコン(BLE)とgoogleAnalyticsで交通量の測定をやってみる – おぼえがき

ようは、http://www.google-analytics.com/collect?v=1・・・ をIMGタグでも何でも良いので呼び出せばいいのです。ですから、上記のようにビーコンに絡めてもhttpコールができれば問題なく使えるわけです。そのときに、どれくらいパラメーターを渡すかを検討すれば良いかと思います。たくさん渡せたほうが良いですが、そうなりますと上記エントリーのように、それなりに開発をしなくてはなりません。

しかし、HTMLメールの開封を調べる程度でしたら、そこまでかけなくともキャンペーントラッキングが残る程度のURLで良いかと思います。

アプリにトラッキングコードを設置したい

アプリにトラッキングコードを設置するときも、通常のサイトと同様にまずはプロパティIDを新しく作ります。その途中でウェブではなくアプリを選択しますと、最後にSDKをダウンロードするリンクが表示されますので、そこからダウンロードします。

そうしましたら、SDKを iOSやAndroidの開発環境に組み込んでアプリ開発すればOKです。

iOSの公式ドキュメント。
>>Google Analytics SDK for iOS v3 – Getting Started   |   Analytics SDK for iOS   |   Google Developers

導入はこちらが詳しいです。
>>GoogleAnalytics – Google Analytics SDK for iOS v3の導入方法と使い方 – Qiita

AndroidのSDK。
>>Google Analytics SDK v4 for Android – Getting Started   |   Analytics SDK for Android   |   Google Developers

導入はこちらがわかりやすいです。昨今はQiitaでのエントリーがとても役立ちます。
>>一番シンプルなAndroid Google アナリティクス SDK v4の使い方 – Qiita

Windowsストアアプリ計測はこちらです。
>>Google Analytics for WinRT (Windows 8 “Metro” apps) – Home

トラッキングコードの設定関連情報リンク

たんに貼り付けておいてください、という指示だとすると困りますね。
>>あの海老名市立図書館がGAの複数タグ設置ミスで、PVが実際の2倍に!? 正しいタグの書き方は? | 編集長ブログ―安田英久 | Web担当者Forum

URLが変わらないページ遷移のときは、エンジニアに相談しましょう。
>>JavaScript – Googleアナリティクスで同一URLでフォーム遷移する場合のページビュー計測 – Qiita

WordPressのフォームにはGoogleアナリティクスにも優しいこちらがおすすめ。
>>MW WP Form – 柔軟なカスタマイズ性が魅力の WordPress 問い合わせフォームプラグイン MW WP Form 公式マニュアル

まとめ~設置後の情報収集と勉強法

いかがだったでしょうか。

Googleアナリティクスはそもそもトラッキングコードが正しく設置されていませんと、分析もおぼつきません。トラッキングコードを正しく設置し、正常に動作することが前提です。

確認も重要ですが、どういうデータを取るのか、どういう環境なのかによっても変わってきます。解説以外の状況もありえるでしょうし、またどうしても設置できないケースも出てくるでしょう。それでもどうしてもデータ取得したい、という場合は有償になりますが、専門家を頼るのも手です。

>>Services – Google Analytics Premium – Google Analytics Partner Services and Technologies

国内でも数社が公式に、Googleアナリティクスのパートナーとなっています。それらに問い合わせるか、検索などして見つけるのもよいでしょう。また、勉強会などに積極的に参加して、情報収集したり人脈を広げるのも手です。日々進化するGoogleアナリティクスでは、情報収集も作業の1つといえます。うまく付き合って、トラッキングコードを適切に設置し稼働させましょう。

>>がんばるサイト運営者の会 | Doorkeeper

書籍はこちらが鉄板です。高度な情報も載っていますが、すべてのGoogleアナリティクスユーザーにおすすめの辞書です。ぜひ。


できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応: 木田 和廣, できるシリーズ編集部: 本

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

計測されるとホント嬉しい。