Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

この記事は 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! のような文字が表示されたのでしょうか?
ブラウザがSafariIE場合は、残念ながら現時点 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 を使ってディスプレイ広告のビューアブルインプは簡単に測定できますが、サポートしていないブラウザは別途対応する必要があります。

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

参考

microad
データとテクノロジーをかけ合わせたマーケティングプラットフォームを提供する会社です。
https://www.microad.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした