【解説】広告のビューインプレッションをGoogle Analyticsで計測する

2017年12月27日


今回はインプレッション計測に関するお話です。

広告配信システムにはインプレッション計測機能がついているツールがあります。

※インプレッション: Webサイトに掲載される広告の効果を計る指標の一つで、広告の露出(掲載)回数のこと。


広告システムでは、このインプレッション回数と広告のクリック数から広告が何回表示され、そのうち何回クリックされたかというクリック率を求めます。 ここで注意するべきなのはインプレッション回数の多くが「広告が配信された数」であって「ユーザの目に広告が触れた数」ではないということです。

ファーストビューで表示されている広告であれば、「広告配信数」≒ 「ユーザの目に広告が触れた数」になるのですが、フッター等にある広告等、スクロールをしないと目に触れない広告も多く、その場合「広告配信数」と「ユーザの目に広告が触れた数」とでは大きな乖離が発生する可能性があります

そこで今回はGoogle Analytics(以下GA)のイベントトラッキングを利用して、GoogleAnalytics側でユーザの目に広告が触れたタイミング(以後ビューインンプレッション)を擬似的に計測してみたいと思います。

ちなみに今回は広告単位ではなく、広告単位でのビューインンプレッション計測方法について解説します。 計測タイミングですが、対象の広告が画面内に1秒以上表示された場合にイベントを飛ばします。また今回はY座標のみを計測しているのでX座標のスクロールは考慮していません。

ビューインプレッションの計測手順


ステップ1 スクロ-ルイベントの登録


まずはスクロールイベントを登録し、スクロールイベントのタイミングでonScrollEventHandler関数が実行されるようにします。

    var eventType = "scroll";
    if (document.addEventListener) {
        document.addEventListener(eventType, onScrollEventHandler, false);
    } else if (document.attachEvent) {
        document.attachEvent('on' + eventType, onScrollEventHandler);
    }




ステップ2 ページ内の要素のY座標を取得する関数の作成


要素のidを引数に渡すと、コンテンツのY座標を返してくれる関数を作成します。
Y座標はブラウザ画面の左上を起点とした場合のid要素までの座標にコンテンツ自体の長さを足した値を算出しています。

表示領域からの絶対座標値はgetBoundingClientRect()で取得できます。 上の座標値はtopプロパティに入るので、rect.topで取得することができます。

    function getPositionY(id) {
        var positionY = "";
        try {
            var elm = document.getElementById(id);
            var rect = elm.getBoundingClientRect();
            var cont_h = document.getElementById(id).clientHeight;
            positionY = Math.round(rect.top + cont_h);
            return positionY;
        } catch (e) {}
        return positionY;
    }
    getPositionY("id名");



ステップ3 ページ内でスクロールが発生した場合に実行される、onScrollEventHandler関数を作成


この関数はスクロールが発生するたびに実行され、対象の要素のY座標をもとめ画面内に表示されているかどうかを判断しています。
画面内に表示されている場合はタイマーイベントが起動し1秒後にGAのイベントトラッキングを実行しています。 GAのリクエストは1ページにつき1度しか飛ばしたくないので、1度リクエストが終わるとスクロールイベントを解除し、リクエストを飛ばさないようにしています。 今回はイベントトラッキングの設定方法については割愛するので、実際に実装する場合には下記を参考にしてください。
参考:Google Analytics イベントトッラキングを設定する

    function onScrollEventHandler() {
        var gpy = getPositionY("id名");
        var dsp_area = document.documentElement.clientHeight;
        if (gpy != "" && gpy < dsp_area) {
            //タイマーイベント
            setTimeout(function() {
                //GA処理
            }, 1000);
            //スクロールイベント解除
            if (document.removeEventListener) {
                document.removeEventListener('scroll', onScrollEventHandler, false);
            } else if (this.detachEvent) {
                document.detachEvent('onscroll', onScrollEventHandler);
            };
        }
    }




ステップ4 まとめ


これまでのコードをまとめたスクリプトがこちらです。

<script type="text/javascript">
(function() {
    //スクロールイベント登録
    var eventType = "scroll";
    if (document.addEventListener) {
        document.addEventListener(eventType, onScrollEventHandler, false);
    } else if (document.attachEvent) {
        document.attachEvent('on' + eventType, onScrollEventHandler);
    }
    
    //Y座標取得
    function getPositionY(id) {
        var positionY = "";
        try {
            var elm = document.getElementById(id);
            var rect = elm.getBoundingClientRect();
            var cont_h = document.getElementById(id).clientHeight;
            positionY = Math.round(rect.top + cont_h);
            return positionY;
        } catch (e) {}
        return positionY;
    }

    //メイン処理
    function onScrollEventHandler() {
        var gpy = getPositionY("id名");
        var dsp_area = document.documentElement.clientHeight;
        if (gpy != "" && gpy < dsp_area) {
            //タイマーイベント
            setTimeout(function() {
                //GA処理
            }, 1000);
            //スクロールイベント解除
            if (document.removeEventListener) {
                document.removeEventListener('scroll', onScrollEventHandler, false);
            } else if (this.detachEvent) {
                document.detachEvent('onscroll', onScrollEventHandler);
            };
        }
    }
})();
</script>


上記スクリプトを実行して結果を確認してみましょう。 実際にGAの管理画面でスクロールイベントが取れていることが確認できます。



これでGAでのビューインプレション計測設定は完了です。

まとめ


このビューインプレションですが、本来はやはり広告システムで実装されるべきだと考えています。 Google Analyticsだけではビューインプレッション、クリック、CVの3つをすべて計測することはできないからです。 広告を掲載しているメディア(いわゆる"媒体")であれば、広告主サイトで発生するコンバージョンまでを計測することはできず、 同様に広告主はメディアサイトで発生するビューインプレッションをGAで計測することはできません。

広告の配信システムであればインプレッションからCVまでを横断して計測することができます。 Google Analyticsは確かに高機能ですが、複数のプレイヤー間で発生する広告計測となると、広告配信システムが必要になってきます。 googleとyahooでは既にビューインプレション機能が実装されていますし、 今後はこのビューインプレションも広告システムの標準機能になってくるかもしれません。