Tag Archives: html5

Support for VPAID 2 JavaScript creatives in the IMA HTML5 SDK

We're pleased to announce that the IMA HTML5 SDK now supports VPAID 2 JavaScript creatives. Enabling support is as easy as including the following line before initializing your AdDisplayContainer:

    google.ima.settings.setVpaidAllowed(true);
    ...
    var adDisplayContainer = new google.ima.AdDisplayContainer(adContainerElement);
    var adsLoader = new google.ima.AdsLoader(adDisplayContainer);

VPAID 2 Support caveats

There are two differences to be aware of between the VPAID 2 spec and the way the IMA SDK supports VPAID 2. These differences do not impact player or SDK implementation code, but they are important for VPAID 2 JavaScript creative authors, as creatives may throw errors or not work as expected when rendered by the IMA HTML5 SDK.

  • IFrame security: The IMA SDK uses a secure iframe instead of a friendly iframe (same domain) or an in-page script to render VPAID 2 JavaScript creatives. This means that if a creative expects to access the DOM of the parent page, it could potentially cause an error.

  • Video player proxy element: For security and proper mobile functionality, the IMA SDK doesn't provide the actual video element to the ad; instead, it provides a proxy element that mimics much of the functionality of the normal video element. For ad creatives that only access supported video APIs available on the proxy element, there should be no behavior changes in the rendering of the creatives. See our guide to VPAID 2 creatives for a list of supported APIs on the video proxy element.

Learn more

For more information, including a listing of what API methods are supported in the video player proxy element, check out our guide to VPAID 2 creatives.

As always, if you have any questions, feel free to contact us via the support forum.

 - , IMA SDK Team

Building the next generation of display ads for a multi-screen world


Cross-posted from the Inside AdWords blog.

It’s true that mobile devices offer a new canvas for advertisers to connect with consumers, but painting on this canvas has not always been easy. Many marketers started out by shrinking down their existing display ads for mobile, but this didn’t always make for a great consumer experience. They also discovered that frequently their existing display ads were not able to run on mobile devices or on mobile browsers. But now, a new generation of display ads is changing how advertisers engage with consumers on mobile devices.

Today, we’re excited to announce that over the coming months we will launch several mobile display ad formats and tools across the Google Display Network, the AdMob Network and DoubleClick that will make it easier for advertisers to build successful ads that work across screens. 

Display ads built for mobile
The new display ad formats that will be rolling out in the coming months are designed specifically for mobile environments:
  • Big brand ads, built for mobile and resized for every screen: Mobile lightbox Engagement Ads use your existing brand assets to automatically create engaging rich media ads in HTML5 that run seamlessly across devices and screens. The ads will dynamically resize to fit any ad size, making them quick-to-create, and you only pay when users engage. We built a demo of this new format for Kate Spade's upcoming holiday campaign. These will soon be available in the AdWords Ad Gallery. 
Invitation State 


Expanded State 

  • Video ads for the AdMob network that people can choose to watch: TrueView ads have already been running across gaming apps in the AdMob network. In the coming months, they will roll out broadly across more apps in AdMob. With TrueView, your ads can reach consumers while they engage with their favorite apps. Plus, you only pay when a user chooses not to skip your ad. 


  • Ads that stay put even while a person scrolls down the page: The anchor ad format is a mobile web ad unit that sits at the bottom of the screen on a mobile device. As a user scrolls down the page, the ad remains “anchored” to the bottom of the screen. The user can dismiss the ad at any time.
  • Magazine glossiness for your existing text ads: The magazine style text ad format (previously launched for mobile websites) has now been extended as an interstitial in-app format for the AdMob network, bringing the glossiness of print magazine ads to the ease and practicality of a text ad. Google Display Network text ads automatically become eligible to serve in this new ad space. 

