Video Non-Linear Banners

What is VAST?

The IAB’s Video Ad Serving Template (VAST) specification is a universal XML schema for serving ads to digital
video players. It provides support for linear pre-roll, mid-roll and post-roll MP4/FLV/WebM video ads as well
as non-linear GIF/JPG/PNG, Flash (SWF), text, HTML, <IFRAME> and <SCRIPT> banners. In addition to this
it also specifies video tracking events, which enables measurement of video advertising consumption.

Video Non-Linear Banners

Non-linear banners will appear directly on top of the video while it’s playing. It is
most common to run horizontal banners (i.e. 468×60 or 728×90) centered along the
bottom of the video. Depending upon the capabilities of your video player you
may also be able to define a schedule that shows non-linear banners every so often for
a period of time. This can be a great way to get a little extra monetization out
of your longer videos without the interruptions that go along with having multiple
mid-roll video ads.

Getting Started

In our previous tutorial
we showed you how to run pre-roll video ads with RackSpace Cloud Files and JWPlayer.
This tutorial continues where it left off. If you aren’t already familiar with
video ads you’ll definitely want to go back and start with that tutorial first.

Considerations and Limitations

It should be noted that JWPlayer only supports Flash non-linear banners when
running in Flash mode and similarly only supports GIF/JPG/PNG non-linear banners
when running in HTML5 mode.

Every video player that we’re aware of supports GIF/JPG/PNG and Flash banners.
Some players also support third-party banners through IFRAME and JavaScript tags.
Publishers will be aware of the limitations of their chosen video player, but other
users might need to support many different players. AdvertServe allows you to deal
with this by providing non-linear banners in multiple formats so that the target video
player can select its preferred format.

In this example, we’re going to use a PNG non-linear banner so we’ll be using JWPlayer in
HTML5 mode.

Creating the Non-Linear Banner

To keep things simple, we’re going to be using a simple 468×60 graphic banner for Firefox that’s in PNG
format to create our non-linear banner.

Creating the Media

You’ll obviously want to set up a zone with multiple campaigns/media on your live web site,
but for the purpose of this example we’ll skip those extra steps.

1. Log in to your AdvertServe account.
2. Go to Media and create a new media. Select Overlay (Image/SWF/HTML/Text) for the media type.
3. Upload or enter the URL of a graphic banner in the Image URL field and select the appropriate
   Mime Type as well, which should be either GIF, JPG or PNG.
4. Enter the Width and Height of your banner, such as 468×60.
5. Then put the URL of the advertisers web site or landing page in the Redirect URL field.
6. Review your settings and make sure they look like the ones in the screenshot below.
   
7. Press the Create Media button.

Generating the VAST Tag

1. After you have successfully created the media, simply click on the Generate Code shortcut
   that appears on the top right side of the screen.
2. You’ll be presented with a VAST Tag that you’ll need to copy into the JW Player settings.
   

Video Player Configuration

Enabling non-linear banners requires only a few simple changes to the player embed
code from our previous tutorial.

Here’s the original code for reference:

<div id='playerlY5ILoW2TpH4'></div>
<script type='text/javascript'>
    jwplayer('playerlY5ILoW2TpH4').setup({
        file: 'https://e736daa9861a3da5faf4-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks.mp4',
        image: 'https://8ea7863d68099f00b39c-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks480.jpg',
        width: '480',
        height: '270',
        aspectratio: '16:9',
        stretching: 'fill',
        primary: 'flash',
        advertising: {
            client: 'vast',
            tag: 'https://tester.advertserve.com/servlet/vast2/media?mid=124&pid=0&random=__random-number__'
        }
    });
</script>

What we need to do is change primary to html5 and
then insert the follow schedule settings into the advertising
configuration:

primary: 'html5',
advertising: {
  client: 'vast',
  schedule: {
    overlay: {
      offset: 3,
      tag: 'https://tester.advertserve.com/servlet/vast2/media?mid=125&pid=0&random=__random-number__',
      type: 'nonlinear'
    }
  }
}

This tells JWPlayer that our non-linear banner should appear 3 seconds after the
video starts playing. The VAST Tag that we’re using in this example will load
a 468×60 banner. As an exercise you can try using some different sized banners
such as 300×50 or 728×90 depending on the size of your video player.

Putting all of this together here’s the final code that you should have:

<div id='playerlY5ILoW2TpH4'></div>
<script type='text/javascript'>
    jwplayer('playerlY5ILoW2TpH4').setup({
        file: 'https://e736daa9861a3da5faf4-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks.mp4',
        image: 'https://8ea7863d68099f00b39c-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks480.jpg',
        width: '480',
        height: '270',
        aspectratio: '16:9',
        stretching: 'fill',
        primary: 'html5',
        advertising: {
          client: 'vast',
          schedule: {
            overlay: {
              offset: 3,
              tag: 'https://tester.advertserve.com/servlet/vast2/media?mid=125&pid=0&random=__random-number__',
              type: 'nonlinear'
            }
          }
        }
    });
</script>

Final Thoughts

This concludes our series of blogs about the various ways to monetize videos through advertising with
VAST 2.0 compatible video players. Late to the series? You can click here
to go back and read the earlier blogs covering pre/mid/post-roll video ads, third-party
video ads and companion banners.

Ready to dive deeper? You’ll find more examples and configuration help in the official
JWPlayer video ads
documentation.

For help with other video players, see the
VAST chapter in our user manual.