Outstream Video Support #1082

protonate · 2017-03-27T21:49:38Z

Type of change

Feature

Description of change

As media formats proliferate a Renderer type is proposed. This provides a set of functions to specify, load, configure and utilize a custom 3rd party renderer for a given bid's media format.

An initial use case for Renderer is support for outstream video as shown in this change. Here we are assuming the renderer_url is a value returned on a Bid response object, and if present the Bid response is assumed to be an outstream video ad in need of a custom renderer.

A renderer source could also be specified at the adapter or publisher level, which can be done by setting the rendererInstance.url value appropriately.

To implement in a bidder adapter, import Renderer module:

import { Renderer } from 'src/renderer';

A renderer can be installed on a bid response in a bidder adapter by using the static Renderer.install method. This takes an object with the following properties:

  {
    url: 'path/to/renderer.js'
    config: { example: 'an object to configure renderer options' },
    id: 1, // an id may be present in the renderer info returned on a bid
    callback: () => return 'function to call once renderer has loaded'
  }

An example looks like:

bid.renderer = Renderer.install({
  id: ad.renderer_id,
  url: ad.renderer_url,
  config: { adText: `AppNexus Outstream Video Ad via Prebid.js` },
  callback: () => onOutstreamRendererLoaded.call(null, bid)
});

Once a renderer is installed on a bid, the renderer can set it's render function using setRender():

  function onOutstreamRendererLoaded(bid) {
    bid.renderer.setRender(outstreamRender);
  }

The render function will receive the bid response object and the renderer can be called with it:

  function outstreamRender(bid) {
    window.ANOutstreamVideo.renderAd({
      tagId: bid.adResponse.tag_id,
      sizes: [bid.getSize().split('x')],
      targetId: bid.adUnitCode, // target div id to render video
      uuid: bid.adResponse.uuid,
      adResponse: bid.adResponse,
      rendererOptions: bid.renderer.getConfig()
    }, handleOutstreamRendererEvents.bind(bid));
  }

For the AppNexus Outstream Video renderer, the second argument takes a function that is invoked on events. We use this to call the Renderer's handleVideoEvent method:

  function handleOutstreamRendererEvents(id, eventName) {
    const bid = this;
    bid.renderer.handleVideoEvent({ id, eventName });
  }

A renderer can register event handlers using a hash with keys mapped to the renderers event names:

bid.renderer.setEventHandlers({
  impression: () => utils.logMessage('AppNexus outstream video impression event'),
  loaded: () => utils.logMessage('AppNexus outstream video loaded event'),
  ended: () => {
    utils.logMessage('AppNexus outstream renderer video event');
    document.querySelector(`#${bid.adUnitCode}`).style.display = 'none';
  }
});

protonate · 2017-04-06T18:02:43Z

@mkendall07 steel thread version for review

mkendall07 · 2017-04-12T17:24:04Z

src/prebid.js

