Googleアナリティクスの導入から、運用、活用まで、正式なサポートがない初めての人でもゼロから学んでいけるように、丁寧に解説していく。

Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座

Onclickとは？ GAイベントトラッキングの設定方法＆レポートの見方［第65回］

Googleアナリティクスのイベントラッキングで使用するHTMLタグについて、onClick（オンクリック）、_gaq.push、_trackEventなど各部を分解して解説。サイト内での「リンクのクリック」や「PDFのダウンロード」といった行為を計測する際に「イベントトラッキング」は分析・解析に有用な手法です。記録したイベントをレポートで確認する方法も、実際の画面とともに解説していきます。

衣袋宏美 2013/8/22 9:00 アクセス解析／データ分析 | 解説／ノウハウ

91 62 230

2週お休みをいただいたので、前回は3週間前になるが、仮想ページビューについて解説した。

「仮想ページビュー」とは、本来はページビューとしてはカウントされないユーザーの行動を、ページビューとして計測するためのアクセス解析ツールの機能である。

たとえば、次のようなものを、アクセス解析ツール上で「ページビュー」として扱える。

外部サイトへのリンクのクリック
PDFなどのダウンロード
Flashコンテンツの各種動作（Flash上での選択や入力など）

しかし、これらの行為を計測はしたいのだけれど、ページビュー数としてはカウントしたくない場合というのもある。そのようなときには、「イベントトラッキング」という手法を利用し、これらの行為を「イベント」として計測するという方法が用意されている。

「イベント」とは、クリックやマウスオーバーなどの「行為」を計測できる仕組みであると、とりあえずは考えておこう。

イベントトラッキングの実装のしかた

さっそく、外部リンクがクリックされたときに、このクリックをイベントとして計測する方法を紹介しながら、イベントトラッキングについて説明していこう。

あらかじめ、通常のトラッキングコードは所定の位置に実装していることを前提として説明を進める。トラッキングコードの実装については、以下の解説記事を参照してほしい。

トラッキングコードを実装する［第8回］

イベントトラッキングを行うためには、通常のGoogleアナリティクスのトラッキングコードを変更するのではなく、ユーザーの行為を計測したい部分に該当するHTMLを修正する。

たとえば、外部サイトへのリンクをユーザーがクリックしたことをイベントとして計測するには、計測したいリンクのHTMLに、以下ようなコードを追加する（赤字部分が追加で必要な実装コードだ）。

イベントトラッキング用のHTML指定の例

<a href="http://example.jp/"
 onclick="_gaq.push([
  '_trackEvent',
  'linkclick',
  'http://example.jp/',
  'content',
  10,
  true
]);">ここをクリック</a>

この書き方は、次のようなルールが定められている。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

では、イベントトラッキングの計測コードの意味を解説していこう。

イベントトラッキングの計測コードの意味

onclickはイベントハンドラ

計測コードの中味について、順に説明していこう。まずは、最初の「onclick」だ。

onclickは「このリンクがクリックされたら、後に続く処理を実行せよ」という意味のHTMLのイベント指定で、処理内用はJavaScriptで記述する。

このonclickのような、ブラウザ上で行われた動作や操作に対して、処理を実行させるための命令をイベントハンドラという。

イベントハンドラには、もちろんonclick以外のものもある。JavaScriptのイベントハンドラで計測可能なイベントは下記のようにいろいろあるので、こういった行為も取得可能であるということを知っておこう（onclickはリンクの<a>タグに記述したが、イベントハンドラは<a>タグ以外にもさまざまなHTMLタグに指定できる）。

イベントハンドラ	イベント
ページ関係
onload	ページやフレームの読み込みが終わった（<body>タグや<frameset>タグに使う）
onunload	ページが閉じられる（<body>タグや<frameset>タグに使う）
フォーカス関係
onfocus	フォーカスが当たった
onblur	フォーカスが外れた
onchange	内容が変更された
クリック関係
onclick	クリックされた
ondblclick	ダブルクリックされた
キー関係
onkeydown	キーボードのキーが押し下げられた
onkeypress	キーボードのキーが押して放された（通常のキーを押す行為）
onkeyup	押していたキーボードのキーが放された
マウス関係
onmousedown	マウスボタンが押し下げられた
onmousemove	マウスポインタがHTML要素の上で動かされた
onmouseout	マウスポインタがそのHTML要素の上から出た（離れた）
onmouseover	マウスポインタがそのHTML要素の上に入った（乗った）
onmouseup	押していたマウスボタンが放された
その他
onsubmit	フォームが送信される（<form>タグに使う）
onreset	フォームの［Reset（消去）］ボタンが押された（<form>タグに使う）
onselect	文字が選択された（<input>タグと<textarea>タグに使う）
onresize	ウィンドウのサイズが変更された（標準仕様ではない）
onmove	ウィンドウが移動された（標準仕様ではない）
ondragdrop	ウィンドウがドラッグ&ドロップされた（標準仕様ではない）
onerror	要素の読み込み時にエラーが発生した（標準仕様ではない）
onabort	ページや要素の読み込みが中止された（標準仕様ではない）

たとえば「onfocus」は、フォームの入力欄にカーソルが当てられたときに何か処理を実行するものだ。たとえば、入力フォームのページで「onfocus」を利用して、入力フォームの入力欄1つずつにonfocusを使ったイベントトラッキングを設定しておけば、どの入力項目までカーソルが進んだのかを把握するといったことができるというわけだ。

_gaq.pushメソッドは、Googleアナリティクスの命令