Tools to help make your existing ads mobile-ready: 
These next generation mobile formats will make it easier for advertisers to build beautiful and engaging mobile ads that work across screens, but we also wanted to make it easier to do more with your existing ads designed for desktop. We've developed three new tools, that will be available in the coming months, to convert your existing ads into versions that will work across screens and devices.  
  • Automatic mobile sizes for your image ads: The auto-resizing tool for the Google Display Network will automatically create new sizes of image ads, including mobile-specific ad sizes. 
  • Interactive HTML5 backups when Flash isn’t supported: The Flash-to-HTML5 conversion tools for the Google Display Network and DoubleClick Campaign Manager will automatically create an HTML5 version of your Flash ads. When these ads are served on a device or browser that doesn’t support Flash, the system can show the interactive HTML5 ad instead of a static image backup. 
  • HTML5 and in-app rich media ads built in minutes: There are now 29 HTML5 and in-app formats available in DoubleClick Studio Layouts, a tool that let’s you upload your existing creative assets into a pre-built rich media ad template to quickly create rich ads that work on smartphones and tablets. 
With these new tools and formats, we’re making it easier for advertisers to develop beautiful display ads that just work, regardless of screen or device, ensuring a better experience for both consumers and brands.


Posted by Jonathan Alferness, Director of Product Management for Mobile Display Ads at Google

Behind-the-Tech of Nike’s “Phenomenal Shot” World Cup Campaign


The World Cup offers a good barometer for how tech is being used by a critical mass of people around the world. Four years ago, we had the first World Cup of the social media era. This summer, the big story was how fans were using mobile devices and tablets to engage with the matches and with each other. And just as audience habits are changing, advertising tactics are evolving to keep up.

Nike’s Phenomenal Shot is a perfect example: A real-time campaign that played off the action in ways that wouldn’t have been possible four years ago. Nike Phenomenal Shot let fans all over the world view, remix and share phenomenal moments from Nike athletes, just seconds after the plays happened. (Play around with one of the ads yourself.)

As part of the latest Google Art Copy & Code collaboration, Nike partnered with Wieden+Kennedy, Mindshare, Grow, and Goo Technologies to create this innovative campaign, providing a new way of tapping into the real-time energy of live sports, all across the web. 

While it’s fun to play around with the ads, if you’re in the advertising industry, it’s even better to learn how they were built. That’s why we asked Drew Ungvarsky, CEO of digital agency Grow, and Mike Glaser, Marketing Manager on the Google Art Copy & Code team, to walk us through the technology and techniques that were used to create this campaign. From DoubleClick Dynamic Creative to robust WebGL experiences, the Nike Phenomenal Shot campaign demonstrates what advertising for today’s modern web can be.



Changes to Custom Playback in the IMA HTML5 SDK

We've made some changes to the HTML5 SDK's handling of custom playback. Currently if a custom video element is passed into the IMA HTML5 SDK, it’s always used to play video ads. This behavior is now changing; soon we’re going to use custom playback only when necessary (e.g., on devices such as iPhones or pre-4.0 Android phones where UI elements cannot be rendered over a video player) rather than whenever a video tag is passed in. We recommend all implementations now pass in the custom playback elements so that ads are supported in those environments. For more info on the change and code snippets to help you upgrade, see upgrading to the new custom playback.

Upcoming changes to custom click tracking element


The SDK's usage of the custom click tracking element is also changing. Currently, if a custom click tracking element is passed in to the SDK, it will always be wired to handle clicks. Soon, the custom click tracking element will only be used if the ad is a non-AdSense/AdX creative and the environment is iPhone or pre-4.0 Android. Please do not render your custom click tracking element over your video player as it may prevent clickthroughs after this change is put into place because it may intercept clicks on the SDK-rendered elements. We only recommend passing in a custom click tracking element if you are showing non-AdSense/AdX creatives and want a click tracking element in iPhone and pre-4.0 Android devices. See opt_clickTrackingElement under ima.AdDisplayContainer for more information.

What do you need to do now?

  1. Effective immediately, all implementation should pass in the custom playback element to ensure support of IMA video ads across all devices. Please read our guide on Upgrading to the new custom playback.
  2. If you are using a custom click tracking element:
    • Make sure it doesn't render over your video player.
    • In the ad STARTED event, show your custom tracking element if AdsManager.isCustomClickTrackingUsed() is true, and hide it otherwise.
    • In the ad COMPLETE event, hide your custom tracking element if appropriate.


