Search
Clear search
Close search
Google apps
Main menu

HTML5 requirements

When building your HTML5 zip bundle, please follow the requirements described below. You can see some examples of HTML5 files in the Rich Media Gallery.

If you use Google Web Designer to build HTML5 creatives, be sure to select “DoubleClick” as the environment.

Confirm that your bundle is SSL compatible

HTML5 creatives must be SSL compatible to serve to HTTPS sites.

Follow dimension guidelines

Dimension guidelines
See the size meta tag example below.

Set creative dimensions in your HTML file with the size meta tag: <meta name="ad.size" content="width=[x],height=[y]">.

Unlike images or videos, HTML documents don't have dimensions on their own. For this reason, use the size meta tag to indicate the intended size for your creative. The size meta tag is an optional parameter in your HTML document. It's the best way to be sure your creative renders at the right dimensions.

HTML5 creatives can only have fixed dimensions (e.g., 300x250, 400x400, 728x90, etc.). Dynamic sizes such as “Fluid” aren’t supported.

For creative HTML files in Google Web Designer bundles, the minWidth and minHeight properties of the creativeProperties parameter must be non-zero. For example, "creativeProperties":{"minWidth":0,"minHeight":0,"maxWidth":0,"maxHeight":0} results in an error.

Size meta tag example
  • Fixed: for fixed dimensions, (such as 300x250), enter as shown below
    <meta name="ad.size" content="width=300,height=250">

Follow click tag guidelines

Click tag guidelines
See the click tag sample below.

Click tags define click-through URLs for each exit on your HTML5 creative. An exit is any area that can be clicked that directs the browser to a landing page.

Learn more about adding HTML5 exits (including exits using Google Web Designer) in the DoubleClick Creative Solutions Help Center. This Help Center is intended for creatives generators.

When an exit gets a click, the creative calls DFP for the click-through URL associated with that exit. You can set this URL in your creative or your ad, depending on your needs and the type of creative you’re using. If you set click tags in both your creative and your ad, the ad-level setting overrides the creative-level settings.

DFP detects click tags when you upload your assets. You can change the click-through URL your click tag uses anytime, even after you export tags.

There are some best practices for setting up your click tags:

  • Make sure your creative uses the click tag variable as the click destination.
  • The click tag should be easy for the ad server to read — no minification or obfuscation, though you can use minifers in the rest of your code and in other files.
  • We do not recommend hard-coded click-through URLs in your asset because that prevents DFP from tracking clicks and prevents traffickers from updating the URL. After upload, DFP will warn you if there are hardcoded URLs in the asset.
Sample click tag insertion

Here's an example of a click tag inserted in an HTML document:

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>

Your creative must use the click tag variable as the click-through URL:

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
Was this article helpful?
How can we improve it?