❤
npm
Sign UpSign In

This package has been deprecated

Author message:

no longer maintained this version

viewable-checker

0.3.12 • Public • Published

viewable-checker

JavaScript Style Guide

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+

See Also

Contributing

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

Readme

Keywords

none

Package Sidebar

Install

npm i viewable-checker

Weekly Downloads

4

Version

0.3.12

License

MIT

Last publish

Collaborators

  • kyungw00k
Try on RunKit
Report malware