Prepare non-rich HTML5 assets for Campaign Manager

This guide helps you prepare HTML5 assets to upload into Campaign Manager as a display creative.

Campaign Manager HTML5 display banners have simple click tracking and are uploaded directly to Campaign Manager. To learn how to build rich media creatives using Studio, read the Rich Media HTML5 guides instead.

New to HTML5? See the About HTML5 creatives section below to learn about the creative types that use HTML5.

About HTML5 creatives

Expand all   Collapse all

General advantages to HTML5

HTML5 creatives don't require third-party plugins or special file types. This makes them compatible with most mobile devices, including iOS. In fact, HTML5 features are increasingly supported across major devices and browser types.

Creatives that use HTML5
  • Display creatives are non–rich media creatives made with HTML, JavaScript, and CSS that support the following features:

    • click tag reporting on individual exits
    • unlimited asset file size
    • polite loading
  • Rich media Rich media creatives include interactive elements, like videos, games, or galleries. They can also expand to provide a larger canvas for your brand's message, or fill the screen between natural content breaks. Each element can include detailed tracking metrics to get insight on creative performance, including up to 100 exits and up to 400 total tracking events. Rich media creatives must be created in Studio, then published to and trafficked in Campaign Manager.

Campaign Manager HTML5 creative setup resources

Use the following guides to set up HTML5 banners or display creative for direct upload into Campaign Manager:

Prepare and upload HTML5 assets

To set up display creatives or HTML5 assets, upload your HTML5 creative to Campaign Manager in the form of a .zip file. The .zip should consist of an HTML file plus any files referenced by the HTML file.

  1. Create a folder.

  2. Add your HTML file plus any assets referenced by the file. Don’t include any other files. You may organize your assets into subfolders, but do not compress these subfolders.

    What to include in your .zip file

    What to include

    • HTML file: The primary asset of your HTML5 creative is the HTML file. This is the entry point for your creative. It must be a complete HTML document that includes at least one click tag and can load into an iFrame. Campaign Manager serves the iFrame along with your assets. See below for click tag help.

    • Other files: Include any other files that are referenced by the HTML file. Do not include any files that are not referenced.

    What not to include

    • No .zips within .zips: Do not include any .zip files within your HTML5 .zip file. However, if you have several separate HTML5 .zip files for several separate HTML5 creatives, you can zip these files together and batch upload them to Campaign Manager.

    • No unreferenced files: As noted above, only include files if they referenced by the HTML file.

    • No local or session storage: Campaign Manager does not accept HTML5 assets that use local storage or session storage.

    • No backup assets: Do not include backup assets in your HTML5 .zip file unless they are referenced by the HTML file.

      • The trafficker must upload a separate backup image to Campaign Manager. This image is used if Campaign Manager cannot use your primary assets because they are not supported. Do not include this backup image with your HTML5 .zip file.

      • However, some HTML files may be coded to use their own backup assets when a browser can't handle all the features. In this case, you'll need to include a backup image in your .zip in addition to the file the trafficker must upload separately.

    Supported file types and limits for your .zip file
    • Supported file types: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, and SVG.

    • Maximum number of files: Your .zip can include up to 100 files.

    • Maximum size: Depends on your account settings. 

    Sample HTML5 file Help with .adz files

    Campaign Manager also accepts HTML5 creatives in the form of an .adz file. Just treat the .adz file exactly as you would a .zip file. For your purposes, there is no difference between .adz and .zip.

  3. Compress the folder into a .zip file. Need help compressing folders? Try the Windows or Apple help centers.

  4. The trafficker can now upload this .zip file to Campaign Manager in Trafficking.

    Learn more about Trafficking in the Campaign Manager Help Center:

Upload issues

Why can't I select my HTML5 creative file for upload to Campaign Manager?
  1. This issue may be that your file is not in .zip or .adz format. Compress your HTML file (and any other files it references) into a single .zip and try again.

  2. If you think you do have an .zip file, check the file extension just to be sure: right-click the file and check its properties to confirm the extension is .zip.

  3. If you still can't select your file, you may need to contact support.

Why was my upload rejected by Campaign Manager?

If you have problems uploading your file: The issue may be that your file did not contain valid HTML5 assets, contained more than 100 files (the maximum), or exceeded your file size limit. Another issue may be that your HTML5 asset uses JavaScript APIs for local storage or sessions storage. To help protect user privacy, Campaign Manager does not allow these APIs.

Why doesn't Campaign Manager allow JavaScript APIs for local storage or session storage?

To help protect user privacy, Campaign Manager does not accept HTML5 assets that use local storage or session storage. If your upload is rejected for this reason, work with your developer to remove the forbidden APIs. Then try uploading the asset again. Specifically, you cannot upload HTML5 assets with the following JavaScript APIs:

  • indexedDB
  • localStorage
  • openDatabase
  • sessionStorage

