diff --git a/integrationExamples/postbid/bidViewabilityIO_example.html b/integrationExamples/postbid/bidViewabilityIO_example.html
new file mode 100644
index 00000000000..513696f411c
--- /dev/null
+++ b/integrationExamples/postbid/bidViewabilityIO_example.html
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/modules/bidViewabilityIO.js b/modules/bidViewabilityIO.js
new file mode 100644
index 00000000000..f64e3c87785
--- /dev/null
+++ b/modules/bidViewabilityIO.js
@@ -0,0 +1,85 @@
+import { config } from '../src/config.js';
+import * as events from '../src/events.js';
+import { EVENTS } from '../src/constants.json';
+import { logMessage } from '../src/utils.js';
+
+const MODULE_NAME = 'bidViewabilityIO';
+const CONFIG_ENABLED = 'enabled';
+
+// IAB numbers from: https://support.google.com/admanager/answer/4524488?hl=en
+const IAB_VIEWABLE_DISPLAY_TIME = 1000;
+const IAB_VIEWABLE_DISPLAY_LARGE_PX = 242000;
+export const IAB_VIEWABLE_DISPLAY_THRESHOLD = 0.5
+export const IAB_VIEWABLE_DISPLAY_LARGE_THRESHOLD = 0.3;
+
+const CLIENT_SUPPORTS_IO = window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype &&
+ 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+
+const supportedMediaTypes = [
+ 'banner'
+];
+
+export let isSupportedMediaType = (bid) => {
+ return supportedMediaTypes.includes(bid.mediaType);
+}
+
+// returns options for the iO that detects if the ad is viewable
+export let getViewableOptions = (bid) => {
+ if (bid.mediaType === 'banner') {
+ return {
+ root: null,
+ rootMargin: '0px',
+ threshold: bid.width * bid.height > IAB_VIEWABLE_DISPLAY_LARGE_PX ? IAB_VIEWABLE_DISPLAY_LARGE_THRESHOLD : IAB_VIEWABLE_DISPLAY_THRESHOLD
+ }
+ }
+}
+
+// markViewed returns a function what will be executed when an ad satisifes the viewable iO
+export let markViewed = (bid, entry, observer) => {
+ return () => {
+ observer.unobserve(entry.target);
+ events.emit(EVENTS.BID_VIEWABLE, bid);
+ logMessage(`id: ${entry.target.getAttribute('id')} code: ${bid.adUnitCode} was viewed`);
+ }
+}
+
+// viewCallbackFactory creates the callback used by the viewable IntersectionObserver.
+// When an ad comes into view, it sets a timeout for a function to be executed
+// when that ad would be considered viewed per the IAB specs. The bid that was rendered
+// is passed into the factory, so it can pass it into markViewed, so that it can be included
+// in the BID_VIEWABLE event data. If the ad leaves view before the timer goes off, the setTimeout
+// is cancelled, an the bid will not be marked as viewed. There's probably some kind of race-ish
+// thing going on between IO and setTimeout but this isn't going to be perfect, it's just going to
+// be pretty good.
+export let viewCallbackFactory = (bid) => {
+ return (entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ logMessage(`viewable timer starting for id: ${entry.target.getAttribute('id')} code: ${bid.adUnitCode}`);
+ entry.target.view_tracker = setTimeout(markViewed(bid, entry, observer), IAB_VIEWABLE_DISPLAY_TIME);
+ } else {
+ logMessage(`id: ${entry.target.getAttribute('id')} code: ${bid.adUnitCode} is out of view`);
+ if (entry.target.view_tracker) {
+ clearTimeout(entry.target.view_tracker);
+ logMessage(`viewable timer stopped for id: ${entry.target.getAttribute('id')} code: ${bid.adUnitCode}`);
+ }
+ }
+ });
+ };
+};
+
+export let init = () => {
+ events.on(EVENTS.AD_RENDER_SUCCEEDED, ({doc, bid, id}) => {
+ // read the config for the module
+ const globalModuleConfig = config.getConfig(MODULE_NAME) || {};
+ // do nothing if module-config.enabled is not set to true
+ // this way we are adding a way for bidders to know (using pbjs.getConfig('bidViewability').enabled === true) whether this module is added in build and is enabled
+ if (globalModuleConfig[CONFIG_ENABLED] && CLIENT_SUPPORTS_IO && isSupportedMediaType(bid)) {
+ let viewable = new IntersectionObserver(viewCallbackFactory(bid), getViewableOptions(bid));
+ let element = document.getElementById(bid.adUnitCode);
+ viewable.observe(element);
+ }
+ });
+}
+
+init()
diff --git a/modules/bidViewabilityIO.md b/modules/bidViewabilityIO.md
new file mode 100644
index 00000000000..7a0468cd5f3
--- /dev/null
+++ b/modules/bidViewabilityIO.md
@@ -0,0 +1,41 @@
+# Overview
+
+Module Name: bidViewabilityIO
+
+Purpose: Emit a BID_VIEWABLE event when a bid becomes viewable using the browsers IntersectionObserver API
+
+Maintainer: adam.prime@alum.utoronto.ca
+
+# Description
+- This module will trigger a BID_VIEWABLE event which other modules, adapters or publisher code can use to get a sense of viewability
+- You can check if this module is part of the final build and whether it is enabled or not by accessing ```pbjs.getConfig('bidViewabilityIO')```
+- Viewability, as measured by this module is not perfect, nor should it be expected to be.
+- The module does not require any specific ad server, or an adserver at all.
+
+# Limitations
+
+- Currently only supports the banner mediaType
+- Assumes that the adUnitCode of the ad is also the id attribute of the element that the ad is rendered into.
+- Does not make any attempt to ensure that the ad inside that element is itself visible. It assumes that the publisher is operating in good faith.
+
+# Params
+- enabled [required] [type: boolean, default: false], when set to true, the module will emit BID_VIEWABLE when applicable
+
+# Example of consuming BID_VIEWABLE event
+```
+ pbjs.onEvent('bidViewable', function(bid){
+ console.log('got bid details in bidViewable event', bid);
+ });
+
+```
+
+# Example of using config
+```
+ pbjs.setConfig({
+ bidViewability: {
+ enabled: true,
+ }
+ });
+```
+
+An example implmentation without an ad server can be found in integrationExamples/postbid/bidViewabilityIO_example.html
diff --git a/test/spec/modules/bidViewabilityIO_spec.js b/test/spec/modules/bidViewabilityIO_spec.js
new file mode 100644
index 00000000000..815b66a7b6c
--- /dev/null
+++ b/test/spec/modules/bidViewabilityIO_spec.js
@@ -0,0 +1,149 @@
+import * as bidViewabilityIO from 'modules/bidViewabilityIO.js';
+import { config } from 'src/config.js';
+import * as events from 'src/events.js';
+import * as utils from 'src/utils.js';
+import * as sinon from 'sinon';
+import {expect, spy} from 'chai';
+import * as prebidGlobal from 'src/prebidGlobal.js';
+import { EVENTS } from 'src/constants.json';
+import adapterManager, { gdprDataHandler, uspDataHandler } from 'src/adapterManager.js';
+import parse from 'url-parse';
+
+describe('#bidViewabilityIO', function() {
+ const makeElement = (id) => {
+ const el = document.createElement('div');
+ el.setAttribute('id', id);
+ return el;
+ }
+ const banner_bid = {
+ adUnitCode: 'banner_id',
+ mediaType: 'banner',
+ width: 728,
+ height: 90
+ };
+
+ const large_banner_bid = {
+ adUnitCode: 'large_banner_id',
+ mediaType: 'banner',
+ width: 970,
+ height: 250
+ };
+
+ const video_bid = {
+ mediaType: 'video',
+ };
+
+ const native_bid = {
+ mediaType: 'native',
+ };
+
+ it('init to be a function', function() {
+ expect(bidViewabilityIO.init).to.be.a('function')
+ });
+
+ describe('isSupportedMediaType tests', function() {
+ it('banner to be supported', function() {
+ expect(bidViewabilityIO.isSupportedMediaType(banner_bid)).to.be.true
+ });
+
+ it('video not to be supported', function() {
+ expect(bidViewabilityIO.isSupportedMediaType(video_bid)).to.be.false
+ });
+
+ it('native not to be supported', function() {
+ expect(bidViewabilityIO.isSupportedMediaType(native_bid)).to.be.false
+ });
+ })
+
+ describe('getViewableOptions tests', function() {
+ it('normal banner has expected threshold in options object', function() {
+ expect(bidViewabilityIO.getViewableOptions(banner_bid).threshold).to.equal(bidViewabilityIO.IAB_VIEWABLE_DISPLAY_THRESHOLD);
+ });
+
+ it('large banner has expected threshold in options object', function() {
+ expect(bidViewabilityIO.getViewableOptions(large_banner_bid).threshold).to.equal(bidViewabilityIO.IAB_VIEWABLE_DISPLAY_LARGE_THRESHOLD)
+ });
+
+ it('video bid has undefined viewable options', function() {
+ expect(bidViewabilityIO.getViewableOptions(video_bid)).to.be.undefined
+ });
+
+ it('native bid has undefined viewable options', function() {
+ expect(bidViewabilityIO.getViewableOptions(native_bid)).to.be.undefined
+ });
+ })
+
+ describe('markViewed tests', function() {
+ let sandbox;
+ const mockObserver = {
+ unobserve: sinon.spy()
+ };
+ const mockEntry = {
+ target: makeElement('target_id')
+ };
+
+ beforeEach(function() {
+ sandbox = sinon.sandbox.create();
+ })
+
+ afterEach(function() {
+ sandbox.restore()
+ })
+
+ it('markViewed returns a function', function() {
+ expect(bidViewabilityIO.markViewed(banner_bid, mockEntry, mockObserver)).to.be.a('function')
+ });
+
+ it('markViewed unobserves', function() {
+ const emitSpy = sandbox.spy(events, ['emit']);
+ const func = bidViewabilityIO.markViewed(banner_bid, mockEntry, mockObserver);
+ func();
+ expect(mockObserver.unobserve.calledOnce).to.be.true;
+ expect(emitSpy.calledOnce).to.be.true;
+ // expect(emitSpy.firstCall.args).to.be.false;
+ expect(emitSpy.firstCall.args[0]).to.eq(EVENTS.BID_VIEWABLE);
+ });
+ })
+
+ describe('viewCallbackFactory tests', function() {
+ let sandbox;
+
+ beforeEach(function() {
+ sandbox = sinon.sandbox.create();
+ })
+
+ afterEach(function() {
+ sandbox.restore()
+ })
+
+ it('viewCallbackFactory returns a function', function() {
+ expect(bidViewabilityIO.viewCallbackFactory(banner_bid)).to.be.a('function')
+ });
+
+ it('viewCallbackFactory function does stuff', function() {
+ const logMessageSpy = sandbox.spy(utils, ['logMessage']);
+ const mockObserver = {
+ unobserve: sandbox.spy()
+ };
+ const mockEntries = [{
+ isIntersecting: true,
+ target: makeElement('true_id')
+ },
+ {
+ isIntersecting: false,
+ target: makeElement('false_id')
+ },
+ {
+ isIntersecting: false,
+ target: makeElement('false_id')
+ }];
+ mockEntries[2].target.view_tracker = 8;
+
+ const func = bidViewabilityIO.viewCallbackFactory(banner_bid);
+ func(mockEntries, mockObserver);
+ expect(mockEntries[0].target.view_tracker).to.be.a('number');
+ expect(mockEntries[1].target.view_tracker).to.be.undefined;
+ expect(logMessageSpy.lastCall.lastArg).to.eq('viewable timer stopped for id: false_id code: banner_id');
+ });
+ })
+});