特集リンクや広告リンクのクリックを計測・評価する――実例で解説！イベントトラッキング（2）［第67回］

前回は、ナビゲーションの固定リンクを分析・評価するためにイベントトラッキングを利用した。

今回は、広告やサイト内の特集コンテンツといった、流動的なリンクのクリック状況を捕捉する目的で使ってみよう。

たとえば、メディアサイトなどであれば、広告リンクがどれぐらいクリックされているか、つまり広告主サイトへの送客状況を計測する。

また、eコマースサイトなどであれば、日替わりの特集ページへのリンク、ローテーションするお薦めページへのリンクの利用などを計測する。

今回もonclickを使うという点では、実装面では新しい話があるわけではないが、動的にコンテンツを生成している場合の実装はけっこう面倒かもしれない。いたずらにデータを取りたいからという理由で難しいことを始める必要はないので、問題意識をもって改善に役立てられるようであればトライしてみよう。

今回もイメージしやすいように、実際のサイト（クックパッド）を例にして、課題設定から始めていきたい。

なお、私は今回取り上げるサイトとは無関係の第三者で、あくまでも想像上の話であり、数値もこのサイトの実際のものではない。

まずは課題を設定しよう

図1は「クックパッド」のトップページの画面だ。

• メインビジュアルには、日替わりのおすすめレシピが掲載されている（図1青枠部分）
• 右側には、広告スペースがある（図1赤枠部分）
• ところどころに、特集ページと思われる流動的なコンテンツへのリンク（図1緑枠部分）も見受けられる。

図1：「クックパッド」の「トップページ」

一般的に、Webサイトの広告営業担当者は、利用している広告システムなどによっては、そのシステムでインプレッション数やクリック数などの基本統計データを取得していることが多いと思うが、今回は、自社サイト側においてもデータを計測できるようにしておきたいというニーズがあったとしよう。

また、コンテンツ編成部門の担当者は、自分が管理・制作を担当している「日替わりのおすすめレシピ」や「特集ページ」へのリンクをトップページに掲載した際に、どれぐらい効果があったのかを、レポート上で簡単に把握したいと思っているとしよう。

Googleアナリティクスの機能では、「ページ解析」を使えば、任意のページのリンクごとのクリック数やクリック率の計測はできる。しかし、「ページ解析」レポートでは、レポートを見ている時点の該当ページの画面を取得して、そこに過去のデータを重ねて表示するため、リンクの配置が頻繁に変わるようなサイトだと、すぐにまともに使えるデータにはなり得ない。

そこで、イベントトラッキングの登場だ。説明を単純化するため、

• メインビジュアルの日替わりコンテンツが1つ
• 広告が右側に常時2つ
• 不定期に変化する特集コンテンツが1つ

以上の、合計4つの画像（あるいはテキストリンク）のクリック状況を把握する前提で考えてみよう。

トラッキングコードの実装例

それではこのケースにおけるトラッキングコードの実装例を紹介しようと思うが、その前に、再度イベントトラッキングのおさらいを簡単にしておこう。ユニークに設定する項目は、

• イベントカテゴリ
• イベントアクション
• イベントラベル
• イベント値

の4つで、クリック行為に対してイベントを発生させる場合のフォーマットは下記のようになる。

<a href="http://example.jp/" onclick="_gaq.push(['_trackEvent', 
'イベントカテゴリ', 'イベントアクション', 'イベントラベル', イベント値, true]);">
ここをクリック</a>

イベントカテゴリには外部リンク／内部リンクを設定する

イベントカテゴリは大分類なので、外部リンクの計測の方は「outclick」、内部リンクの計測の方は「inclick」などとして、担当者別に見るところが混ざらないように指定しておくことにする。

イベントアクションには「いつ」を設定する

イベントアクションは中分類なので、どういう軸で見たいのかにもよるが、今回は、「いつ」の軸を指定してみる。具体的には、年月日を指定する。

イベントラベルには「どこへ」を設定する

そして、イベントラベルは「どこへ」の軸を見るために、リンク先の広告やコンテンツを判別する文字列をつけてみよう。

イベント値の設定

「イベント値」は、広告の外部リンクのクリックに対して何らかの数値を割り当てておくのが良さそうだ。それぞれの価値に応じて2ヵ所別々の値をふっておくものとする。

最後の「true」は直帰率への影響が出ないように、つねに付けておくことにする。

トラックイベントコードを実装する

さて、今回は4つのリンクなので、全部列挙してみよう。赤字部分が追記する箇所になる。下記例ではテキストリンクの場合の表記になっているが、画像リンクの場合はそれに合わせて、HTMLのソースコードを変更してほしい。

日替わりコンテンツ（サイト内）へのリンク

<a href="http://cookpad.com/recipe/1702720" onclick="_gaq.push(['_trackEvent', 'inclick', '20130902', '/recipe/1702720', , true]);">ここをクリック</a>

特集コンテンツ（サイト内）へのリンク

<a href="http://cookpad.com/campaign/example " onclick="_gaq.push(['_trackEvent', 'inclick', '20130902', '/campaign/example', , true]);">ここをクリック</a>

広告（サイト外）へのリンク

<a href="http://example.com/advertise1" onclick="_gaq.push(['_trackEvent', 'outclick', '20130902', '/example/advertise1', 10000, true]);">ここをクリック</a>
<a href="http://example.com/advertise2" onclick="_gaq.push(['_trackEvent', 'outclick', '20130902', '/example/advertise2', 8000, true]);">ここをクリック</a>

まとめると、このようになる。