Video advertising — a practical guide ⚡

Let's have a look at how you can implement different types of video advertising on your site/app!

Photo by Alexander Shatov on Unsplash

Intro

Why does anyone want to use video advertising? It's pretty simple. It pays a lot and users see the ads way more than display ads ⚡

Ok cool, so let's dive into how these things work. As an initial intro, I will suggest reading this, but here is the TLDR;

There are two types of video ads that one could implement on their site. in-stream and out-stream.

In-stream

In-stream means an ad that is being shown in the same window as a natural video on the site. If you for instance go to youtube to watch a video, you will sometimes see an ad before you can watch the video. These in-stream ads will typically be displayed before the “real” video (pre-roll) or sometimes during the video (midroll)

out-stream

Out-stream is unlike the in-stream ad, a video being shown on the page where there is no other video content. This would typically be in the middle of an article on a news site, where a video will then suddenly appear.

Implementation

The implementation of these two types of ads has both some similarities and some differences. From a technical point of view, they are very similar, and by the end, you will hopefully see why.

Like normal display ads, video ads consist of a series of protocols, that tells the different systems how to communicate. Like with display ads, this all becomes HTTP requests, since that is how all ad communication (and most of the internet) is working.

So by thinking that it’s all just a way of defining requests and sending them in a specific format, hopefully, the whole process, can be a bit more transparent, since everyone has the option to see the raw HTTP requests in their browser if they wish.

Luckily for modern developers and ad people, a lot of code has already been written in order to make working with video ads a bit easier.

Below I will describe 4 key elements in getting your video ads up and running alongside some examples. To successfully set up video advertising, we first need a player, then some sort of request/response to get the ad, and an ad server.

1. The video player

A video player is simply a piece of code (typically Javascript) that makes it possible to show a video. Think of a video player as a streaming service. It’s just a shell around the actual video playing (you’re favorite Marvel movie). Different video players will have different features and styles (exactly like your streaming services), but in general, they do the same thing. They allow you to display videos!

So what options do you have?

There can be many factors to consider when deciding which kind of video player you want. It depends greatly on your technical in-house resources and the specific features you need the video player to perform. In general, there are 3 types of video players that each has different pros and cons.

Native

In most browsers, you can use a native HTML tag to define a player. This means you don’t need any additional code to display a simple video. This is great to get started with, as it requires 0 dependencies. A video can be defined as such

<video width="400" controls>
  <source src="YOUR_VIDEO_SOURCE.mp4" type="video/mp4">
  <source src="YOUR_VIDEO_SOURCE.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

Pretty easy right? Yes, that part is pretty easy, but only if you want to show a video, you already have stored somewhere public, and you don’t need any ads to be displayed. But this is about video ads, so of course we want to add that.
This is going to require a bit more technical knowledge, but let’s see. The native <video> tag in HTML does not know anything about the VAST (I will describe VAST later) format or ads in general, so in order for us to work with that, we need a 3rd party library, to help a bit. Luckily Google can provide that.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

With that, we can now show a pre-roll video ad before our real video is about to be shown.

A working example can be seen here (maybe open the link in a new window)

Pre-roll example with Native player

In the javascript part of my example above, there is some boilerplate code to make it all work, but the interesting thing is actually this part

  adsRequest.adTagUrl =
    'https://pubads.g.doubleclick.net/gampad/ads?' +
    'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
    'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +
    'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';

The above is pretty much just an URL, that one would typically get from an ad server (in this article GAM), which will return a VAST tag, that tells the player how to show the ad. We will look a bit more into this later and see how we can create these URLs ourselves, in different contexts.

Open source

If you want more features and are willing to do some more coding you could decide to use an open-source video player. There are many out there but most noticeably I found video.js with more than 35K stars on GitHub.

