GAのトラッキングコードを正しい位置に設定する［第2回］

アナリティクス設定からトラッキングコードを表示する

まずはGoogleアナリティクスへログインしよう。前回の記事のようにGoogleアナリティクス公式サイトからログインしてもいいし、ログイン後のページをブックマークしておいても構わない。前回の記事から引き続き作業する場合は、ログイン済みのはずなので、本項目を飛ばして図4から読み進めてほしい。

サイトに実装するトラッキングコードは、「アナリティクス設定」という各種設定を行う画面で確認できるので、まずはその画面を表示しよう。画面上部の「アナリティクス設定」（図1赤枠部分）をクリックする。

図1：ログイン直後のレポート画面

「アナリティクス設定」画面が表示されたら、次は該当のGoogleアナリティクス アカウントとプロパティを選択する。Google Analyticsの新規アカウント作成やプロパティ名とは［第1回］の新しいアカウント作成画面で「アカウント名」と「ウェブサイト名」を入力したが、これらがそれぞれに該当する。

Googleアナリティクス アカウントが1つしかない場合は目的のものがすでに選択されていると思うが、複数のGoogleアナリティクス アカウントを利用している場合は、目的のアカウントとプロパティを1つずつ選択する必要がある。

1. 一番左の列上部の［アカウント］プルダウンからアカウントを選択（図2赤枠部分）
2. 中央の列上部の［プロパティ］プルダウンからプロパティを選択（図2青枠部分）
3. プロパティの列にある「トラッキング情報」をクリック（図2緑枠部分）

図2：該当のアカウントとプロパティを選択する

複数のGoogleアナリティクス アカウントを利用している場合は？

複数のGoogleアナリティクス アカウントを利用している場合は、ログインすると「ホーム」画面（図3赤枠部分）が表示される。この場合も、画面上部の「アナリティクス設定」（図3青枠部分）をクリックしよう。あとの手順は同じだ。

図3：Googleアナリティクスの「ホーム」画面

トラッキング情報からトラッキングコードを取得する

「トラッキング情報」をクリックすると、いくつかのサブメニューが現れるので、一番上の「トラッキングコード」（図4赤枠部分）をクリックする。その画面が図4だ。

図4：「トラッキングコード」の画面

Webサイトに実装するトラッキングコードは、図4青枠部分に表示されている。トラッキングコードはブラウザ上で動く「JavaScript（ジャバスクリプト）」と呼ばれる小さなプログラムでできている。<script>で始まり、</script>で終わるまでがプログラムの中身だ。

トラッキングコード内には、「どのWebサイトを計測しているか」を識別するための「トラッキングID」（図4緑枠部分）が含まれている。

トラッキングコードの基本フォーマットは図4青枠部分に表示されているものでどのWebサイトでも同じなのだが、「トラッキングID」はサイトごとに別々だ。だから、他のサイトのトラッキングコードをそのままコピーして流用しても自分のサイトの計測はできない。決して他のWebサイトからコピーしないようにしよう。

逆に、自分のサイトのトラッキングコードを他の人がそのままコピーして知らないWebサイトに実装してしまう事態も起こり得る、ということも頭の片隅に入れておこう。

トラッキングコードをWebサイトに実装する

それでは、図4青枠部分に表示されたトラッキングコードをコピーして、解析対象のWebサイトの各ページに実装していこう。「実装」とは、ページのHTMLにトラッキングコードを埋め込むことを指す。

Webサイトの</head>タグ直前に実装する

トラッキングコードを実装する位置は、HTMLソースの</head>タグの直前が推奨されている。

トラッキングコードを実装する方法3パターン

各ページのHTMLソースにこのトラッキングコードを実装していくわけだが、実際にすべてのページのHTMLに修正を加えて更新するというのは大変だろう。各ページがどのようにして制作されているのかにもよるが、1つ修正すれば全ページに反映されるような仕組みなら作業ミスも起こらず安心だ。ここでは、よくあるパターンを3つ紹介しておこう。

それぞれの詳細手順は本連載の範囲を超えるので触れないが、わからない場合は社内のエンジニアに相談するか、各ツールのコミュニティを参照してみてほしい。「Googleタグマネージャ」などのタグマネジメントツールも、こうした方法をもっと汎用的に利用できるようにしたものだといえる。

WebサイトをCMSで管理している場合

Movable TypeやWordPressなどのCMS（コンテンツ管理システム）を利用している場合は、ページのヘッダー部分のテンプレートファイルにトラッキングコードを貼り付けるといいだろう。

注意したいのは、CMSで専用のプラグインを利用してGoogleアナリティクスを実装しているのに、さらにテンプレートファイルにもトラッキングコードを実装してしまうことだ。そうすると、トラッキングコードが重複してしまうので気を付けよう。

共通のJavaScriptを外部ファイルにまとめて読み込んでいる場合

各ページで共通のプログラムなどを1つにまとめて、外部ファイルとして読み込んでいる場合は、この外部ファイルにトラッキングコードを追加すればいい。汎用性の高い方法なので検討してみよう。

SSIやPHPを利用できる場合

WebサーバーでSSI（サーバーサイドインクルード）の利用が許可されている場合は、トラッキングコードを記述したインクルードファイルを1つ作成し、各HTMLページからSSIでそのファイルを読み込むようにする方法もある。SSIを利用できるかどうかはWebサーバーの管理者に確認しよう。

また、PHPでインクルードを利用できる場合も、同様に各HTMLページから1つのインクルードファイルを読み込むことができる。図5の「PHPの設定」（図5黒枠部分）は、こうした場合の例を示したものだ。

図5：PHPの設定

「リアルタイム」レポートで動作を確認する

トラッキングコードを計測対象のサイトに実装したら、正しく動作しているかどうかを確認をしよう。確認方法は複数あるが、一番簡単なのは実際に自分でサイトに訪問してみて、「リアルタイム」レポートを確認する方法だ。

1. Googleアナリティクスの画面で「レポート」をクリック（図6赤枠部分）
2. 「リアルタイム」をクリック（図6青枠部分）
3. 「サマリー」をクリック（図6緑枠部分）
4. 別のブラウザやタブでトラッキングコードを実装したページを表示
5. リアルタイムレポートにアクセスが表示されることを確認

「リアルタイム」レポートでは、直近30分以内と1分以内のページ閲覧状況（図6黒枠部分）が確認できる。

図6：［リアルタイム］＞［サマリー］レポート

「どのリンクをたどってWebサイトに訪問したか」という参照元や見られたページの情報も確認できる（図6茶枠部分）ので、今自分が見たページがレポートに表示されているかどうかを確認しよう。訪問のデータが表示されれば、トラッキングコードが正しく実装されている。

「トラッキングコード」の画面のステータスも、「過去48時間に受信したデータはありません」の表示（図7赤枠部分）だったものが、トラッキングコードが正しく実装された後にページの閲覧があると、じきに「過去48時間にトラフィックデータを受信しています」の表示（図8赤枠部分）に変わる。

図7：「トラッキングコード」の画面

図8：「トラッキングコード」の「ステータス」

各レポートの数値やグラフなどをすぐに確認できる場合もあるが、処理に時間がかかり丸2日くらい待たなければならないレポートなどもある。じっくり検証するのはトラッキングコード実装後2～3日たってからでよい。

次回は、Webサイトを解析するための「ビュー」の作成方法を解説する。