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.
On this page:
- Confirm your bundle is SSL compatible
- Ensure correct ZIP file structure
- Choose the correct environment for Google Web Designer
- Define dimensions
- Set click tags and click through URLs
Confirm your bundle is SSL compatible
HTML5 creatives must be SSL compatible to serve to HTTPS sites.
Ensure correct ZIP file structure
When preparing your HTML5 creative for upload, ensure the following about your ZIP file:
- Correct structure: The primary HTML file and all associated assets (images, scripts, CSS) must be at the root level of the ZIP archive or in clearly referenced subfolders. Do not nest the primary HTML file within multiple subdirectories.
- No corruption: Verify that the ZIP file is not corrupted and is properly compressed. Try unzipping the file locally to ensure its integrity before uploading.
- All assets included: All referenced assets (images, CSS, JavaScript files) must be included within the ZIP file. Avoid external hosting of essential creative components unless explicitly supported and whitelisted by Ad Manager. Ensure all file paths in your HTML are relative and correctly point to the assets within the ZIP structure.
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
sizemeta 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 asFluidaren’t supported.Example
<meta name="ad.size" content="width=300,height=250"> - For creative HTML files in Google Web Designer bundles, the
minWidthandminHeightproperties of thecreativePropertiesparameter 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. Learn more about adding HTML5 exits (including exits using Google Web Designer).
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
clickTagvariable 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.
