IntersectionObserverを使ってビューアブルインプ計測を試しました #JavaScript

はじめに

この記事は MicroAd Advent Calendar 2018 の11日目の記事です。

ビューアブルインプはネット広告の効果測定の一つ重要な指標ですので、弊社も導入しています。
いくつ計測手法は存在していますが、本記事ではそのなかの一つ、intersection-observer API を使った手法を紹介したいと思います。

早速 Demo

Domoコードをhtml形式ファイルに保存しておいて、ブラウザで開いてみてどうですか。

<!DOCTYPE html>
<html lang="en">
<body>
<table height="100"></table>
<p>Scroll down</p>
<table height="300"></table>
<p>Scroll down</p>
<table height="300"></table>
<p id="status" style='color:blue'></p>
<img id="target" 
src="https://cdn.qiita.com/assets/public/qiitan-adcal-2018-397463c0775635f7c02fbde287ecb110.png">
<script>
var viewableImpMeasure = function () {
    var status = document.getElementById("status");
    if (typeof IntersectionObserver != "function") {
        status.innerText = "Your browser is not supported!";
        return;
    }
    var target = document.getElementById("target");
    var init = { threshold: 0.5 };
    var timerId = undefined;
    new IntersectionObserver(function (entries, observer) {
        console.log("ratio=" + entries[0].intersectionRatio);
        if (entries[0].intersectionRatio >= init.threshold) {
            if (timerId == undefined) {
                timerId = setTimeout(function () {
                    observer.unobserve(target);
                    observer.disconnect();
                    status.innerText = "Viewable impression measured!"
                }, 1000);
            }
        } else {
            if (timerId != undefined) {
                clearTimeout(timerId);
                timerId = undefined;
            }
        }
    }, init).observe(target);
    status.innerText = "Now measuring...";
};
if (window.addEventListener) {
    window.addEventListener("DOMContentLoaded", viewableImpMeasure , false);
} else if (window.attachEvent) {
    window.attachEvent("onDOMContentLoaded", viewableImpMeasure);
}
</script>
</body>
</html>

スクロールしてページの底部にしばらく経ってからから Viewable impression measured! のような文字が表示されたのでしょうか？
ブラウザがSafariやIE場合は、残念ながら現時点 intersection-observer API はまだサポートしてないため計測できません、Your browser is not supported が表示されます。

詳細

それでは、実装の詳細を解説します。

if (typeof IntersectionObserver != "function") {
    status.innerText = "Your browser is not supported!";
    return;
}

↑ IntersectionObserverを対応していないブラウザが存在しているので、そのチェックを事前に行います。

var init = { threshold: 0.5 };

↑IntersectionObserverのイベントの発火条件を定義しています。
監視対象の可視面積が50%以下から50%以上に、もしくは50%以上から50%以下に変わった時にイベントが発生するように定義をしています。

if (entries[0].intersectionRatio >= init.threshold) {
    if (timerId == undefined) {
        timerId = setTimeout(function () {
            observer.unobserve(target);
            observer.disconnect();
            status.innerText = "Viewable impression measured!"
        }, 1000);
    }
}

↑ イベントが発生したら、ディスプレイ広告に関するビューアブルインプ判定を行います。
判定条件はこちら
1. 広告ピクセルの50%以上がビューアブルなスペースに表示される
2. 1秒(=1000ミリ秒)以上連続して上記ピクセルが表示される
一度ビューアブルインプが計測できたら、継続監視する必要がないので unobserve(target)とobserver.disconnect()で監視解除します。


else {
    if (timerId != undefined) {
        clearTimeout(timerId);
        timerId = undefined;
    }
}

↑ 可視面積が50%以上から50%以下に変わった時にはビューアブル状態の継続時間をリセットします。

if (window.addEventListener) {
    window.addEventListener("load", viewableImpMeasure , false);
} else if (window.attachEvent) {
    window.attachEvent("onload", viewableImpMeasure);
}

↑ 計測キックオフの実装です。

まとめ

intersection-observer API を使ってディスプレイ広告のビューアブルインプは簡単に測定できますが、サポートしていないブラウザは別途対応する必要があります。

以上、少しでもお役に立てれば幸いです！

IntersectionObserverを使ってビューアブルインプ計測を試しました

はじめに

早速 Demo

詳細

まとめ

参考