はじめに
この記事は 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);
}
}
↑ イベントが発生したら、ディスプレイ広告に関するビューアブルインプ判定を行います。
判定条件はこちら
- 広告ピクセルの
50%以上がビューアブルなスペースに表示される - 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 を使ってディスプレイ広告のビューアブルインプは簡単に測定できますが、サポートしていないブラウザは別途対応する必要があります。
以上、少しでもお役に立てれば幸いです！