Dynamic Advertising with HTML5

367 Pages·2015·10.85 MB·English

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
Contents at a Glance
Foreword ...........................................................................................................................xix
About the Author ...............................................................................................................xxi
About the Technical Reviewer .........................................................................................xxiii
Acknowledgments ............................................................................................................xxv
Introduction ....................................................................................................................xxvii
■ Chapter 1: The Campaign Process .....................................................................................1
■ Chapter 2: Evolution of Advertising Technology ..............................................................21
■ Chapter 3: Advertising with Web Standards ....................................................................37
■ Chapter 4: Using Canvas, SVG, and Web Fonts ................................................................61
■ Chapter 5: Animations and Presentations .......................................................................85
■ Chapter 6: HTML5 APIs ..................................................................................................121
■ Chapter 7: HTML5 Media ...............................................................................................149
■ Chapter 8: Mobile Web Advertising ...............................................................................189
■ Chapter 9: In-Application Advertising ...........................................................................217
■ Chapter 10: Offline Storage, Tracking, Debugging, and Optimization ............................233
■ Chapter 11: Dynamic Advertising with HTML5 ..............................................................257
■ Chapter 12: Bleeding-Edge HTML5 ................................................................................297
■ Chapter 13: HTML5 Advertising Going Forward ............................................................325
Index .................................................................................................................................339
v
Introduction
Why write a book geared toward advertising with a focus on HTML5? Well, for most of 2011, my job was to create,
debug, and make informed decisions on HTML, CSS, and JavaScript in the emerging browser market, and boy was
it frustrating! During December of that year, I had some free time to myself, and took the time to draft an outline to a
book that I would want to read, based on all the troubles I faced throughout the year. Needless to say, I had lots to say,
so that outline grew to be 20+ pages, covering all topics around advertising in the digital world and more importantly
how it’s being drastically altered by HTML5.
In the beginning of 2012, I ended up pitching the outline to a few folks in an efort to gauge interest from other
people in the industry, and from what I found quickly, I wasn’t the only one thinking about this stuf! In Q1 of 2012,
I felt conident that I had developed a strong enough outline on the content, and I was really excited to write this thing!
So, after signing with the kind folks at Apress, I began to write, develop, and test for most of 2012. I guess you can say
I was pretty fed up with hearing things like “Will Flash deliver on tablets?” or “Why do I need to have ive versions of
my ad for this responsive site?” Note: if these questions seem new to you, don’t be alarmed; I’ll cover all these topics
throughout the book. Needless to say, the need in the industry was strong!
With that said, let me be the irst to welcome you to the crazy world of digital advertising (if this is new to you).
his industry is fast-paced, cutting-edge, and growing constantly. If there is one thing that’s consistent with it, it’s
that it changes rapidly. I’ve been in this industry for nearly a decade and can attest that it requires someone with
high-energy, quick timing and often someone who can deal with stressful surroundings. If you’re looking for a career
change by reading this book, I feel you should know the important stuf up front. With that out of the way, let’s take
a look at the next logical question:
What is HTML5?
he W3C states the following:
HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the
core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML
4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based
rich Internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight.
his is a great universal outline, but I’d like to elaborate on it for you as it relates to the context of this book.
HTML5 is a speciication for the new and emerging open Web. It’s often a widely used term to loosely describe
the ability to target platforms where Flash is not accepted. However, in reality, HTML5 is much more than that
(http://platform.html5.org). It’s an evolving standard built on many web features that we’ve grown accustomed
to in rich platforms, like Adobe’s Flash environment. Since HTML5 relies on the native qualities and APIs of the
browser, it provides a faster and higher-performing approach to web and ad development because it ofers the same
robust experiences we’ve become used to seeing with plug-ins like Flash. Conversely, since HTML5 is an evolving
speciication, managed by two consortiums (W3C and WHATWG), with two diferent agendas for the speciication,
it means it’s a moving target to deploy toward because there is plenty of room for fragmentation and interpretation
among the marketplace regarding which browsers and devices can utilize which feature sets of the new speciication
and, much more importantly, when.
xxvii
■ INTRODUCTION
HTML5 is the future of the Web but more importantly the present of web advertising, especially if you want
to target users in the endlessly growing mobile and tablet landscape, which is becoming a frequent request as
more clients make the shift from proprietary platforms such as Flash to the open web standard for more reach and
penetration. It will be many years until the advertising space has fully adopted HTML5 as its main platform for
delivering and rendering ads, but this book is geared to surveying the current landscape, making some educated
assumptions, and adding some developer assistance as the shift happens.
Before we dig in, I’ll review what this book is and what it is not in order to set expectations accordingly. First, you
must understand that the HTML5 speciication is not set for completion and inalization for years to come. On top of
that understanding, the browser manufacturers will have to release inal updates and bug ixes before full adoption
within the market occurs and emerging features can be used safely across browsers.
Second, this book assumes you have some basic knowledge of the Web and development, which means you
understand HTML, CSS, JavaScript Flash, and the use of APIs because there are code samples throughout.
Next, you shouldn’t be using a dated browser and attempting to work with HTML5 and the code samples in the
chapters. IE6, I’m looking at you! If this seems strange to you, trust me you’ll understand more as you read the book.
So, be sure to download one of these browsers before continuing:
•฀ Chrome: http://google.com/chrome
•฀ Mozilla: http://mozilla.org/en-US/firefox
•฀ Opera: http://opera.com
•฀ Safari: http://apple.com/safari
•฀ Internet Explorer: http://ie.microsoft.com
Next, this book is not a beginner’s guide to coding or ad development but a guide to assisting web developers
who understand code practices and how it relates to advertising on the Web, while also providing insight as to why
certain things occur in the complex world of advertising.
Finally, with this book, you’ll learn about HTML5 and its efects on web advertising but at the end of the day,
I want you to understand how to take advantage of this cool technology within the browsers that support it. Also,
I’d love to include every facet of advertising technology with regard to HTML5 in this book, but truth is there is just too
much out there that’s evolving and changing, and that’s a good thing! his industry is moving so fast that any attempt
to document some features would do a disservice to you and myself for wasting efort. Before we start, if you’re
interested in where the HTML5 speciication develops from, please visit the following sites because the information
there is always changing:
•฀ http://whatwg.org
•฀ http://w3c.org
With that primer out of the way, let’s move on to Chapter 1 and start learning about the future of digital
advertising.
xxviii
Chapter 1
The Campaign Process
Welcome to HTML5 advertising. The goal of this initial chapter is to get a complete, end-to-end view of the entire
campaign process before we dig into the big stuff. Understanding the campaign process will provide insight into how
everyone works together to get campaigns out the door on time. Furthermore, this book also aims to clarify where
creative and development fit into the scheme. After breaking down the process into its vital parts and deconstructing
them one by one, we’ll tie everything back together again to present you the big picture.
This chapter’s sections will outline many things, from typical media buying and creative development to
launching a campaign and reporting on campaign performance. Technology, terminology, process, and general
industry acronyms (which are likely confuse new readers and users)—all these will be reviewed. Also reviewed will
be different ways to approach the development of a campaign—through discussion of brand time versus direct
response creatives and the importance of clear calls to action and by keeping the user experience in mind at all times.
We’ll discuss fundamentals of brand storytelling and how advertisers use it to engage potential customers. We’ll also
provide both an understanding of creative specs and limitations as they relate to publishers and directions on where
to go next when launching a digital advertising campaign. Lastly, we’ll quickly summarize what we’ve covered and
familiarize you with the terminology. Ready to get started? Then let’s begin . . .
Digital Strategy
Since you’re reading this book, you may have wondered, “How are those ads that I see online made?” or “Who actually
comes up with them?” In online advertising, digital strategy is concerned with an approach to developing a creative
marketing message for a brand or advertiser that aligns with the their goals, vision, and business objectives. This
strategy could take the form of a message you’re familiar with; something like “Back to School Sale” or “Memorial Day
Sale.” Digital strategy, usually the first step in the process, allows creative agencies to create mock-ups and designs and
pitch new ideas to their clients (advertisers). Depending on the agency’s size and structure, this process will typically
involve a creative or art director and one or more copywriters, project managers, and technical gurus, all working to
sell the idea so effectively that the advertiser buys into the marketing message. Though Figure 1-1 should give you a
better idea of how this works, keep in mind that every agency is run differently. So consider this just a sample.
1
CHAPTER 1 ■ THE CAMPAIGN PROCESS
Agency
Production
Technologists
Creative & Art Directors
Copywriters
Client Facing
Project Managers
Sales
Advertiser’s Marketer’s
Client
Advertiser
FIgure 1-1. How a typical creative agency interacts with an advertiser
2
CHAPTER 1 ■ THE CAMPAIGN PROCESS
The effort may require weeks, if not months, of development and planning to ensure that the pitch is conveyed
correctly to the client. In some cases, an agency may invest all this time only to see its ideas shot down by the client
for any of several reasons: because they didn’t align with the client’s objectives, because execution costs were too
high, or worse still, because petty differences between agency teams ruined the pitch. This last situation is the most
unfortunate, in that when it happens, great ideas could go to the grave much too soon. In the end, this process exists
to develop the campaign—that is, the overall marketing message the advertiser wants to communicate to audiences
and potential customers. The campaign may exist solely online or may be broadened to other distribution channels,
including broadcast television, print, and billboards.
Another important part of the digital strategy process involves inclusion of previous campaign intelligence.
Let’s say you are an advertiser called Joe’s Hardware, situated in the American Northeast. In July you had an online
ad campaign to sell snow shovels. In analyzing the campaign’s performance, you’d most likely realize that the
shovels didn’t sell very well. Once you realize that it was probably a mistake to sell snow shovels in mid-July, what
you’ve learned can be used to turn your next campaign into a better-performing one. (Obviously this example is
oversimplified, but its lessons can be applied to more sophisticated campaigns.)
■ Note Since dynamic campaigns allow analysis of information in real time, the creative messaging can be adjusted
while the campaign is in progress. There’s no need to wait until the campaign’s end to use what’s being learned to make
changes. There will be more on this in Chapter 11.
Digital strategy aims at identifying the marketer’s challenges, developing a unified solution to them, and
delivering a message effectively to the target audience. Taking these points and properly executing each will lay the
groundwork for a successful online advertising campaign.
Media Buying
Now that you’ve had a look at what goes into generating a successful campaign and know something of the parties
involved, let’s look at what usually is the next step: purchasing media for a particular campaign.
■ Note Media purchasing can happen at any stage of a campaign’s life, but for this chapter’s purposes, we’ll assume
the purchase was made after the strategy was developed.
First, let’s define what we mean by media, in relation to the digital advertising industry. In short, the term refers
to the planning, implementation, and purchasing of ad inventory through various publishers or networks or the like.
Places where media purchases for digital campaigns take place include but are not limited to
•฀ publisher web sites: USA Today, ESPN, BBC, The Guardian (UK), etc.
•฀ web portals: Yahoo, MSN, AOL, etc.
•฀ ad networks: The Deck, Google AdSense, Chitika, etc.
•฀ video players: YouTube, Vevo, Tremor Video, etc.
3
CHAPTER 1 ■ THE CAMPAIGN PROCESS
Publisher Web Sites
Publisher web sites are the most traditional online media buys; leaderboard ads at the top of a page and square ads
along a site’s right or left hand side are typical examples. These are traditional because they’ve been around the longest.
Anyone with a popular blog or site can sell this form of ad inventory. In fact, buysellads.com and similar sites help
content producers and advertisers to do so. Anyone who is getting a bunch of unique visitors to a web page and wants
a form of passive income should consider including advertising. The New York Post web site (www.nypost.com/) is a
typical example of an ad experience on a publisher’s web site.
Web Portals
Web portals are virtually analogous to publisher web sites in terms of their ad inventory. They differ in being gateways
to other sites or to subsections of site information. Web portals include AOL Travel, Yahoo Music, and many others.
AOL’s subsections include AOL News, AOL Music, AOL Travel, and AOL Money. Each subsection, being tailored to a
specific user interest, and could include section-specific advertising inventory.
Ad Networks
An ad network, is a collection of publisher sites for which advertising can be bought and sold on a group basis, can be
big or small. Its key function is accumulating ad inventory from a contributing list of publishers and matching it with
the advertiser’s requirements. Going through an ad network allows the advertiser to reach more web properties than
can be reached by just going through publisher sites one at a time. A very good example of a successful ad network is
The Deck (http://decknetwork.net/).
Video Players
Video player media buys are quite new on the scene. They are what you’d see if you viewed a popular video on
YouTube or another content provider that shows ads to viewers in order to provide them free content. This would
be the typical 15- or 30-second in-stream video spot that plays before the content. Typically, the video autoplays; it
disables users’ ability to skip to the content until the ad has played. Video player advertising can also be a lower-third
type of ad unit, traditionally called a “post-roll,” which appears over the player content
The Media Buyer
Securing any or all of the above-mentioned outlets is a job of its own. This is where a media buyer comes into the
mix. The media buyer plays a vital part in the overall campaign process: the media buyer, usually as part of a media
agency, specializes in securing appropriate media outlets. One of the media buyer’s jobs is ensuring that the inventory
purchase aligns with the advertiser’s overall vision. For example, if I’m the advertiser Titleist Golf Balls, I’d want my
media buyer to place my brand all over the golf sites and related networks. It wouldn’t make much sense to show golf
ads at, say, a dog show.
4
CHAPTER 1 ■ THE CAMPAIGN PROCESS
Publisher Inventory
As you might guess, the above-described purchasing outlets are all based on available publisher inventory. This can
badly limit a media buyer and be subject to many variables, including but not limited to
•฀ day of the week or time of day
•฀ popularity of content
•฀ percentage of views needed
Let’s quickly look at this situation as it relates to a traditional form of media buying for broadcast television. It’s
fair to assume you will pay much more for a 30-second ad spot in the second quarter of the Super Bowl than you
would for the same spot on some random channel on late-night television. Put otherwise, as the popularity of a site’s
content increases, more advertisers will want to run ads on it. So keep posting good content on that blog of yours!
Can you see why it’s often tough for media buyers to secure inventory on popular sites? Since the media buyer’s
job is to hunt down and gather all the media appropriate to communicating the advertiser’s message within the
allotted budget of the plan, it’s really nothing but old-school supply and demand in a new guise.
CPM and Roadblocks
You may be wondering by now, if media is sold based on the popularity, how does this relate to actual dollars? Well,
in the digital advertising industry, this amount is assessed by the number of views an ad gets. A view is called an
impression. A media buyer, looking at the media sheet, will tally all the different places the ad campaign will run to
generate an estimated impression volume. The cost, based on every thousand impressions, could be anywhere from
a fraction of a cent (for less-popular content) to several dollars or more, depending on the many variables already
mentioned.
Since cost per impression—also called cost per mille (from the Latin “mille,” meaning “one thousand”)—is higher
on sites that see a lot of traffic, getting prime inventory on CNN, the New York Times, the BBC, and similar sites can
be difficult. It’s especially difficult if you want to be the only advertiser in view that day. For example, an advertiser
such as Apple will typically buy what is called a “roadblock,” or “takeover,” on days it runs campaigns. No conflicting
advertiser’s messages will be shown in conjunction with the brand’s messages.
A roadblock is really the pinnacle buy, and it’s unsurprising that it usually comes at a very high cost. What
makes this buy special is that it normally allows you the freedom to do whatever you want with the publisher’s page
content. This may include full-screen video, manipulating page elements that interact with the ad unit, sometimes
even a longer duration of ad animation time. A roadblock, when tastefully done, can provide a brand experience like
no other.
Real-Time Bidding
At the beginning of this section, I mentioned that media buying is typically done after the campaign’s digital strategy is
developed and the advertiser’s message is finalized. While this is true in most cases, another form of media buying is
becoming ever more popular among advertisers. This new technique of media buying, real-time bidding, is done via
a demand-side platform, or DSP. A DSP is also known as a trading desk for media buying. This means that when an ad
creative is already developed and eagerly awaiting a place to run, the media can be bought or sold via this trading desk
so that it can secure ad inventory on the site and run the ad at the exact time of purchase. Obviously, this is true only
if the advertiser was the highest bidder. RocketFuel (http://rocketfuel.com) and similar companies are hired by
media agencies and advertisers to manage purchase of media inventory on publisher’s sites in real time to eliminate
wasted ad spend. I like to think of it as the eBay for ad buying, only it happens much quicker and often becomes more
cost effective for the advertiser.
5