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.

Now you are ready to add enhancements or publish your Video Ad

Resources

Download the files here, we only ask for your email address!

  • Double Click HTML Basics

  • Double Click Video Ads Links

  • More about Html5 Video

  • Sublime Text

  • Miro Converter

Now you are ready to add enhancements or publish your Video Ad

If you have any questions,

please email: article@properbanners.com


RECENT ARTICLES