How can I tell if the IMA SDK is using custom playback or custom click tracking?


Release 3.1.62 of the IMA HTML5 SDK introduces AdsManager.isCustomPlaybackUsed() and AdsManager.isCustomClickTrackingUsed() which you can use in your player to see if the SDK is currently using the passed in custom video player or custom click tracking element.

As always, if you have any questions,feel free to contact us via the support forum.

 - , IMA SDK Team

Navigating the “wild west” of HTML5 with Google’s Tech Lab and Google Web Designer


Marius Veltman’s thought experiment yesterday utilized the Tech Lab’s Full Page Flex and Motion Sensor components to enable viewers to navigate the scenery of the ad in full screen, by tilting their mobile device. 

This component is just one example of many that are being developed by Google’s new Tech Lab, a project created by Google’s Creative Technical Consultants to produce new innovations, push the boundaries of rich media and partner with creative agencies to help take these solutions to the next level. Even the best designers and developers need inspiration, and the Tech Lab has been established to help our DoubleClick Studio Certified Partners experiment with the latest, most innovative ad formats and features for their campaigns. 

HTML5 is still a bit of a “wild west,” both risky and alluring in that it is unchartered territory. There is space for creative designers and developers to experiment with new executions. As Marius pointed out in his article, “the experimentation process … is crucial to developing new ideas and pushing the creative envelope.” 

The Tech Lab helps designers and developers build never-before-seen formats and features into their rich media campaigns. These fresh ideas haven’t been used in many (if any) campaigns before, meaning they are exciting but also untested; but these are the realities of living on the edge of technology. 

To date, the Tech Lab has created 15 innovative formats and features, and today the group is launching three new ones for HTML5:
  • HTML5 Autoplay Video: Start any video within an HTML5 creative automatically, without requiring a user interaction.
  • HTML5 Shake and Shout: Boost your HTML5 creatives by adding cool interactions: Let people blow or shout onto their device and the mic will pick up the cue; or let them shake the phone and the accelerometer will pick up the cue. 
  • HTML5 Twitter Widget: Boost your HTML5 creative’s social IQ by adding the twitter widget and letting viewers view, tweet, retweet, and follow your twitter account directly from your mobile ads. 
If you’re a DoubleClick Studio Certified partner, reach out to your DoubleClick rep to begin working with the Tech Lab. To become a Studio Certified partner, visit our exam page. 

Posted by Becky Chappell, Product Marketing Manager, Google Web Designer

A Google Web Designer Thought Experiment


Yesterday, we announced a revamped Google Web Designer, brimming with new features that make it even easier for creative designers and developers to build robust HTML5 creative. 

Today, we’d like to introduce you to Marius Veltman, a rich media expert from Holland and a life-long creative technologist. We first met Marius last year when he tested out the alpha version of Google Web Designer and gave us a list of improvements for the product.

For this launch, Marius gave us a peek into his world as an artist and designer and helped us push the limits of HTML5 with a “Google Web Designer Thought Experiment.” We asked him to create an awesome HTML5 ad unit, using only Google Web Designer, that takes advantage of different device form factors and successfully conveys a brand’s message. 

We selected the Google Cultural Institute as the brand and used the Street View imagery from their Great Barrier Reef World Wonders Collection as the assets. We then set out on an adventure through Holland to document Marius’s creative process as he worked to develop the ad.

Watch as Marius’s sketches come to life through the medium of HTML5 and the help of Google Web Designer. Marius's ideas develop in parallel to his own story as a designer. Then, check out the actual ad unit and learn more about his process.




Posted by Becky Chappell, Product Marketing, Google Web Designer

One Year In: An Update On Google Web Designer


Almost one year ago, we launched Google Web Designer, a free, easy-to-use, professional-grade HTML5 authoring tool. Over that year, we’ve seen increased adoption of HTML5 and Google Web Designer across the industry.

