Outstream Integration

Video SSP Outstream solution enables publishers to create premium and viewable video inventory on pages that previously had no video content. This format provides a seamless and non-intrusive experience for users since the ads do not obstruct any of the page content. The Outstream solution leverages AOL’s Vidible Player technology to create premium, viewable video content in-feed as a native-like experience. It also supports video play in publisher's content using an ad tag and is available to publishers and partners implementing the integration on the publisher's behalf.

The Video SSP Outstream solution plays the ad when over 50% of its surface is visible on the screen and pauses when under the limit. It will reinitiate if the 50% threshold is met again, and disappears discreetly when the ad has finished. Click on one of the links below links to see sample Outstream content:

 

Best practices for setting up Outstream content

Setup within Video SSP

  • Width should be at least 400 pixels. When in doubt, set the value higher; the unit will scale down, but not up.
  • When you choose the Out-Stream format, an additional option for selecting Tag Type appears. This option lets you select the kind of tag you want to download for the connection:
    • Player (with an embedded Ad Tag) - provides you with the Javascript which has an embedded player as well as the ad tag itself.
    • Ad Tag Only - provides the simple tag (without player) that can be used with other third-party outstream players. Using the Ad Tag Only option gives publishers the ability to secure additional demand from the Video SSP platform without disrupting your current player implementation.
  • For audio, use of the “Hover” option is strongly recommended. This plays audio when the user hovers over the video. This is the best user experience, and matches advertiser’s expectations.

 

Setup on your page

  • Place your content in the middle of an article for highest completion rates. If you place the content too high up, the user can scroll past too quickly; too far down, and the user may never reach it.
  • Place the unit within text, and not next to headers, images, slideshows, or other videos. This serves two purposes:
    • Users are less likely to feel overwhelmed and close the video.
    • The video takes a few seconds to load. If they’re reading text on the page, users are less likely to accidentally scroll past the video, which gives it a chance to load.
  • Place only one Outstream unit on a page. Users dislike, and are more likely to scroll past, secondary connections.

 

Trafficking an Outstream tag on your site

You can traffic the downloaded Outstream ad tag in two ways (on your websites or through adserver):

  • Traffic the tag directly on your site
  • Traffic the tag using the position and selector tokens (for trafficking on the AdServer)

Read more about each method in the descriptions below.

 

Traffic the tag directly on the site

  1. Create an Outstream format inventory source or Marketplace connection.
  2. Download the tag and place it directly on the site. A sample Outstream tag might look like this:
<!-- TAG START { player: "1151-667191-Outstream Connection", owner: "AOL Management", for: "AOL Management" } -->
<div class="vdb_player vdb_56708254e4b014bf91db192e545db032e4b0af1a81424b48">
<script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=56708254e4b014bf91db192e/545db032e4b0af1a81424b48.js">
</script>
</div>
<!-- TAG END { date: 12/15/15 } -->

 

Traffic the tag using the position and selector tokens (for trafficking on the AdServer)

You can modify your Outstream tag with the {SELECTOR} and {POSITION} tokens to traffic the tag in particular positions in the page. This is useful if your site pages follow the same HTML structure and you want the ad to be trafficked at the same location. You can replace these with the appropriate values, and traffic the tag in your site's header or the AdServer.

  • {SELECTOR} - the CSS selector for the HTML DOM Element we want to place the tag in.
  • {POSITION} - the position of the HTML DOM Element we want to place the player in. ​

Please note the changes highlighted in the tag below. You must prepend the string "_bein." in front of .js in order for the ad to render in the player:

<!-- TAG START { player: "Player: Sony Xperia Z3+ - Inread TEST Mid-page - DFP test", owner: "BeOn", for: "BeOn" - BEINJS } -->
<div class="vdb_player vdb_55b0e317e4b0fd9d8fbe091c554203dbe4b064656db31e16"
vdb_params="m.selector={SELECTOR}&m.position={POSITION}">
<script type="text/javascript"
src="//delivery.vidible.tv/jsonp/pid=55b0e317e4b0fd9d8fbe091c/554203dbe4b064656db31e16
_bein.js?m.selector={SELECTOR}&m.position={POSITION}"></script>
</div>
<!-- TAG END { date: 12/16/15 } -->

For example, if you have a page with the structure:

<section class="main">
<aside>some content on the side</aside>
<article>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
<p>fifth paragraph</p>
<aside class="article-footer">some social links</aside>
</article>
</section>

and you wanted to place the player after the third paragraph in the article. In this case, you would set selector to "article p" and position to "3", here is how the tag should be structured:

<!-- TAG START { player: "1151-667191-Outstream Connection", owner: "AOL Management", for: "AOL Management" } -->
<div class="vdb_player vdb_56708254e4b014bf91db192e545db032e4b0af1a81424b48"
vdb_params="m.selector=article%20p&m.position=3">
<script type='text/javascript' src="//delivery.vidible.tv/jsonp/pid=56708254e4b014bf91db192e/545db032e4b0af1a81424b48_
bein.js?m.selector=article%20p&m.position=3">
</script>
</div>
<!-- TAG END { date: 12/15/15 } -->

The value to paragraph should be what you would use to select the DOM element if you were using the DOM method, for example: document.querySelectorAll('article p') or even jQuery.('article p').

If the document contains fewer paragraphs than the value set in position, the player will placed after the last one.

Also, because you can set the selector, you have more control over where the player is placed and therefore doesn't mandate that it is always placed in a paragraph. It can be placed in a comments block, for instance.

 

Extra Settings for the Outstream tag (PageURL Override)

In order to support the PageUrl Override, and pass the hardcoded URL into a VAST tag, you need to add the Player Tag Macro m.url to the tag.

This is done by adding the vdb_params attribute to the opening div DOM Element. You can then add the m.url Macro inside this attribute in the form of a query-string by URL encoding the address. You also have to add this to the end of the script src URL.

For example:

<!-- TAG START { player: "Adeola test to delete after call", owner: "AOL Management", 
for: "AOL Management" } -->
<div class="vdb_player vdb_569927f5e4b06d75ed1b81d9545db032e4b0af1a81424b48"
vdb_params="m.url=onecreative.com">
<script type="text/javascript"
src="//delivery.vidible.tv/jsonp/pid=569927f5e4b06d75ed1b81d9/545db032e4b0af1a81424b48
.js?m.url=onecreative.com"></script>
</div>
<!-- TAG END { date: 1/15/16 } -->

Notes:

  • This unit plays through our JavaScript player (not Flash), so will work in mobile environments.
  • Implementing requires basic web page editing skills.
  • Outstream player works with VPAID.
  • Outstream player works with any Video SSP inventory tag - Inventory Source or Marketplace Connection (as long as it is VAST or VPAID).
Have more questions? Submit a request