ホーム
コラム・特集
Googleアナリティクス
Googleアナリティクスで「ページ内でどのリンクがクリックされたか」を計測するための主要手法まとめ

Googleアナリティクスで「ページ内でどのリンクがクリックされたか」を計測するための主要手法まとめ

Googleアナリティクスのセミナーやサポートにおいての頻出質問の一つが、「Webサイトのページ内で、同一リンク先のリンクが複数ある場合、どこがクリックされたかを判別したいが、どう設定すれば良いか」というものだ。

Googleアナリティクスで計測する場合、主要な手法として3種類が挙げられる。
いずれもWebサイトの改修が必要であり、また、計測仕様が異なるため、Webサイトの運用状況や計測要件に応じて実装いただければ幸いだ。

同一ページ内に同一リンク先のリンクが複数ある場合にGoogleアナリティクス上で判別する手法

主要な手法・3種類の概要

1. イベントトラッキング

イベントトラッキング機能を使い、クリック数をイベントレポート内で集計する方法

2. 拡張リンクアトリビューション

各リンクに目印（id属性）を付けることで、同一ページ内でリンク先が同じでも、どのリンク元がクリックされたかを判別し、ページ上に吹き出しを重ねることで表示する機能

3. リンク元のURLにパラメータを付ける

各リンク元のURLに、どの場所のどのリンク元か判別しやすい目印（パラメータ）をURL（ページアドレス）に追記し、他の流入と区別する方法

各手法の特徴

	1. イベントトラッキング	2. 拡張リンクアトリビューション	3. URLにパラメータ追記
レポート	行動＞イベント	Chrome拡張機能をインストールしてオンにした状態で解析したいページにアクセスすると自動的に遷移データが重なって表示される	行動＞サイトコンテンツ＞すべてのページ＞ナビゲーションサマリーなど
設定	イベントトラッキングを行うためのonclick属性を計測したいリンクの<a>タグに追記 ※管理画面の設定は不要	トラッキングコードとHTMLの両方を改修し、Googleアナリティクス管理画面の設定を行う	同一リンクの<a>タグ内・href属性のURLに、各リンク毎に異なるパラメータを追記 ※管理画面の設定は不要
計測仕様	イベント数として計測	ページビュー数で計測	ページビュー数で計測
メリット	「ページ内のどのリンクが何回クリック/タップされたか」という直観的な観点で計測できるパソコンサイト・スマートフォンサイト問わず利用できる	ページ上に遷移データが重なって表示され、直観的にどこのクリックが多いか分かりやすい	取得のための設定が比較的容易
デメリット	イベント数はページビュー数と仕様が異なるため、あくまでも「クリック数」のみが取得可能	Chromeの拡張機能（アドオン）をインストールして利用する機能であるため、Chromeが使用でき、拡張機能（アドオン）をインストールできる状態にあることが前提となる。そのため、社内規定ブラウザがIEのみの場合は利用できないブラウザ上でのみ表示されるので、Excelなどを使っての分析やレポート作成のために時間がかかる表示させるにはGoogleアナリティクスにユーザー登録しており、ログインした状態でアクセスする必要があるスマートフォンサイトでは利用できない	HTML上で同じ内容で複数のURL（ページアドレス）が存在することになり、SEO上の減点対象となる可能性がある閲覧ページレポート上でパラメータの有無に拠ってページが分かれることになり、1ページ分として集計する手間がかかる

各手法の設定方法

1. イベントトラッキング

※今回は、Googleアナリティクスのトラッキングコードを設置して計測している場合の設定の一例を紹介する。

イベント名＝クリック数がレポートに表示される際にそのリンクのクリックと分かる名称を決める
- イベントトラッキングでは、「カテゴリ」「アクション」「ラベル」の3種類の名称を決める
- /sample/a.htmlというページに、/product/top.htmlへリンクしているXバナーとYバナーの2種類のバナーを設置するとする
  - Xバナー
    - カテゴリ：/sample/a.html
    - アクション：/product/top.html
    - ラベル：banner_X
  - Yバナー
    - カテゴリ：/sample/a.html
    - アクション：/product/top.html
    - ラベル：banner_Y
- カテゴリ・アクション・ラベル名は自由に作成できるため、任意に変更いただいて構わない。今回は「どのページ内に、どのページへのリンクを持つ、どのバナーがクリックされたか」を各項目名だけで表現している。
- どのページでクリックされたかは、イベント＞ページレポートで分かるため、カテゴリ名やアクション名に「メインコンテンツエリア」「右サイドエリア」といった、どの場所かを判別する名称を付けたりしても良い。
<a>タグ内に追記する記述を作成する
onClick="ga('send', 'event', 'イベントカテゴリ名', 'イベントアクション', 'イベントラベル名');"

このサンプルを基に、Xバナー用とYバナー用の追記内容を作成すると...

onClick="ga('send', 'event', '/sample/a.html', '/product/top.html', 'banner_X');"

onClick="ga('send', 'event', '/sample/a.html', '/product/top.html', 'banner_Y');"
HTML内の<a>タグに追記
<a href="/product/top.html" onClick="ga('send', 'event', '/sample/a.html', '/product/top.html', 'banner_X');">Xバナー</a>