Fast facts, one year in: 
  • In the first half of 2014, DoubleClick Rich Media ad impressions from HTML5 grew 140% compared to the second half of 2013.
  • Ads built with Google Web Designer have garnered 2.5B impressions since the launch of the product.
  • Over 20% of Google Web Designer’s user base are returning users and 72% are located outside the United States. 
  • We partnered with the IAB to launch the “Make Mobile Work” Initiative, which has reached thousands of people through press outreach, an industry open letter, and quarterly webinar series.
  • Advertisers are seeing performance improvements as a result of adopting HTML5. For example, TalkTalk decreased their eCPA by 12% and reduced their backup image rate by 13% by adding HTML5 to their campaign. 
So what’s launching in Google Web Designer? 
Today’s launch provides more granular control and creative flexibility to creative developers and designers, and allows them to easily build more interactive and animated HTML5 content and get it published quickly.
  • Revamped Events and Components allow designers to make any element interactive, and customize the types of interactivity within their creative. 
  • The updated timeline provides more granular control for designers to easily build animated content. 
  • Tighter integrations with Google Drive, DoubleClick Studio, DoubleClick Campaign Manager and AdWords let users collaborate on their works-in-progress and publish finished units more quickly. This integration marks the first time that AdWords will support HTML5 ads.


Simplifying cross-screen advertising
In addition to Google Web Designer, we are continuing to develop tools to make it easier for advertisers and agencies to build successful cross-screen advertising campaigns. 

We recently launched several features in DoubleClick to help you execute and measure your campaigns across screens, including in-app remarketing and conversion tracking in DoubleClick Campaign Manager. We also launched MRAID 2.0 support in DoubleClick Studio and we have certified 69 large publishers and networks for in-app formats, meaning developers can build mobile in-app ads with the confidence that they’ll be accepted across more publishers and networks. 

Through its integration with Google Web Designer, AdWords now supports HTML5 ad creatives. In addition, Flash ads that are uploaded to Adwords will automatically be converted into HTML5 ads and can be uploaded via AdWords Editor and other 3rd party tools coming soon. Over the next few months, we’ll also be releasing tools and services that will resize ads to some of the most popular mobile sizes, without requiring any additional work on the part of the agencies.

Want to learn more?
  • Creative Agencies:
    • Visit our revamped website and download the product for free. 
    • Register for our Google Web Designer overview webinar on Wednesday Aug. 13th. Our lead Product Manager and Creative Technical Consultant will walk through the new Google Web Designer features and demo some cool creative executions. 
  • Media Agencies:
    • Register for our third webinar in the Make Mobile Work Series, focused on best practices for mobile targeting, on Tuesday, Aug. 12th. Google will be presenting alongside speakers from Millennial and Facebook.

Posted by Sean Kranzberg and Tony Mowatt, Engineering Manager and Lead Product Manager for Google Web Designer

New tools to help advertisers embrace cross-screen campaigns


Today, we're excited to shine a light on several new features of the DoubleClick Digital Marketing platform that help advertisers more seamlessly embrace cross-screen advertising.

Mobile advertising is, without question, top of mind for marketers; but according to the latest "Internet Trends 2014" report from Mary Meeker, it's also the biggest opportunity gap of all forms of media spend. Although 20% of time spent on media is within a mobile environment, only 4% of US advertising spend is on mobile. (1) Marketers still struggle to get up to speed on the new technologies and strategies that cross-screen campaigns require.

That's why we're excited to bring new tools that make it easier to build, buy, target, execute and measure your campaigns across screens:

Google Web Designer integration:
  • Build HTML5 ads easily in Google Web Designer and publish them into DoubleClick Campaign Manager. This allows you to quickly get your HTML5 ads live and serving to any device.
Mobile inventory growth:
  • Buy more mobile inventory -- Programmatic mobile inventory on DoubleClick Bid Manager has grown 130% since Q4 2013 across 12 exchanges and includes both display and video formats. Adding mobile inventory on DoubleClick Bid Manager allows you to incorporate mobile into the rest of your media strategy and optimize across all of your media buys.
In-app remarketing:
  • (Re)target your customers using audience lists within mobile app environments, so that you can drive and measure re-engagement with your existing mobile app users. 
