Dynamic Advertising with HTML5 - HTML5 Advertising - page 292

window.addEventListener('load', adInit, false);
</script>
</html>

In the receiver, the 300 unit, it's quite simple. You set up an event listener to listen for the message event and
handle it accordingly using the messageHandler function. Inside that handler, you check the event's origin, making
sure it came from johnpercival.org or the domain of your choice and finally checking whether the data attached to
that event has the value of play300 . If it does, you simply call the animate300 method to create synced effect.
Although this is just one way to skin a cat, there are many other ways to achieve the results you want. Just keep in
mind that the style could get shared between the two units. Remember, I said keep name spacing prefixed by the ad-
server vendor, for example AdServer-AdContainer . In the event of delivering synced units to the page, I recommend
prefixing the namespace with the size of the unit as well. So, AdServer-AdContainer becomes AdServer-300x250-
Container . It's a bit verbose, but keeping this prefixed appropriately will ensure your styles and other events don't get
shared across ads and, even more so, page content.

■ this method can be used for transferring data between the publisher's page content and the ads hosted on
other domains.

Note

Advanced Dynamics
Advanced dynamics is where it gets really exciting. When integrating multiple HTML5 features, web services, APIs, and
publisher buy-in, you can create a cutting-edge campaign. There really is nothing stopping you from using location
data, weather services, store lookup services, stock feeds, and even asking the user for some input to customize and
craft a personalized ad experience. Sure, this takes time, effort, and money to pull off, but the execution could be
amazing and really useful to the end user.
Oftentimes, you'll be stuck looking for a web service to suit your needs. When that's the case, check out the
developer community on GitHub and ask around. If you have the server-side coding skills, make your own or even
present the additional costs to the client for the creation of a web service. It may make the client not want the service,
or they may request it and use it for many other campaigns going forward.

Dynamic Video
I covered a lot about video in Chapter 7, but I didn't mention too much about dynamic video. Before I was completely
immersed in HTML5 development, I was pretty big into ActionScript and combining data from After Effects. I made
some pretty cool examples where you could dynamically update and change the content superimposed over video.
The content would be tied specifically to the video's movement, skew, rotation, and scale via metadata and read in by
the SWF in order to create a seamless video/animation effect. Although a lot has changed in technology, the theory
remains the same. Using features of HTML5 canvas and video, WebVTT, CSS3 transforms, and JavaScript, you can
do very similar things. There are even useful libraries created for tying data to video content in real time. Check out
PopcornJS ( http://popcornjs.org ), and you'll get a look at what I'm talking about.

Summary
I covered a lot in this chapter, including dynamically serving ads from your ad server's various inputs, using delivery
rules, using publisher-passed data, using XML and JSON, using the new features in HTML5 such as the data attribute,
using contenteditable , working with forms, using various useful attributes, and using the amazing new geolocation
data from browsers. I even wrapped up by discussing a bit about social APIs and integration into ads, advanced
dynamic executions, and the popular synced ad unit.