Station Innovation: WPT Serves Up Dynamic Ads in HTML5
Last Updated by
Happy Holidays from Madison, fellow PBSers. I’m Kait Vosswinkel, the online editor at Wisconsin Public Television. ‘Tis the (pledge) season, and we wanted to showcase the brilliant aerial footage used in our new flagship show for this drive. As Flash goes the way of the dinosaur, and our audience increasingly turns to mobile devices, we sought an HTML5 solution for animated/video ads.
A Quick Rundown
HTML5 ads are Flash alternatives that display animation without requiring plugins. Because of this, they’re great for mobile devices, SEO and a number of other reasons – read more in this NextWeb article. By design, HTML5 ads pull from a handful of files, so you’ve always got an HTML file, a CSS or JS file, and your source files for images and videos.
As a newbie, I learned very quickly that when it comes to animated HTML5 ads, there isn’t an easy or a well-established workflow out there quite yet. Everyone seems to have their own answer, but with some patience and experimentation, this is what we settled on:
Design: Adobe Edge
Display: iFrames via DoubleClick for Publishers (aka Google DFP)
Because we’re not all proficient in HTML and CSS, a number of programs have come out that allow HTML5 design with auto-generated code. After mashing my head against a wall trying to understand and efficiently use Google Web Designer, I decided to move to another program, Adobe Edge. I’ve been really happy with the results. The interface is intuitive and customizable. If you’re familiar with After Effects or Photoshop, the layout will be familiar. The support community is great - there are plenty of well-established forums and tutorial sets out there. Finally, the files that Edge generated were much smaller* than those generated by GWD. We’re trying to keep our animated ads under 100kb, so the small files were essential to a successful process.
* Edge’s HTML files were about one-tenth of the size of the GWD files. I also used Adobe Media Encoder to compress the video clip we chose in order to keep the entire ad under 100kb. I used a compressed mobile setting to get a 2 second clip down to around 60 kb. This particular piece of the puzzle was one of our biggest obstacles. Each video is its own beast, and requires some tinkering to successfully compress. The final product will depend on the original video length and format. Because of the high quality and sweeping nature of the video, we weren’t able to compress the video as much as we’d have liked to.
I’m not sure about Google Adwords, but unfortunately DFP doesn’t officially support HTML5 ads yet, so I haven’t found a way to simply host multiple source files for a single animated ad. We chose to host the animated HTML5 ad on our own server instead.
iFrames via DFP
Once we had designed and hosted the ad, we used an iFrame to feature the animation through a “Third-Party” creative in DFP, which allows you to upload custom snippets of code. Because of the wide range of Internet connections, we also used DFP to target only users who would have access to high speed broadband. An alternative static image is used for slower dialup connections.
Results? The ad saw over a 1% CTR, and the show did $130k in pledges in its first play! 600 telephone calls and 290 online pledges came in on the premiere night.
This whole system came from a bit of trial and error on our part. If you have questions or if you’ve found a more streamlined way to host HTML5 animated ads, I would love to hear more! Feel free to contact me at firstname.lastname@example.org.