uploading html5 ads
TRANSCRIPT
HTML5 Ads in the AdWords API
Agenda
● What are HTML5 ads?
● Creating HTML5 ads
● Uploading HTML5 ads via the API
What are HTML5 Ads?
What are HTML5 Ads?
An HTML5 ad is a display ad consisting of a self-contained HTML, CSS, and Javascript package, which can provide rich animation and interactivity
What do HTML5 Ads Look Like?
Google Web Designer Showcase
The Past● Create HTML5 ads only via the AdWords UI● Support only for predefined HTML5 ad
templates or Google Web Designer ads
Today● Create HTML5 ads via the API● Use any authoring tool
HTML5 Ads in AdWords
HTML5 vs Flash
Flash Ads HTML5 Ads
Maturity ● Mature ● Maturing
Availability ● Closed standard proprietary to Adobe
● Open standard
Browser support
● Consistent desktop support, but no longer played automatically in Chrome
● Limited mobile support
● Supported by all major browsers on desktop and mobile
● Not all browsers are consistent
Creating HTML5 Ads
Key AdWords HTML5 Ad Policies
● Ad is a single zip file <150 KB● Format must be a standard
ad size● Only relative references are
permitted○ External references (outside the zip file)
allowed only for Google fonts, Google-hosted jQuery, and exit handler
See the AdWords Help Center for the complete list
Several Ways to Create HTML5 Ads
❏ Google Web Designer
❏ Manual creation
❏ AdWords UI ad gallery
❏ Other authoring tools✔ discussed today
✔
✔
Google Web Designer
● Simple but powerful WYSIWYG interface● Many pre-made templates available● Includes required meta tags automatically● Low barrier to entry for your creative design team
Manual Creation
<!DOCTYPE html><html> <head> <meta name="ad.size" content="width=300, height=250"/> <link type="text/css" rel="stylesheet" href="css/index.css" />
<script src= "https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"> </script> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> <script type="text/javascript" src="js/index.js"></script> </head>
<body> <!-- Ad content goes here -->
<div class="actions"> <button onclick="ExitApi.exit()" class="button">Call to Action</button> </div> </body></html>
Uploading HTML5 Ads via the API
New API Objects
Template Ad ID 419A new template ad which takes a MediaBundle object as a field
MediaBundle objectA new subclass of Media that contains the ad’s zip file and specifies the HTML entry point
Code Sample
● Create the TemplateAd object TemplateAd html5Ad = new TemplateAd(); html5Ad.setName("Ad for HTML5"); html5Ad.setTemplateId(419L); html5Ad.setFinalUrls(new String[] {"http://example.com/html5"}); html5Ad.setDisplayUrl("example.com/html5");
Dimensions dimensions = new Dimensions(); dimensions.setWidth(300); dimensions.setHeight(250); html5Ad.setDimensions(dimensions);
Code Sample (Contd.)
● Create the MediaBundle object
byte[] html5Zip = com.google.api.ads.common.lib.utils.Media .getMediaDataFromUrl("https://goo.gl/9Y7qI2");
MediaBundle mediaBundle = new MediaBundle(); mediaBundle.setData(html5Zip); // takes base64 encoded bytes of the zip file mediaBundle.setEntryPoint("carousel/index.html"); mediaBundle.setType(MediaMediaType.MEDIA_BUNDLE);
Note: You can also refer to a previously uploaded MediaBundle object
Code Sample (Contd.)
● Populate the TemplateAd TemplateElementField media = new TemplateElementField(); media.setName("Custom_layout"); media.setFieldMedia(mediaBundle); media.setType(TemplateElementFieldType.MEDIA_BUNDLE);
TemplateElementField layout = new TemplateElementField(); layout.setName("layout"); layout.setFieldText("Custom"); layout.setType(TemplateElementFieldType.ENUM);
TemplateElement adData = new TemplateElement(); adData.setUniqueName("adData"); adData.setFields(new TemplateElementField[] {media, layout});
html5Ad.setTemplateElements(new TemplateElement[] {adData});
Code Sample (Contd.)
● Create the AdGroupAd
AdGroupAd html5AdGroupAd = new AdGroupAd(); html5AdGroupAd.setAdGroupId(adGroupId); html5AdGroupAd.setAd(html5Ad); html5AdGroupAd.setStatus(AdGroupAdStatus.PAUSED); // optional
AdGroupAdOperation operation = new AdGroupAdOperation(); operation.setOperator(Operator.ADD); operation.setOperand(html5AdGroupAd);
AdGroupAdReturnValue result = adGroupAdService.mutate(new AdGroupAdOperation[] {operation});
Code Sample (Contd.)
● Uploading a MediaBundle separately byte[] html5Zip = com.google.api.ads.common.lib.utils.Media .getMediaDataFromUrl("https://goo.gl/9Y7qI2");
MediaBundle mediaBundle = new MediaBundle(); mediaBundle.setData(html5Zip); // do not call setEntryPoint() mediaBundle.setType(MediaMediaType.MEDIA_BUNDLE);
mediaBundle = (MediaBundle) mediaService.upload(new Media[] {mediaBundle})[0];
Map<MediaSize, Dimensions> dimensions = Maps.toMap(mediaBundle.getDimensions()); System.out.printf( "HTML5 media with ID %d, dimensions '%dx%d', and MIME type '%s' " + "was uploaded.%n", mediaBundle.getMediaId(), dimensions.get(MediaSize.FULL).getWidth(), dimensions.get(MediaSize.FULL).getHeight(), mediaBundle.getMimeType());
● Google Web Designer - https://goo.gl/2X7BpS● HTML5 ad policies - https://goo.gl/LIoKJ7● Swiffy - https://goo.gl/grjyIh● Template ads - https://goo.gl/7kRFZv● Example SOAP request - https://goo.gl/J0Fn16
Resources