Googleアナリティクスは、非常に高度な分析ができる無料のアクセス解析ツールだが、正式なサポートがない。本連載では、その導入から、運用、活用まで、初めての人でもゼロから学んでいけるように、丁寧に解説していく。
前回は、「イベントトラッキング」という手法についての解説を行った。その冒頭でも書いたが、イベントトラッキングの使用例として、
- 外部サイトへのリンクのクリック
- PDFファイルのダウンロード
- Flashコンテンツの各種動作
などの「行為」の計測を挙げたが、もしかすると、多くの読者にとっては、これだけでは、具体的な活用方法がピンとこなかったかもしれない。
そこで、これから何回か、イベントトラッキングの活用例を具体的に解説していくことにする。「イベントトラッキング」のトラッキングコードの仕様に関しては、前回の記事を参照してほしい。
また気を付けておきたい点は、「取れるものは取ってみよう」という態度ではなく、つねに課題や仮説からスタートしてほしいということだ。Webコンサルティング側で仕事をする方なら、勉強のために何でもやるのは構わないが、事業者側の方々がデータに溺れてしまう必要はない。
データを取ってみて、その後に都合よいように解釈するのではなく、
- どうあるべきか
- どうなっていてほしいか
- どう変えられるのか
- その結果どう変わってほしいのか
という仮説検証型でイベントトラッキングも取り組んでほしい。ということで、実際のサイトを例にして、課題設定から始めていきたい。
ちなみに、私は今回取り上げるサイトとは無関係の第三者である。イベントトラッキングの仮説は、あくまでも想像上の話であり、数値もこのサイトのものではない。以前の連載「有名サイト、かってに解析！」のようなものだと考えていただきたい。
なお、JavaScript用のライブラリのjQueryを利用し、これら典型的なイベントを簡単に自動的に取得できるような機能拡張JavaScriptなどもあるが、それに関してはイベントトラッキングの活用例の最後の回に紹介する。簡単に実装するためには、現実的にはこのような手法を使うのがよいと思うが、ここではあえて1つずつベタに記述する場合のカスタマイズを解説する。
まずは課題を設定しよう
図1は「三井住友VISAカード」の「カード会員の方」の画面だ。
カード会員のユーザーが、左上のログイン（図1黒枠部分）から、カード会員用のサービスを利用することがこのページの本来の目的だが、各メニューの使い方を補足したり、追加のサービスを告知したりするスペースにもなっているページだ。
このページでは、メニューの使い方や、サービス告知といった情報へのリンクを、主に3ヵ所に分けて表示している。
- グローバルナビゲーション部 （ページ上方にある図1赤枠部分）
- 各メニュー部 （ページの左サイドにまとめている図1青枠部分）
- リンク群 （ファーストビューの下部にある図1緑枠部分）
今回は、このWebサイトのWebマーケティング部の担当者が、この3ヵ所に複数散らばっているリンクの配置構造がこれで本当によいのだろうかという問題意識を持っているとしよう。
リンクの配置構造は、これでよいのだろうか？
というのも、よく使うリンクは左側、あるいは上側に配置するのがよいというWebコンサルタントの話を聞いていたし、クリックされているリンクはもっと目立たせた方がよいのではないか、迷っている。
そこで、まずは、全般的にどのリンクが相対的にクリックさているのかを把握したいと考えた。
Googleアナリティクスの機能では「ページ解析」で任意のページのリンク（URL）ごとのクリック率の計測はできるが、同一ページ内に同じURLのリンクが複数あった場合、その判別はできない。拡張リンクのアトリビューション設定を有効にしても、サイトの作りによっては100％の精度であるとは限らないからだ。詳しくは以下の記事を参照してほしい。
そこで、イベントトラッキングの登場だ。実際のこのサイトでは、グローバルナビゲーション部の一部はプルダウン表示から複数のリンクが選択できるなど、細かい部分では様々な細工がしてあるのだが、ここでは単純に3か所すべてに同一のテキストリンクが貼ってあるとして話を進める。
トラッキングコードの実装例
それではこのケースにおけるトラッキングコードの実装例を紹介する。イベントトラッキングのおさらいを簡単にしておこう。ユニークに設定する項目は、
- イベントカテゴリ
- イベントアクション
- イベントラベル
- イベント値
の4つで、クリック行為に対してイベントを発生させる場合のフォーマットは下記のようになる。
<a href="http://example.jp/" onclick="_gaq.push(['_trackEvent', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル', イベント値, true]);">ここをクリック</a>イベントカテゴリの設定
<a href="http://example.jp/" onclick="_gaq.push(['_trackEvent', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル', イベント値, true]);">ここをクリック</a>「イベントカテゴリ」は大分類なので、内部リンクの計測全体を示す「inclick」と固定で指定しておくことにする。
イベントアクションの設定
<a href="http://example.jp/" onclick="_gaq.push(['_trackEvent', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル', イベント値, true]);">ここをクリック<a>イベントアクションは中分類なので、リンクがあるおおよその場所を示すものという位置づけにして、
- top
- left
- right
- center
- bottom
などとしてみよう。今回はグローバルナビゲーションと左、中央の3つのパターンがあるので、「top」「left」「center」の3つを、リンクの場所に応じてそれぞれ使用するものとする。
| リンクの場所 | イベントアクション |
|---|---|
| グローバルナビゲーション | top |
| 左サイドのメニュー部 | left |
| ファーストビュー下部のリンク群 | center |
イベントラベルの設定
<a href="http://example.jp/" onclick="_gaq.push(['_trackEvent', 'イベントカテゴリ', 'イベントアクション', 'イベントラベル', イベント値, true]);">ここをクリック<a>イベントラベルはリンク先のURLを指定するものとする。リンク先のURLが次の5つだったとしよう。イベントラベルは、それぞれのURLからドメイン名と拡張子を除いて「link1」などとしよう。
| リンク先のURL | イベントラベル |
|---|---|
| http://example.jp/link1.html | link1 |
| http://example.jp/link2.html | link2 |
| http://example.jp/link3.html | link3 |
| http://example.jp/link4.html | link4 |
| http://example.jp/link5.html | link5 |
イベント値とtrueの設定
「イベント値」はこのケースでは特に指定しない。クリック行為が何かの価値を生み出していたら値を付与しても良いが、このケースではクリック量を相対的に比較するのが目的だからだ。
最後の「true」は直帰率への影響が出ないように、つねに付けておくことにする。
トラックイベントコードを実装する
さて、あとは3ヵ所×5つ＝15個のリンクに対して、HTMLのソースコードに、次のような修正を加えよう。
元
<a href="http://example.jp/link1.html>/link1へのリンク</a>改修後
<a href="http://example.jp/link1.html
onclick="_gaq.push(['_trackEvent', 'inclick ', 'top ', 'link1', , true]);">/link1へのリンク</a>ここでは1つしか提示しないが、15個のリンクすべてに対して修正が必要で、青字部分は15個でそれぞれ別々になる。
- トラックしたイベントをレポートで確認する方法
- 結果を評価して、改良に活かすには？
トラックしたイベントをレポートで確認する方法
トラックしたイベントの集計結果を確認するには、レポートで［コンテンツ］＞［イベント］＞［上位のイベント］（図2赤枠部分）を確認しよう（ただし、前ページで紹介したHTMLの変更をしたあとのクリックしかこのレポートには反映されないので、データが貯まるまでしばらく待つ必要があるかもしれない）。
- グローバルナビゲーションの［レポート］をクリックする操作
- 画面の左側にあるメニューで、［コンテンツ］をクリックする
- メニューが開くので、［イベント］をクリックし、［上位のイベント］をクリックする
［コンテンツ］＞［イベント］＞［上位のイベント］レポートでは、デフォルトで「イベントカテゴリ」ディメンションが選択（図3赤枠部分）されている。
今回、イベントカテゴリにはすべて「inclick」しか指定していないため、見られるのは「inclick」だけ（図3青枠部分）となり、他のカテゴリが存在しない。各クリックの明細を見るには「イベントアクション」と「イベントラベル」（図3緑枠部分）を見る必要がある。
ここでは「イベントアクション」と「イベントラベル」（図3緑枠部分）をそれぞれ見るのではなく、まずは「イベントアクション」ディメンションを選択（図4赤枠部分）して、セカンダリディメンションのプルダウン（図4青枠部分）をクリックし、「イベントラベル」を選択（図4緑枠部分）しよう。
こうすれば、図5のように、リンクの場所とリンク先の15通りのパターン全部をフラットに見ることができる。これで全体を一望しよう。
なおどのページでイベントが発生したかという軸については、［コンテンツ］＞［イベント］＞［ページ］レポート（図2青枠部分）で確認できる。
今回はこのページ（図1）に限定した話にしているが、どのページでも同様の計測を行い、イベントが発生したページ別にデータを見ることもできるということだ。
結果を評価して、改良に活かすには？
もし、リンクの位置を、クリック数の多い順に、左から右へ（あるいは上から下へ）、並べ替えたいと考えているのであれば、それぞれのリンクのクリック数を確認する必要がある。
グローバルナビゲーション部のリンクのクリック数を確認したい場合は、図5で「イベントアクション」で「top」をクリックして絞り込み、「イベントラベル」の「link1」から「link5」までのイベント数を見ていけばよい。
左側のリンクのクリック数を確認するには、「イベントアクション」で「left」をクリックして絞り込み、「イベントラベル」の「link1」から「link5」までのイベント数を見ていけばよい。どこのリンクのクリックが多いだろうか。ほとんど利用されていないリンクはないだろうか、確認しよう。
もちろんこういった場合のリンクの順番は、ユーザーの行為の流れの順になっていたり、順番自体に意味があったりすることもあるので、単純にクリック数の多い順に並べればよいというものではない。またグローバルナビゲーションは、他のページでも固定なのが基本だから、この1ページだけのクリック状況を見て、簡単に変えるわけにはいかない。
このケースでは同じグループ（グローバルナビゲーション、左側のメニュー、中央のリンク群）内で、リンクの大きさや色を変えるといったことは考えにくいが、比較的自由度の許されるデザインが可能なら、この結果を受けて大幅にナビゲーションを変えるという選択肢があるかもしれない。
その場合も一気にリニューアルするのではなく、まずはテストなどをしてみて、徐々にページの改修に取り組んでみるとよいだろう。
筆者が講師の「アクセス解析ゼミナール」が9月に開講されます。丸2日間、アクセス解析について徹底的に学ぶ講座です。
→ お申し込みはこちらからどうぞ。
筆者が講師の「Googleアナリティクス ゼミナール」が10月に開講されます。Googleアナリティクスを徹底的に使い倒せるようになるための丸2日間の講座です。
→ お申し込みはこちらからどうぞ。
『Googleアナリティクス完全マニュアル』（電子書籍）が、オンデマンドのペーパーバック版でもお買い求めできるようになりました。
→ Amazon.co.jpの商品ページ
衣袋 宏美（いぶくろ ひろみ）
1960年東京都生まれ。東京大学教養学部教養学科卒業。大手電気メーカー勤務後、日経BP社インターネット視聴率センター長を経て、2000年ネットレイティングス入社、視聴率サービス立ち上げに参画、2006年ネットレイティングス社（現ニールセン株式会社）フェローに就任。株式会社クロス・フュージョン代表取締役。またデジタルハリウッド大学院客員教授、米Digital Analytics Association会員、アクセス解析イニシアチブ副代表。
- 新バージョン対応『Google アナリティクス完全マニュアル』（電子書籍）
- 『PROFESSIONALアクセス解析』単著
- 『ネット視聴率白書2008-2009』編著
- 『Webアナリスト養成講座』監訳
- ブログ： Insight for WebAnalytics
- 内容カテゴリ：アクセス解析
- コーナー：衣袋教授のGoogleアナリティクス入門講座
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：ナビゲーションのリンクを分析・評価するには？――実例で解説！イベントトラッキング（1）［第66回］ [衣袋教授のGoogleアナリティクス入門講座] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.