<a href="/product/top.html" onClick="ga('send', 'event', '/sample/a.html', '/product/top.html', 'banner_Y');">Yバナー</a>
追記したHTMLをサーバにアップロード
ユーザーのクリック数が蓄積されるまで待つ（設定を行った時点からデータが取得され、過去のデータには反映されない）

2. 拡張リンクアトリビューション

※今回は、Googleアナリティクスのトラッキングコードを設置して計測している場合の設定の一例を紹介する。

トラッキングコード改修

ページ解析を行いたいページのGoogleアナリティクストラッキングコード内に1行追加し、下記のように変更する


<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-プロパティID', 'auto');
ga('require', 'linkid'); // 拡張リンクアトリビューション計測用にこの1行を追加
ga('send', 'pageview');
</script>

HTML改修
同一のリンクの<a>タグに「id属性」を追記する

<a href="/product/top.html">Xバナー</a> <a href="/product/top.html">Yバナー</a>

↓

<a href="/product/top.html" id="x_banner">Xバナー</a> <a href="/product/top.html" id="y_banner">Yバナー</a>

これで同じリンク先でも、異なる要素であることが明確になった。
トラッキングコードと<a>タグを改修後、改修したファイルをサーバにアップロード
Googleアナリティクス管理画面設定
「プロパティ設定＞ページ解析＞拡張リンクのアトリビューションを使用する」をオンにする
ユーザーのクリック数が蓄積されるまで待つ（設定を行った時点からデータが取得され、過去のデータには反映されない）

3. リンク元のURLにパラメータ追記

※Googleアナリティクスのトラッキングコードを設置して計測している場合およびGoogleタグマネージャを使用している場合いずれも共通の設定となる。

HTML改修
同一のリンクの<a>タグ内のURLに意味のないパラメータ（下記サンプルの場合「?banner=x」の部分）を追記する

<a href="/product/top.html">Xバナー</a> <a href="/product/top.html">Yバナー</a>

↓

<a href="/product/top.html?banner=x">Xバナー</a> <a href="/product/top.html?banner=y">Yバナー</a>

URLの後ろに、「?パラメータ名=判別用の文字列」というセットで追記する。パラメータ名は共通である必要があるが、判別用の文字列はそれぞれ別々にする。

念のため、制作担当・システム担当にどのようなパラメータを付ければ良いか確認しておく。システム用に利用しているパラメータを付けると、動作不具合の原因になることもある。
<a>タグを改修後、改修したファイルをサーバにアップロード
ユーザーのクリック数が蓄積されるまで待つ（設定を行った時点からデータが取得され、過去のデータには反映されない）

各手法で取得したデータの閲覧・利用方法

1. イベントトラッキング

イベントトラッキングで取得したクリック数を閲覧できるのは、「行動＞イベント＞上位のイベント」レポートだ。

「上位のイベント」レポートを表示すると、各「イベントカテゴリ」毎のレポートが最初に表示される
ページ中央の「プライマリディメンション」セクションで、「カテゴリ」「アクション」「ラベル」を選ぶと各項目のレポートに切り替わる
各項目を2軸でクロス分析するときは、「セカンダリディメンション」プルダウンメニューからクロスさせたい項目を選択すると画像のように2軸を組み合わせたレポートが表示される
「どのページでクリックが発生しているか」を把握する場合は「行動＞イベント＞ページ」レポートを使う
ここでも「セカンダリディメンション」プルダウンメニューから、クロスさせたい軸を選ぶと、「どのページでどのクリックが発生したか」を一目で把握することができる

2. 拡張リンクアトリビューション

Chromeブラウザを利用する
社内規定で利用可能なブラウザにChromeが入っているか確認が必要である。下記で説明する拡張機能はChromeのみで利用可能なため、Chrome以外のブラウザでは利用できない。
Chrome拡張機能をインストールし、オンにする
- 拡張機能「Page Analytics (by Google)」
  - https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh
- Chromeで上記アドレスにアクセスし、拡張機能を追加する
- 追加されるとアドレスバーの右にPage Analyticsのマークが出現する（オレンジ色背景にグラフの入ったアイコン）
- 使い方は下記ヘルプにも記載されている。
  - https://support.google.com/analytics/answer/6047802?hl=ja
ChromeブラウザでGoogleアナリティクスのログイン画面にアクセスし、ログインする
その状態で新しいタブやウィンドウで、ページ解析を行いたいページ（HTML・トラッキングコード改修済み）にアクセス
ページに吹き出しで遷移率・遷移数が重なって表示される
同一リンクの遷移率・遷移数を確認する

3. リンク元のURLにパラメータ追記

URLにパラメータを付けて取得したクリック数を閲覧できるのは、「行動＞サイトコンテンツ＞すべてのページ」レポートだ。

「すべてのページ」レポートを表示すると、各ページの閲覧レポートが最初に表示される
表右上の検索ボックスに、パラメータ名を入力して絞り込む（例えば、「設定方法」セクションでサンプルとして使用した「banner」を入力し、虫眼鏡ボタンをクリックする）
URLの中に「banner」という文字列を含むページが抽出される
それぞれのページビュー数を確認する

まとめ

このように、Googleアナリティクスのみで、同一リンクのリンク元判別計測を行う場合は上記のように設定や改修が必要とされる。

それぞれのメリット・デメリットを検討いただき、計測目的や、Webサイトの仕様、レポート内容に合わせて実装方法を選ぶのがお勧めだ。

コラム・特集