In-Banner: Small Player for SSPs and Ad Networks

StreamRail JavaScript SDK

A rich set of client-side functionality for adding video to your website, app, or SSP

The following is a copy/paste example of a third-party creative that may be used with any SSP (e.g. AppNexus, etc.).

copy

<script>
  window.srAsyncInit = function() {
    SR({
      partnerID: 'your-streamrail-api-key',
      muted: true,
      content: {
        linkUrl: 'http://www.streamrail.com/',
        url: 'https://www.streamrail.com/videos/new/bg.mp4',
        title: 'streamrail website'
      },
      hideContentBeforePreRoll: true,
      autoplay: true,
      loop: true,
      breakingAds: {
            enabled: true,
            hideContentControls: true
	  },
      ads: {
        schedule: [{
          position: 'pre-roll',
          server: {
            tag: 'https://ssp.streamrail.net/ssp/vpaid/57d66a610239730002000001/585bbadd0cbb31000203b4ef?cb=[CB]&width=[WIDTH]&height=[HEIGHT]&dnt=[DO_NOT_TRACK]&sub_id=[SUB_ID]&ip=[IP]&ua=[UA]&page_url=[PAGE_URL]'
          }
        }]
      },
      macros: {
        rand: Math.random(),
        cb: '${CACHEBUSTER}',
        publisher: '${REFERER_URL}',
        site: '${REFERER_URL}',
        ctd: '${TAG_ID}',
        deviceid: '${DEVICE_AAID}${DEVICE_APPLE_IDA}',
        carrier: '${CARRIER_ID}',
        lat: '${GEO_LAT}',
        lon: '${GEO_LON}',
        width: '${WIDTH}',
        height: '${HEIGHT}',
        ip: '${USER_IP}',
        ua: '${USER_AGENT}',
        pubid: '${PUBLISHER_ID}',
        sellerid: '${SELLER_MEMBER_ID}',
        placementid: '${TAG_ID}',
        pageUrl: '${REFERER_URL}'
      },
      width: '${WIDTH}',
      height: '${HEIGHT}',
    });
  };

  (function(d, s, id){
     var js, srjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://sdk.streamrail.com/player/sr.ads.js";
     srjs.parentNode.insertBefore(js, srjs);
   }(document, 'script', 'streamrail-jssdk'));
</script>

Generating a Creative for an SSP (e.g. AppNexus)

In this example, we will learn how to:

  • Generate a creative that contains a StreamRail player for playing in-banner video ads in SSPs
  • Pass important SSP Macros to the StreamRail player
  • Access reporting data based on SSP Macros through StreamRail's admin platform

Set Up a Creative on your SSP

  • 1

    Create the ad creative on your SSP.

    Under "Creative Content" on the SSP management system, choose the "Third-party" tag.
  • 2

    Set up your player.

    To generate the creative, all you need is your ad tag URL (e.g. LiveRail, Adapt.v, SpotX, etc.) and your StreamRail API key.
  • 3

    Paste the script into your creative.

    The following snippet of code will provide the basic version of a StreamRail creative for AppNexus, where the options are set to their most common defaults. Set up your player as you wish (e.g. change the video content, VAST tag URL and partnerID). Once finished, you should copy/paste it directly as your HTML for the creative on your SSP management system under "tag:"
    copy
    
    <script>
      window.srAsyncInit = function() {
        SR({
          partnerID: 'your-streamrail-api-key',
          muted: true,
          content: {
            linkUrl: 'http://www.streamrail.com/',
            url: 'https://www.streamrail.com/videos/new/bg.mp4',
            title: 'streamrail website'
          },
          hideContentBeforePreRoll: true,
          autoplay: true,
          loop: true,
          breakingAds: {
                enabled: true,
                hideContentControls: true
    	  },
          ads: {
            schedule: [{
              position: 'pre-roll',
              server: {
                tag: 'https://ssp.streamrail.net/ssp/vpaid/57d66a610239730002000001/585bbadd0cbb31000203b4ef?cb=[CB]&width=[WIDTH]&height=[HEIGHT]&dnt=[DO_NOT_TRACK]&sub_id=[SUB_ID]&ip=[IP]&ua=[UA]&page_url=[PAGE_URL]'
              }
            }]
          },
          macros: {
            rand: Math.random(),
            cb: '${CACHEBUSTER}',
            publisher: '${REFERER_URL}',
            site: '${REFERER_URL}',
            ctd: '${TAG_ID}',
            deviceid: '${DEVICE_AAID}${DEVICE_APPLE_IDA}',
            carrier: '${CARRIER_ID}',
            lat: '${GEO_LAT}',
            lon: '${GEO_LON}',
            width: '${WIDTH}',
            height: '${HEIGHT}',
            ip: '${USER_IP}',
            ua: '${USER_AGENT}',
            pubid: '${PUBLISHER_ID}',
            sellerid: '${SELLER_MEMBER_ID}',
            placementid: '${TAG_ID}',
            pageUrl: '${REFERER_URL}'
          },
          width: '${WIDTH}',
          height: '${HEIGHT}',
        });
      };
    
      (function(d, s, id){
         var js, srjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://sdk.streamrail.com/player/sr.ads.js";
         srjs.parentNode.insertBefore(js, srjs);
       }(document, 'script', 'streamrail-jssdk'));
    </script>
    
    


Let's note a couple of things about this setup:

  • We have set muted: true to have the ad start muted.
  • We have set loop: true to have the ad and content video restart when the content video ends.
  • We have set breakingAds: { enabled: true }. This setting preloads the ad in the background and replaces the content when the ad is ready in a repeated fashion (i.e. if it takes 10 seconds to fetch an ad and the content is 30 seconds long, we can expect to see 3 ads until the content finishes).
  • We have specified the macros attribute to the player configuration object. For example: pageUrl under macros gets its value from the ${REFERER_URL} macro. When specified in this manner, the player takes care of passing all the parameters to the ad server on the ad request. It is also passed onto Streamlytics, our reporting dashboard, where you can access the Macros Report from your account.