Recommended
More Related Content
Similar to Uploading HTML5 ads
Similar to Uploading HTML5 ads (20)
More from supergigas
Recently uploaded
Recently uploaded (20)
Uploading HTML5 ads
- 1. HTML5 Ads in the AdWords API
- 2. Agenda ● What are HTML5 ads? ● Creating HTML5 ads ● Uploading HTML5 ads via the API
- 4. 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
- 5. What do HTML5 Ads Look Like? Google Web Designer Showcase
- 6. 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
- 7. 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
- 9. 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
- 10. Several Ways to Create HTML5 Ads ❏ Google Web Designer ❏ Manual creation ❏ AdWords UI ad gallery ❏ Other authoring tools ✔ discussed today ✔ ✔
- 11. 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
- 12. 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>
- 13. Uploading HTML5 Ads via the API
- 14. New API Objects Template Ad ID 419 A new template ad which takes a MediaBundle object as a field MediaBundle object A new subclass of Media that contains the ad’s zip file and specifies the HTML entry point
- 15. 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);
- 16. 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
- 17. 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});
- 18. 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});
- 19. 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());
- 20. ● 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