Publisher Certification program for in-app creative formats:
  • Execute your mobile campaigns with the confidence. While mobile rich media standards are widely accepted across the industry, publishers still vary in their implementation, resulting in discrepancies and inconsistent behavior of in-app creative. We are certifying publishers and networks to ensure their mobile apps can accept and run standard mobile in-app ad units (59 certifications completed to date.) 
In-app conversion tracking:
  • Measure in-app view-through and click-through conversions with Floodlight to report on mobile app downloads or any other in-app activities. Whether you are running an app install campaign or driving in-app purchases, you can now attribute these activities to your in-app media and better measure app campaign effectiveness.
TalkTalk drives 12% decrease in eCPA with HTML5 creative and mobile programmatic.
TalkTalk, a Telecom company based in the UK, has embraced cross-screen strategies for their campaigns and drove a 12% decrease in their eCPA using DoubleClick and Google Web Designer. Their creative agency, 22Design, used Google Web Designer to quickly learn and build HTML5 into TalkTalk’s campaign, getting the campaign live in a third of the expected time. 

Not only was the learning process much easier than anticipated, the HTML5 ads actually performed better than the Flash ads, indicating that TalkTalk’s audience was more receptive to the brand message on mobile devices than on desktops. Equipped with their new HTML5 creative and audience insights, TalkTalk was able to add mobile inventory to their programmatic media buy for the first time. 

Rather than waiting on the sidelines, TalkTalk has taken a proactive approach to trying new mobile strategies and techniques with DoubleClick. They started slow, tested what worked, and iterated on their findings, to get their campaigns running successfully across screens. 


We are excited about these new tools and will continue to improve our technology to help marketers and agencies more seamlessly build, execute and measure cross-screen campaigns.

Posted by the DoubleClick Marketing Team

(1) Mary Meeker’s “Internet Trends 2014” - http://www.kpcb.com/internet-trends 

Design with device in mind: Five strategies for successful cross-screen ad creative


Last week, the IAB hosted the second webinar in the "Make Mobile Work" Initiative, a program aimed at helping advertisers unlock the full value of mobile advertising. The webinar, entitled "Design with device in mind," focused on strategies for designing ad creative to work properly across screens. 

For those of you who weren't able to watch the webinar, you can view the recording here, but we also thought we'd share the strategies more broadly. 

Five strategies for developing successful cross-screen creative:

Note: "Step Zero" is to build your ads in HTML5, so that they can even show up across screens. We talked more about that in our first webinar. 

1) Design ads differently for mobile phones vs. tablets. 
Too often, advertisers lump mobile phones and tablets together as one and the same. But consumer behavior is very different on these two devices. On a smartphone, consumers are typically on the move and their information gathering is action-oriented -- they are searching for a specific answer or piece of information and want to find it quickly. On these smaller screens, you want to keep things short and provide information easily and quickly to users.

With tablets, on the other hand, consumers tend to be stationary and their information gathering is more entertainment-oriented -- they are browsing for interesting things and are more inclined to spend time flipping through content. On these larger screens, you can provide longer, more engaging experiences that use interactive elements, games, photos or videos. 

2) Make ads feel more like content. 
Consumers now expect engaging and interactive ad units, and they won't tolerate ads that are intrusive or unhelpful. Think of your ad as another opportunity, just like your website, to provide useful information for people to engage with your brand and learn more about your products. This is true for all of your digital creative -- desktop, tablet and smartphone -- but it's especially important for the tablet environment, where consumers are often in the “browsing” mentality. Here, they may be more likely to engage with an ad unit, so it's critical to ensure that your ad grabs their attention.

Cadillac used interactive video and multiple content areas in this ad to provide multiple ways for people to engage with the brand and check out the product, directly within the ad unit.

3) Take advantage of the device form-factor.
Build your ads to mimic the way people already interact with the device. Use the touch screen and the accelerometer within mobile phones and tablets to build in interaction modes like swipe, touch, tilt, and shake, giving people new ways to interact with your content.

The Alka-Seltzer ad unit from Project Re:Brief illustrates how you can build these interaction modes into your ad creative in a way that works seamlessly (and even augments) the creative narrative.