+};
+
+function performRenderViaRenderer(doc, adObject) {
+  window.apntag = { debug: true };


this logic is specific to appnexus, we should move it into the adapter or into a renderer interface type.

mkendall07 · 2017-04-12T17:25:08Z

src/prebid.js

+  // use renderer defined by creative or default to ANOutstreamVideo.js
+  loadScript(
+    adObject.rendererUrl ||
+    'http://cdn.adnxs.com/renderer/video/ANOutstreamVideo.js'


make protocoless to support https

mkendall07 · 2017-04-12T17:26:17Z

test/spec/e2e/gpt-examples/gpt_outstream.html

+          bidder: 'appnexusAst',
+          params: {
+            placementId: '5768085',
+            video: {


I wonder if we could move these params up to the adunit level?

mkendall07 · 2017-04-12T17:28:42Z

src/prebid.js

-        var url = adObject.adUrl;
-        var ad = adObject.ad;
+        const { height, width, ad, mediaType } = adObject;
+        const url = adObject.adUrl;


This can be included in the destructuring above

mkendall07 · 2017-04-12T17:30:58Z

src/prebid.js

          utils.logError(`Error trying to write ad. Ad render call ad id ${id} was prevented from writing to the main document.`);
+        } else if (mediaType === 'video' || mediaType === 'video-outstream') {


I don't think we want to render a pure video response yet, since that requires a video player

mkendall07 · 2017-04-18T00:48:21Z

integrationExamples/gpt/amp/amp_page_with_taboola_html.html

@@ -0,0 +1,180 @@
+<!doctype html>


drop this file.

mkendall07 · 2017-04-18T00:48:47Z

src/Renderer.js

@@ -0,0 +1,37 @@
+import { loadScript } from 'src/adloader';
+const utils = require('src/utils');


nit: why not import?

mkendall07 · 2017-04-18T00:51:40Z

src/adapters/appnexusAst.js

+                  tagId: bid.adResponse.tag_id,
+                  sizes: [bid.getSize().split('x')],
+                  targetId: bid.adUnitCode, // target div id to render video
+                  uuid: bid.adResponse.uuid, // is this the correct UUID ?


should work fine.

mkendall07 · 2017-04-18T00:52:34Z

src/adapters/appnexusAst.js

+                  uuid: bid.adResponse.uuid, // is this the correct UUID ?
+                  adResponse: bid.adResponse,
+                  rendererOptions: {
+                    adText: 'Prebid Outstream Video Ad'


I think we might want to default this to empty text.

mkendall07 · 2017-04-18T00:53:10Z

src/adapters/appnexusAst.js

+                  rendererOptions: {
+                    adText: 'Prebid Outstream Video Ad'
+                  }
+                }, (id, eventName) => {


Is id here uuid? If so, maybe we should make this adUnit.code instead.

mkendall07 · 2017-04-18T00:53:46Z

src/adapters/appnexusAst.js

+                });
+              });
+              bid.renderer.setEventHandlers({
+                impression: () => utils.logMessage('AppNexus outstream video impression event'),


who's firing these events?

mkendall07 · 2017-04-18T00:57:16Z

Looks great! Just a few minor changes/suggestions

mkendall07 · 2017-04-18T23:53:39Z

@protonate looks like there is a conflict.

initial appnexus outstream renderer adapter

RAD-1439

cache loadScript for renderer Renderer.install returns existing instance of renderer, if available

…m bid level data

jaiminpanchal27 · 2017-04-19T21:24:59Z

LGTM.

mkendall07 · 2017-04-19T21:32:10Z

src/adapters/appnexusAst.js

@@ -225,6 +227,26 @@ function AppnexusAstAdapter() {
    return tag && tag.ads && tag.ads.length && tag.ads.find(ad => ad.rtb);
  }

+  function outstreamRender(bid) {
+    window.ANOutstreamVideo.renderAd({


Exception would be thrown here if window.ANOutstreamVideo isn't defined but should be caught in renderAd so I guess it's alright for now.

mkendall07 · 2017-04-19T21:38:56Z

LGTM

richardhector · 2017-05-10T14:13:33Z

Hey @mkendall07 quick question: If you want to render outstream without DFP just straight by calling and rendering on the page, I took the example from postbid, modifying it to video, then getting bids returned, but don't get the ad to render. Not sure if this works for outstream in the same fashion as for display using the iFrame. Appreciate a short note.

              // If any bidders return any creatives
          if (params && params['hb_adid']) {
                    console.log("creatives returned");
            pbjs.renderAd(iframeDoc, params['hb_adid']);
          }
        }
      });
    });

  </script>

  <iframe id='dynamic_ad' FRAMEBORDER="0" SCROLLING="no" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0" ALLOWTRANSPARENCY="true" WIDTH="0" HEIGHT="0"></iframe>

* add renderer adapter type initial appnexus outstream renderer adapter * render outstream response from appnexus * trim back to steel thread * turn off istanbul * fix adUrl, move mediaType logical test * clean up * load renderer in renderAd * clean up * fix loadScript in render RAD-1439 * collapse divs on render * add Renderer class, remove render functions from prebid.js file * wip * add API to Renderer to set render function and event handlers cache loadScript for renderer Renderer.install returns existing instance of renderer, if available * add support for multiple video units, renderer options can be set from bid level data * example page edits * decruftification * import utils with es syntax * add tests * add tests * use .call instead of .bind, reduce auction time limit on example * use mock server for tests on Renderer.install * fix test * appease Travis * appease Travis some more * appease Travis some more again * outstream example create utility functions for readability * test link to use public endpoint * remove prebid key from example ad server targeting * reorder code in bidder * review notes * fix test

spormeon · 2019-07-30T14:50:28Z

is there a full list of renderer options anywhere, i cant find it in an docs only the adText one:

renderer: { options: { adText: 'Advertisement', skippable: true } },

mkendall07 added the in progress label Mar 27, 2017

protonate force-pushed the feature/outstream-video branch from aad0409 to 367245b Compare April 6, 2017 17:41

protonate requested a review from mkendall07 April 6, 2017 18:02

protonate force-pushed the feature/outstream-video branch from 3056648 to fc14fec Compare April 6, 2017 18:05

protonate self-assigned this Apr 11, 2017

mkendall07 requested changes Apr 12, 2017

View reviewed changes

mjacobsonny added the video label Apr 14, 2017

protonate force-pushed the feature/outstream-video branch from 727df64 to b24f061 Compare April 17, 2017 18:06

mkendall07 requested changes Apr 18, 2017

View reviewed changes

protonate requested a review from matthewlane April 18, 2017 19:35

protonate added 17 commits April 19, 2017 09:58

add renderer adapter type

db54ae7

initial appnexus outstream renderer adapter

render outstream response from appnexus

b493ee9

trim back to steel thread

e0b5958

turn off istanbul

89244bc

fix adUrl, move mediaType logical test

3f7906f

clean up

2aa322a

load renderer in renderAd

34551c4

clean up

4f97849

fix loadScript in render

4cd91c9

RAD-1439

collapse divs on render

d7df380

add Renderer class, remove render functions from prebid.js file

0948df8

wip

b2af1fd

add API to Renderer to set render function and event handlers

782641e

cache loadScript for renderer Renderer.install returns existing instance of renderer, if available

add support for multiple video units, renderer options can be set fro…

ab2ac59

…m bid level data

example page edits

4e08e2d

decruftification

b987da8

import utils with es syntax

cc706a5

protonate added 9 commits April 19, 2017 10:09

add tests

b421bc5

add tests

59b8c00

use .call instead of .bind, reduce auction time limit on example

f76a2e2

use mock server for tests on Renderer.install

95b1bce

fix test

1b7952c

appease Travis

e77d025

appease Travis some more

45e7ff8

appease Travis some more again

b20c5d8

outstream example create utility functions for readability

2d7c7db

protonate force-pushed the feature/outstream-video branch from a7364b4 to 2d7c7db Compare April 19, 2017 17:09

protonate added 5 commits April 19, 2017 11:52

test link to use public endpoint

4ee0fcc

remove prebid key from example ad server targeting

cbb7b3d

reorder code in bidder

4625197

review notes

cae9e65

fix test

c831fea

jaiminpanchal27 self-requested a review April 19, 2017 21:24

mkendall07 reviewed Apr 19, 2017

View reviewed changes

jaiminpanchal27 approved these changes Apr 19, 2017

View reviewed changes

mkendall07 approved these changes Apr 19, 2017

View reviewed changes

mkendall07 merged commit 2198683 into master Apr 19, 2017

mkendall07 removed the in progress label Apr 19, 2017

mkendall07 deleted the feature/outstream-video branch April 19, 2017 21:41

curlyblueeagle mentioned this pull request Aug 23, 2018

Usage of Renderer for Display Ads #3015

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Outstream Video Support #1082

Outstream Video Support #1082

protonate commented Mar 27, 2017 •

edited

Loading

protonate commented Apr 6, 2017

mkendall07 Apr 12, 2017

mkendall07 Apr 12, 2017

mkendall07 Apr 12, 2017

mkendall07 Apr 12, 2017

mkendall07 Apr 12, 2017

mkendall07 Apr 18, 2017

mkendall07 Apr 18, 2017

mkendall07 Apr 18, 2017

mkendall07 Apr 18, 2017

mkendall07 Apr 18, 2017

mkendall07 Apr 18, 2017

mkendall07 commented Apr 18, 2017

mkendall07 commented Apr 18, 2017

jaiminpanchal27 commented Apr 19, 2017

mkendall07 Apr 19, 2017

mkendall07 commented Apr 19, 2017

richardhector commented May 10, 2017

spormeon commented Jul 30, 2019

		utils.logError(`Error trying to write ad. Ad render call ad id ${id} was prevented from writing to the main document.`);
		} else if (mediaType === 'video' \|\| mediaType === 'video-outstream') {

		@@ -0,0 +1,37 @@
		import { loadScript } from 'src/adloader';
		const utils = require('src/utils');

Outstream Video Support #1082

Outstream Video Support #1082

Conversation

protonate commented Mar 27, 2017 • edited Loading

Type of change

Description of change

protonate commented Apr 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mkendall07 commented Apr 18, 2017

mkendall07 commented Apr 18, 2017

jaiminpanchal27 commented Apr 19, 2017

Choose a reason for hiding this comment

mkendall07 commented Apr 19, 2017

richardhector commented May 10, 2017

spormeon commented Jul 30, 2019

protonate commented Mar 27, 2017 •

edited

Loading