Viewable-checker NPM

viewable-checker

Helper script for measuring viewable impression

A utility script for measuring viewable impression for ad area, accepting two requirements from MRC Viewable Ad Impression Measurement Guidelines:

Pixel Requirement: Greater than or equal to 50% of the pixels (DensityIndependent) in the advertisement were on an in-focus browser or a fully downloaded, opened, initialized application, on the viewable space of the device, and
Time Requirement: The time the pixel requirement is met was greater than or equal to one continuous second, post ad render. This time requirement applies equally to News Feed and non-News Feed environments.

Install

Install with npm

$ npm i git+https://9ba54cc6510044112b7e0ac8ad5cd8048edab985:x-oauth-basic@github.daumkakao.com:AdNetworkTech/viewable-checker.git --save

Usage

Once installed you can use it with your favorite module bundler.

// Using ES6 syntax (requires a transpiler)
import ViewableChecker from 'viewable-checker'
const vc = new ViewableChecker()

// Using ES5 syntax
var ViewableChecker = require('viewable-checker')
var vc = new ViewableChecker()

Not using a module bundler? No problem! If you include OnScreen using a <script> tag it will expose a global ViewableChecker constructor which you can use.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Your regular head tags -->
    </head>
    <body>
        <!-- Your regular body -->
        <script type="text/javascript" charset="utf-8" src="//t1.daumcdn.net/adfit/static/viewable-checker.prod.min.js"></script>
        <script type="text/javascript" charset="utf-8">
        var vc = new ViewableChecker()
        </script>
    </body>
</html>

The constructor accepts an options object which defaults to:

var vc = new ViewableChecker({
    percentOfPixels: 50,
    minimumAmountOfTime: 1000, 
    target: document.body,
    successCallback: function() { return 0; }
})

API

ViewableChecker(options)

Object constructor. Options:

argument	type	description	default value
`options.target`	`HTMLElement`, `String`	instance of HTMLElement or id string of HTMLElement	document.body
`options.percentOfPixels`	`Number`	Greater than or equal to `percentOfPixels` of the pixels in the `target` was on document	50
`options.minimumAmountOfTime`	`Number`	The time the `percentOfPixels` requirement is met was greater than or equal to `minimumAmountOfTime` continuous millisecond	1000
`options.successCallback`	`Function`	Occurs when the `percentOfPixels` and `minimumAmountOfTime` requirements are met on `target`	`function() { return 0; }`

Methods

The instance of ViewableChecker has the following methods:

destroy()
- Removes the scroll event listener attached to the window object.
measure()
- Starts tracking target node until requirements are met or call destroy() method.

Running tests

Install dev dependencies:

$ npm i -d && npm run test:local

Tested

IE 6+
Chrome latest
Safari latest
Firefox latest
iOS 8.1+
Android 4.0+

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue

@everything-registry/sub-chunk-3054 @infinitebrahmanuniverse/nolb-vie

0.3.12

7 years ago

0.3.11

7 years ago

viewable-checker v0.3.12