If your advertising goals depend on these APIs, try using Campaign Manager settings instead. For example, some advertisers use these APIs for ad targeting and frequency caps, but this isn’t necessary: you can use Campaign Manager to set up many kinds of targeting, and to set frequency caps. Ask support for help implementing workarounds. (Just keep in mind that regardless of how you set up your asset, you should only attempt to capture data that meets the privacy requirements in your contract with Google Marketing Platform.)

What is local storage and session storage? These are two kinds of HTML5 Web Storage. They are ways to store data on a browser. Local storage stores a file on the browser across browsing sessions. It remains on the browser permanently, unless the user clears the browser cache or deletes the file manually. Session storage only stores data on the browser during a particular browsing session. Once you close and restart the browser, all the session-stored data will be cleared.

Why isn't this type of storage allowed? The stored file can potentially include code designed to capture Personally Identifiable Information (PII), track cross-session browser activity, or send other data to third parties that may violate the terms of your Google Marketing Platform contract. This kind of data collection is certainly not the only use of local and session storage, but it's one possible use, because the file can include any type of code.

Developer guidelines


IAB and Studio
  • IAB HTML5 guidelines: We developed HTML5 banner creatives based on these guidelines, plus a number of our own enhancements.


Dimension guidelines

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 for Campaign Manager can have fixed dimensions e.g., 300x250 or 400x400. Traffickers can only assign these creatives to placements of the same size

Size meta tag examples
  • Enter fixed the dimensions as shown below.

    <meta name="ad.size" content="width=300,height=250">

Click tags

Click tag guidelines

Include one or more click tags in your HTML file. Click tags allow Campaign Manager to pass a click-through URL to the creative and track clicks. They also allow traffickers to change the click-through URL after your creative's been built and trafficked.

  • Make sure your banner 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 HTML file because that prevents Campaign Manager from tracking clicks. 

Use Google Web Designer for exit events

Google Web Designer's Tap Area component is fully compatible with Campaign Manager. No custom code is required.

To add a click tag using a Tap Area:

  1. Be sure your ad has a button or other clear visual call-to-action element for the user to click or touch.
  2. Drag the Tap Area component from the Interaction folder of the Components panel to the stage, and position it over the call to action.
  3. Click the new event button  in the Events panel.
  4. In the event dialog, select the following options:
    Target The Tap Area component (gwd-taparea_1)
    Event Tap Area > Touch/Click
    Action Google Ad > Exit
    Receiver gwd-ad
    • Metrics ID - A label (e.g., "CTA") to make reports easier to understand.
    • URL - The exit URL.
    • Collapse on exit - For expandable ads, check to collapse the ad when the user closes the ad.
    • Pause media on exit - Check to stop video and audio playback when the user closes the ad.
    • Collapsed page on exit - For expandable ads, the page to show when the user closes the ad.
Sample click tag using JavaScript

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

<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
  // Replace with your own landing page.
  // DO NOT use

  var clickTag = ""; </script>
<!-- The rest of your creative code goes here. -->

Make sure your creative uses the click tag variable as the clickthrough URL:

<a href="">
  <img src="images/dclk.png" border=0>
Sample with multiple click tags using JavaScript

Display creatives support multiple click tags. Here's an example of multiple click tags inserted in an HTML document:

<meta name=”ad.size” content=”width=300,height=250”>
<script type="text/javascript">
  var clickTag = "";
  var clickTag1 = "";
  var clickTag2 = "";
<!-- The rest of your creative code goes here. -->

Make sure your creative uses the appropriate click tag variable as the clickthrough URL:

<a href="">
  <img src="images/dclk.png" border=0>
<a href="">
  <img src="images/dclk.png" border=0>
<a href="">
  <img src="images/dclk.png" border=0>

Sample files

Sample HTML document

Here's an example of a complete HTML document for an HTML5 creative. The click tag and size meta tag are shown in bold.

Because this creative is so simple, no other assets are needed. If this were your HTML5 creative, you'd compress it into a .zip file, change the file extension to adz, and send it to your Campaign Manager trafficker.


    <title>Flex by flex html page</title>
    <meta name="ad.size" content="height=0,width=0">
      html, body {background-color: blue;}
      p { color:white; }
    <script src=""></script>
      var clickTag = ""; // Replace with a real URL.
      function resizeWindow()
        $('p').css({ 'width':'100%', 'text-align':'center' });
        var h1 = $('h1').height();
        var h = h1/2;
        var WinHeight = $(window).height();
        var w = WinHeight/2;
        var m = w - h;
        var WinWidth=$(window).width();
        $('p').css("margin-top",m + "px");
      $(document).ready(function () {
      $(window).resize(function () {
  <a href=""><p>Page loading...</p></a> </body>
Was this article helpful?
How can we improve it?