24 Nov 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, 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 is the most used text editor for coding nowadays.
1. Create a new file
2. 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 ContainerA div called Ad Container that will contain the video and the exit button.
- Setting Up the CSS:
Define the ad dimensions And set the clickthru button style.
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.
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
Double Click Studio
We 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.
Download the template files here.
- Double Click HTML Basics
- Double Click Video Ads Links
- More about Html5 Video
- Sublime Text
- Miro Converter