You should also take advantage of the call functionality and geo-targeting capabilities inherent in mobile phones. According to the “Mobile path to purchase” research, 69% of consumers searching on mobile phones expect businesses to be within 5 miles or less of their location. And 55% of users who search for a product on their mobile phone want to purchase within an hour of searching. (83% want to purchase within the day.) Use click-to-call, location extensions, and the maps API to help consumers learn more about your company and reach a purchase faster.

4) Alter your assets to work for mobile.
Your standard 30-second TV commercial may not be the best video format for your digital placements, so you should get creative about the length, frequency and sequencing of your video content. You can try shorter 5-15 second video ads on mobile phones, and longer video units on tablets. (Many of the best YouTube videos from brands today are two- five minutes long!) You should also consider sequencing your video ads to create a linear story for a viewer through subsequent ad units.

Another thing to consider is the speed and cost of people's internet connections on smartphones and tablets. People streaming or downloading video content when they are not on wifi have to pay for those data charges, so you should be smart about the file size of the ads that you show people. Identify whether the person is on a mobile network vs. wifi, and then serve smaller file sizes to the person on the mobile network, and larger file sizes (higher res assets, more interactive elements) to the person on the wifi network. This helps reduce viewers' frustration when they can't download and ensures that your mobile video message gets through with the quality you intended.

5) Create both in-app ad units in addition to mobile web ad units. 
Smartphone users spend up to 5 times more minutes per month on apps than they do using the mobile web. (Nielsen Smartphone Analytics, March 2013) So it’s important to build in-app ad units, in addition to mobile web ad units, that can get in front of that audience. Mobile applications also offer different contexts for you to place your ads, so it provides more variety when considering your creative and targeting strategies. 

------------------
These 5 strategies are just a taste of the content available through the "Make Mobile Work" Webinars. Our next webinar will be in mid-August and will focus on how to target your campaigns and reach the right people across devices. (RSVP here.) We hope you'll join us!

Posted by Becky Chappell, Product Marketing Manager, DoubleClick



The Layouts Series 2.0 – Mobile, made accessible: Bask Digital creates HTML5 ads in minutes instead of hours



Yesterday we explained how you can use Studio Layouts to open up more time in your project schedule for the brainstorming and creative ideation for your campaigns. Today, we’ll specifically take a look at a customer who used Studio Layouts to gain access to HTML5 creative. 

Bask Digital discovers HTML5 Layouts
HTML5 ads can be tricky to build, but HTML5 Studio Layouts let you take the same assets from your flash ads, plug them into the HTML5 Layout, and create HTML5 ads in minutes. For Bask Digital, a California-based web and social media shop for political campaigns, this ease-of-use enabled them to incorporate HTML5 ads into their campaigns for the first time at a large scale.

Previously, managing partner Jonas Kleiner used to spend hours creating HTML5 ads from scratch, compressing videos and tinkering with the code. The whole process was very complex and the steep learning curve meant that training his design team to code HTML5 ads was not a realistic option.

Once Kleiner learned about Studio Layouts, he found that he and his team were able to build HTML5 ads in 15-30 minutes, compared to the hours it used to take them to hand code everything. 

“We just have to create a background image, embed a YouTube video, and it’s done. And then we have all the tracking and tabbing available, just like with other Doubleclick Rich Media ads,” says Kleiner. “HTML5 Layouts brings the campaign down to the core of design. Rather than using effects, you need to create a really good image, and then use the power of good graphic design to drive eyeballs.” 

Using Studio Layouts, Kleiner and his team at BASK have been able to incorporate HTML5 into their campaigns, where it otherwise would not have been feasible. 

What HTML5 Studio Layouts are available?
There are currently nine different HTML5 formats available in Studio Layouts, including 3D image gallery, scroll box, slideshow, swipe gallery, video and image gallery, GDN Lightbox Featured Video, YouTube video wall and a featured video format. You can view demos of all of these formats here. 

In the near future, we’ll be launching our first in-app Layouts (HTML5 ad units that can work within mobile and tablet applications) as well as additional HTML5 formats for mobile web. 

To get started with Layouts, simply click on the Layouts tab in the top-level navigation bar in your DoubleClick Studio account. Learn more>>

Posted by Becky Chappell, DoubleClick Product Marketing