With a player already developed, you’re responsible for hosting it yourself, and you are showing your customers something that you, and only you, are responsible for, even though you didn’t write the code (that's the thing with open-source).

If you want to show out-stream (where you have no video material on the page), this option is pretty easy to try out. If you on the other hand want to show pre-roll ads, you need to take into account where your other video material is hosted and how it plays together with the given video player.

A simple example of a pre-roll with video.js can be seen here, with a link to the source code below

Open-souce video.js vue 3 - StackBlitz

Below you see a screenshot of the example project.

Vue 3, video.js preroll example

This option could for some, be the easiest way to get started with showing video ads in some form or another without spending a ton of money (not counting developer salary)

Hosted

This is, as with many things, the premium solution that up front will cost you the most money. To commit to this kind of video player, your required features are most likely more than the average publisher's. Typically you also have the option to upload videos (maintain a video library) within these services. This makes them optimal for publishers with a lot of their own video content (recipes, news stories, tv-clips, sports, etc…)

There are many big players, someone I personally tried is Blue Billywig, JW player, and Brightcove.
In general, they all work in the same way. They receive/request a VAST tag at initialization, which will be used to show your video ads.

A hosted or paid-for video player will be similar (or easier) in implementation as an open-source version.

2. VAST / VPAID

VAST (Video Ad Serving Template) and VPAID (Video Player-Ad Interface Definition) are simply two formats that are widely used by video players. It's the standard way of communicating videos from one place to another (ad server to the video player for instance). VAST predates VPAID and are therefore more widely supported by video players. VPAID however, offers some newer features, like better viewability metrics. Think of them as blue rays and DVDs. They are just two different formats, with a few technical differences and different adoption rates.

We will mostly focus on VAST in this article, even though, some of the same techniques are easily transferrable, if the video player supports it.

A raw VAST tag is not something anyone would manually write since it's a pretty big XML file. Click here to see the raw vast tag.

However, a VAST tag URL is much easier to work with. An example could look like this

https://securepubads.g.doubleclick.net/gampad/ads
?env=vp&gdfp_req=1&output=vast&iu=/1234/video-demo
&sz=400x300&unviewed_position_start=1&ciu_szs=728x90,300x250

Above is simply an URL, that a player can use to retrieve a full VAST tag. Above you can see that parameters are included in the URL, which is the way to send information to the ad server about what kind of ad you want to retrieve. In the above URL, we are, amongst other things, asking for the following:

• &output=vast → we would like a vast tag in return
• &iu=/1234/video-demo → ad unit in our ad server (GAM)
• &sz=400x300 → The size of the ad we would like to request

3. how to create a VAST TAG URL

There are a few ways to create a vast tag, depending on what kind of parameters you want it to include.

Ad server

If you only have demand in your ad server, you can simply create a little helper function to help you create VAST tag URL’s a bit more dynamically. A simple version, without custom targeting, could look like this:

const createVastTagUrl = ({ adunitCode, playerSize }) => {
    try {
        const baseUrl = `https://pubads.g.doubleclick.net/gampad/ads`;
        const unitString = `?iu=${adunitCode}`;
        const size = `&sz=${playerSize}`;
        const output = `&output=vast`;
        const GDPR = `&gdfp_req=1`;
        const description = `&description_url=${encodeURIComponent(
        document?.location?.origin || "unknown"
      )}`;

        return `${baseUrl}${unitString}${size}${output}${GDPR}&unviewed_position_start=1&env=vp&impl=s${description}&correlator=`;
    } catch (error) {
        throw new Error("Could not build vasttag");
    }
};

The above could be included on your site to make it easier to create a more dynamic Vast tag URL.

Prebid

A whole prebid description is outside the scope of this article. If you are unfamiliar, read a primer here, where a describe the basics.

Anyway, if you want to make your video inventory available for your prebid bidders, there is a standard way of doing that, if Google ad manager is your ad server. The basic flow is:

1. include the dfpAdserverVideo in your prebid file. If you’re a bit clever about it, you could leave it out and build your own version, but for simplicity, let's just use the module already created.
2. Start a prebid auction (as you would with a normal display auction)
3. In the bidsBackHandler create an object roughly looking like this:

const params = {
  adUnit: YOUR_VIDEO_ADUNIT,
  params: {
    iu: THE_ADUNIT_CODE, // /1234/video-demo
    cust_params: {
      test: 'what_ever'
    },
    vpos,
    description_url: window.location.origin,
    unviewed_position_start: 1,
    wta: 1,
    vad_format: 'linear',
    output: 'vast',
  }
}

4. Create your VAST tag URL like this

const VASTTAG = pbjs.adServers.dfp.buildVideoUrl(params); // from point 3

Now you can create a VAST tag URL after a prebid auction.

Note: Since an auction has to be held before this URL can be created, it is by design asynchronous, unlike the tag created for the ad server only.

how to verify

It’s pretty easy to verify your vast tag, without the complication of the video player. There are plenty of websites that offer this. For example, this site can show you something like this:

VAST TAG URL test

4. Demand

Demand (the actual video ad to show) is what your VAST tag URL is pointing to. In order to show an actual ad, you need your ad server to return something for the VAST tag URL you create.
This is not as much a technical part as the others, even though specifics can require a developer to support certain video formats or protocols.

Whether or not you only want direct video orders (specific video ads in your ad server, that you know) or open demand (from either the general ad server or prebid), you need to make sure the technicals parts are running smoothly, as even a small mismatch between parameters (format, size, protocol, video controls, position, sound, etc…), often will return in no ads being shown, since each video ad is worth considerably more than a display ad.

/Let’s see some videos!

You might like:

Convince Users to Pay for Your Content

How does ad targeting work — in practice

Reduce CLS impact of running ads

Increase ad quality by using ad refresh and lazyloading strategies — for publishers and networks