ユーザーの行動を計測する為のイベントトラッキングは、主にクリック数の計測などによく使われていますが、
今回はクリックではなく、ページに表示されたバナーの表示回数を計測する方法をご紹介します。
※イベントトラッキングについての過去記事はこちら↓
インプレッション数を計測する為のイベントハンドラ
よく使用するクリック数の計測では、イベントハンドラは「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のレポートを確認してみます。
それぞれのバナーのインプレッション数とクリック数が確認できるようになります。
まとめ
広告バナーであれば、広告管理ツールでインプレッション数やクリック数などが確認できると思いますが、今回は広告以外の誘導バナーなどの効果測定方法の一例として、Google Analyticsのイベントトラッキング機能を使う方法をご紹介しました。
なお、Google Analyticsと広告ツールでは計測方法が異なるため、数値に大きな差が出ることもありますので、あらかじめご認識頂いた上で参考値としてお使いください。