_gaq.pushメソッドは、「トラッキングコードをカスタマイズするための基礎知識［第63回］」でも説明したので、ここでは省略する。

_trackEventメソッドでイベントを記録する

_gaq.pushで指定している「_trackEvent」が、イベントトラッキングのもっとも重要な部分、_trackEventメソッドである。イベントハンドラによって_trackEventメソッドが呼び出されることで、ブラウザでの行為がイベントとしてGoogleアナリティクスのサーバーに記録されるのである。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

しかし、ただイベントとして記録されるだけでは、詳しく解析できない。できれば、そのイベントがどういうイベントかを分類して、タグ付けした上で、記録しておきたいところだ。

記録するイベントを分類したり、タグ付けしたりするためのデータが、続く「'category', 'action', 'opt_label', opt_value, opt_noninteraction」の部分である。

categoryにはグループの名前を記入する

「category」の箇所には、トラッキングするオブジェクトのグループに付ける名前を記入する。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

この名前は、解析担当者が自由につけてよい。たとえば、ad（広告）、movie（動画）など行為（action）に対する対象物を割り当てるような使い方が考えられる。

categoryは必ず指定しなければいけない。

categoryに指定した内容は、レポートでは「イベントカテゴリ」に反映される。

上に示した例では、categoryには「'linkclick'」を指定した（リンクのクリックを計測したデータであることを指定）。

actionにはユーザーの操作のタイプを記入する

「action」は、各カテゴリとペアになる固有の文字列で、一般的にユーザー操作のタイプを定義するために使用される。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

イベントハンドラに対応した名前を付けておくとよい。この名前も、解析担当者が自由に決めてよい。たとえば、「click」「focus」などが考えられる。

このactionも必ず付与しなければいけない。レポートでは「イベントアクション」に対応する。

上に示した例では、actionには「'http://example.jp/'」を指定した（リンク先のURLがデータに表示されるように指定）。

opt_labelはディメンションを追加するための項目（オプション）

「opt_label」はイベントデータにディメンションを追加するための文字列である。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

ここに記入する文字列も、イベントごとに解析担当者が自由に決めてよい。レポートでは「イベントラベル」に対応する。これも利用すれば、「イベントカテゴリ」「イベントアクション」「イベントラベル」の3つの軸で「イベント」を集計・分析することができるということだ。

opt_labelは省略してもかまわない。

上に示した例では、opt_labelには「'content'」を指定した（ページのコンテンツ部分のリンクであることがわかるように指定）。

opt_valueには数値データを記入する（オプション）

「opt_value」には、ユーザーイベントに関する数値データを整数で指定できる。

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

イベントの発生に対する金額価値評価などをしたい場合に利用するとよいだろう。たとえば、1クリックの価値が10円だとすれば、「10」と書いておく、といった具合だ。

opt_valueも任意の項目で、利用してもしなくてもよい。

上に示した例では、opt_valueには「10」を指定した。

opt_noninteractionは直帰率に影響を与えたくないときに使う（オプション）

<a href="http://example.jp/" onclick=
"_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);">
ここをクリック</a>

「opt_noninteraction」は、少しわかりにくいが、イベントトラッキングの処理と直帰率のデータに関する項目だ。

結論から言うと、ここに「true」と記述すると、このイベントの発生が直帰の計測に影響を与えなくなり、直帰が正しく計測されるようになる。逆に、この項目を省略したり、「false」と記述したりすると、イベントの発生により直帰が正しく計測されなくなる可能性がある。

少し細かい話になるが、イベントトラッキングを実装したページにおいてイベントが発生するとGoogleアナリティクスのサーバーにデータが送信される。すると、もしユーザーがそのページだけ見て直帰したとしても、直帰とは記録されない（ページビューのあと他の行動があったとみなされるので）。つまり、本来直帰として記録されるべきページビューが、直帰にカウントされないのだ。これはマズイ。

そこで、この問題を回避するために用意されたのが、このopt_noninteractionオプションである（2011年10月発表）。ここで「true」と記述すると、イベントが発生したページにおいて、1ページで閲覧が終了したら直帰とみなす。ただし過去からの継続性のため、もしこの項目を省略した場合、デフォルトではこれが、「false」扱いで動作しないことに注意されたい。

上に示した例では、opt_noninteractionには「true」を指定した。

省略バリエーション

オプションの実装項目を省略する場合のバリエーションは下記のようになる。

必須項目のみ指定した場合は、必須項目以降のカンマから最後まで省略してよい
```
_gaq.push(['_trackEvent', 'category', 'action'])
```
間にあるオプションの1つを指定しなかった場合は、そのオプションの部分の前後のカンマを残しておくこと
```
_gaq.push(['_trackEvent', 'category', 'action', 'label', , true])
```

category、action、labelをうまく使えば、クリックにしても、広告リンク、外部リンク、内部リンクもあれば、複数の箇所にあるリンクを区別したりすることもできる。動画などの各種ボタン操作、エラー表示などさまざまな利用シーンを思い描いて、知りたい情報、あるいは課題だと感じている情報を積極的に取得していただきたい。

Flashでのイベントトラッキング

さらにFlashコンテンツでのインタラクティブな行為に関しても、同様のデータを収集することができる。FlashコンテンツはJavaScriptと兄弟関係にあるActionScriptというプログラムで書かれているので、そこにGoogle アナリティクスのトラッキングコードを実装すればよい。当然、記述方法はJavaScriptとは若干異なるが、考え方は同様なので、以上の説明が理解できれば、導入はそれほど難しくないだろう。