How to build hand-coded video ads in HTML5

Video ads are becoming more and more effective in delivering engaging content, resulting in more interaction and visibility.

In this article you’ll learn:

How to setup a HTML5 VIDEO AD for DoubleClick

How to encode video files

What is required for a Doubleclick Video Ad

How to add Basic Interactivity

The DoubleClick Studio Workflow

Let’s keep this example simple and quick

The task is to build a Video Ad Which is basically an intro video, that will have a call-to-action on the end.
This needs to be built for Doubleclick

Sublime Text

Sublime Text is the most used text editor for coding nowadays.

Create a new file
Start typing the html tag and click the auto-fill suggestion to create the basic structure, instantly.

We will then add the following

The DoubleClick Enabler, from the support page.

< script src="https://s0.2mdn.net/ads/studio/Enabler.js">< /script>

A link to our Style sheet (CSS).

< link rel="stylesheet" type="text/css" href="style.css">

Ad Container

A div called Ad Container that will contain the video and the exit button.

Javascript File

And the javascript file to control our ad.
< script type="text/javascript" src="script.js">< /script>

The Setup.

Setting Up the CSS

Define the ad dimensions And set the clickthru button style.

Setting Up the Javascript

Here is where the fun begins.

Get the code from DC to start with. The code loads the Enabler and makes sure our ad is ready to go. By adding a function for when everything is loaded, we have our basic structure set up.

Video files

Export it as a h264 .mov file. Use Miro Converter for quicker transcoding of the video file. You’ll need WEBM, OGG and MP4

Poster Image

For simplicity, we will use the video’s poster image as the backup image. Make sure the file-weight is less than 40kb.

Adding the video functionality

Most ad servers have different ways to do similar things. In DoubleClick the workflow is quite clear although it takes many steps. It is important to follow the templates and create variables in your code that would support that.

Video Tag

Now that we have our files. Let’s set up the video tag with the right paths and file name. You can use folder if you want.

Tracking

We will need to add the tracking code from DC for our video ad to work smoothly. In the support pages you can easily find this to copy. Always remember to check the naming.

Event Listeners

It’s best practice to wait for the video to finish – before having any interactivity enabled. Lets add the ‘ended’ event listener.

Ended Event

When the ‘ended’ event is triggered, the video will automatically freeze on the last frame. You can then add the event listener for the clickthrough button functionality. Finally Add the Enabler Exit and you are ready to test.

Testing

I recommend using Chrome as the Developer tools are better. By right-clicking the AD, select Inspect and check for error in the console panel.

Most of the times you will have errors because of file-name and paths.

We can test our event listener by trying to click the ad whilst the intro is playing,

Double Click Studio

Once your ad is working as planned, you need to test on DoubleClick.

Package it up.

Log in to Doubleclick account, create or select an advertiser and a campaign, create a new ad.
In finder, Zip your build folder and upload it to DC.

Doubleclick testing

Make sure the Preview tab is working – otherwise you missed something. Check if the clickthrough is being tracked and preview the ad.