Google Analyticsのイベントトラッキングでバナーのインプレッション数を計測する

SEO・SEM

ユーザーの行動を計測する為のイベントトラッキングは、主にクリック数の計測などによく使われていますが、
今回はクリックではなく、ページに表示されたバナーの表示回数を計測する方法をご紹介します。

※イベントトラッキングについての過去記事はこちら↓

インプレッション数を計測する為のイベントハンドラ

よく使用するクリック数の計測では、イベントハンドラは「onclick」を使用しますが、
今回はインプレッション数の計測なので、イベントハンドラは「onload」を使用します。

計測用のコードはクリック計測と同じ、下記のイベントトラッキングコードを使用します。

ga('send','event','category','action','label', 値 );

埋込みコードは、バナーの表示回数の計測なので、イベントハンドラを「onload」にして、バナーのimgタグに下記のように設定します。

<img src="sample.jpg" width="350" height="210" onload="ga('send','event','category','action','label', 値 );">

クリック計測と併用してクリック率を算出

例えば、下記のような採用バナーをページに設置したとします。

上記バナーに下記のようなクリック計測のコードも設定する事により、クリック率を算出する事ができます。

<a href="" onclick="ga('send','event','category','action','label', 値 );">
<img src="sample.jpg" width="350" height="210" onload="ga('send','event','category','action','label', 値 );">
</a>

aタグには「onclick」でクリック数の計測コードを設定
imgタグには「onload」でインプレッション数の計測コードを設定

計測コードの「カテゴリ」「アクション」「ラベル」には、レポートで見た時にわかりやすい分類名を設定してください。
今回は下記のように設定してみます。

イベントハンドラ	カテゴリ	アクション	ラベル
onclick	banner	Click	saiyou
onload	banner	impression	saiyou

先程のコードに上記を設定してみます。

<a href="" onclick="ga('send','event','banner','Click','saiyou');">
<img src="saiyou.jpg" width="350" height="210" onload="ga('send','event','banner','impression','saiyou');">
</a>

設定したら、Google Analyticsのレポートで確認してみましょう。

計測データから、クリック率を算出してみましょう。
クリック率は下記の計算式で算出されます。

クリック率（％）＝クリック数÷インプレッション数×100

上記で計算してみると、今回ページに設置した採用バナーのクリック率は「7.6％」となります。
クリック計測を併用して、バナーの効果を検証してみるのも良いでしょう。

ランダムに変わるバナーを計測する

バナーがランダムに変わる場合にも、上記と同じ設定で計測が行えます。
例えば、下記2つのバナーがランダムに切り替わる場合。

サンプルコード：JavaScriptでランダムに設定した場合
●html

<p class="random-banner"></p>

●JavaScript

jQuery(function () {
  var elements = [
  '<a href="" onclick="ga(\'send\',\'event\',\'banner\',\'Click\',\'saiyou\', true );"><img src="saiyou.jpg" width="350" height="210" onload="ga(\'send\',\'event\',\'banner\',\'impression\',\'saiyou\', true );"></a>',
  '<a href="" onclick="ga(\'send\',\'event\',\'banner\',\'Click\',\'saiyou_engineer\', true );"><img src="saiyou_engineer.jpg" width="350" height="210" onload="ga(\'send\',\'event\',\'banner\',\'impression\',\'saiyou_engineer\', true );"></a>'
  ];

  var randElm = elements[Math.floor(Math.random() * elements.length)];
  $('.random-banner').html(randElm);

});

上記を設定して、Google Analyticsのレポートを確認してみます。