This article is for the Google Ad Manager product only. It doesn't apply to other Google products. You can also review the Studio HTML5 requirements or the Google Web Designer HTML5 requirements.
This article provides guidelines for building and uploading HTML5 creative zip bundles to Google Ad Manager.
Guidelines should apply to any browser that supports HTML5. Some creatives may not work as desired. Test the HTML5 code before implementing it.
Confirm your bundle is SSL compatible
HTML5 creatives must be SSL compatible to serve to HTTPS sites.
Choose the correct environment for Google Web Designer
If you used Google Web Designer to build the HTML5 creatives, select the Display & Video 360 environment.
Define dimensions
- Use the
size
meta tag to define the dimensions that should be used to display your creative:<meta name="ad.size" content="width=[x],height=[y]">
. HTML5 creatives can only have fixed dimensions. Examples:300x250
,400x400
,728x90
. Dynamic sizes such asFluid
aren’t supported.Example
<meta name="ad.size" content="width=300,height=250">
- For creative HTML files in Google Web Designer bundles, the
minWidth
andminHeight
properties of thecreativeProperties
parameter must not be zero.Example
The following code results in an error:
"creativeProperties":{"minWidth":0,"minHeight":0,"maxWidth":0,"maxHeight":0}
Set click tags and click-through URLs
An exit is any clickable area that directs the browser to a landing page. Click tags define click-through URLs for each exit on your HTML5 creative.
When an exit is clicked, the creative calls Ad Manager for the associated click-through URL.
- Set the exit URL in your creative or ad, depending on your needs and the creative type. If you set click tags in both the creative and the ad, the ad-level setting takes priority.
Ad Manager detects click tags when you upload assets. You can change the click-through URL used by a click tag at any time, even after you export tags.
- Insert click tags in the
<head>
of your HTML documents.Example<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
- Use the
clickTag
variable as the destination in creatives.Example<a href="javascript:void(window.open(clickTag))">
<img src="images/dclk.png" border=0>
</a> - Make click tags easy for the ad server to read. Click tags shouldn’t include minification or obfuscation. You can use minifiers in the rest of your code and other files.
- Avoid hard-coded click-through URLs. Hard-coded URLs prevent Ad Manager from tracking clicks and prevent traffickers from updating the URL. Ad Manager will warn you if there are hard-coded URLs in your HTML5 code when you upload the bundle.