Search
Clear search
Close search
Google apps
Main menu

Prepare non-rich HTML5 assets for DCM

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

DCM HTML5 display banners have simple click tracking and are uploaded directly to DoubleClick Campaign Manager. To learn how to build rich media creatives using DoubleClick 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

Compatibility

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.

Flexible dimensions

Another advantage of HTML5 creatives is flexible dimensions. You can use the same flexible creative for all different placement sizes. Its dimensions adjust to fit the size of your ad and placement. An HTML5 creative is flexible the same way webpages are flexible.

For example, you can load the same webpage on your mobile device that you can with a big desktop monitor. Likewise, you can load the same HTML5 creative to a small placement or a big placement. Just like a webpage, it adjusts to the right size for the space available. That's because HTML5 creatives load within an iFrame (an element that loads HTML documents) served by DCM. The iFrame can expand or contract to fit the placement.

Use case for flexible dimensions

Say you need to deliver a creative to three different placements: a 300x50 placement, a 200x300 placement, and a 400x400 placement.

For other creative types, you'd need three different creatives, one for each placement size. It's like finding three different pictures to fit three different frames.

For HTML5 creatives, the size is flexible. You can upload a single HTML5 creative and assign it to all three placements. It will adjust for each size, like a picture that expands or contracts to fit each frame. This is especially useful if you want to use the creative on both (a) a placement on a mobile site, designed for smaller screens, and (b) a regular site.

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 DCM.

DCM HTML5 creative setup resources

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

Prepare and upload HTML5 assets

To set up display creatives or HTML5 assets, upload your HTML5 creative to DCM 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. DCM 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 DCM.

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

    • No local or session storage: DCM 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 DCM. This image is used if DCM 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

    DCM 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 DCM in Trafficking.

    Learn more about Trafficking in the DCM Help Center:

Upload issues

Why can't I select my HTML5 creative file for upload to DCM?
  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 DCM?

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, DCM does not allow these APIs.

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

To help protect user privacy, DCM 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 DCM settings instead. For example, some advertisers use these APIs for ad targeting and frequency caps, but this isn’t necessary: you can use DCM 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 DoubleClick.)

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 DoubleClick 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

Resources

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

Dimensions

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 can have fixed dimensions or flexible dimensions.

  • Fixed dimensions are regular dimensions. E.g., 300x250 or 400x400. Traffickers can only assign these creatives to placements of the same size.

  • Flexible dimensions adjust to the size of your placement. In DCM, a flexible dimension is indicated with a zero. E.g., 0x0, 300x0, or 0x250. Traffickers in DCM can assign to flexible creatives to any size placement.

Size meta tag examples
  • Fixed: for fixed dimensions, (such as 300x250), enter fixed the dimensions as shown below.

    <meta name="ad.size" content="width=300,height=250">
  • Flexible: for flexible dimensions, enter a 0 for the width and a 0 for the height:

    <meta name="ad.size" content="width=0,height=0">
  • Flexible width: for a flexible width and a fixed height, enter a 0 for the width and a fixed value (such as 250) for the height:

    <meta name="ad.size" content="width=0,height=250">
  • Flexible height: For a flexible height and a fixed width, enter a fixed value (such as 300) for the width and a 0 for the height:

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

Click tags

Click tag guidelines

Include one or more click tags in your HTML file. Click tags allow DCM 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 DCM from tracking clicks. 

Use Google Web Designer for exit events

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

To add a click tag using a Tap Area:

  1. Be sure your creative has a button or other clear visual call-to-action element for the user to click or tap.
  2. Drag the Tap Area component from the components pane 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 TapArea component (gwd-taparea_1)
    Event Tap Area > Touch/Click
    Target Google Ad > Exit
    Receiver gwd-ad
    Configuration

    Metrics ID:

    A label, such as "Buy Product" that will make your reporting meaningful.

    URL:

    The landing page URL to direct people to when they click your call to action.

    Collapse on exit (expanding ads only)

    Check this box if you want expanding ads to collapse whenever the user taps an exit.

    Pause media on exit

    Check this box if you want to pause any video or audio whenever the user taps an exit.

Sample click tag using JavaScript

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">
  // Replace http://www.example.com with your own landing page.
  // DO NOT use http://www.google.com.

  var clickTag = "http://www.example.com"; </script>
</head>
<!-- The rest of your creative code goes here. -->
</html>

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

<a href="javascript:window.open(window.clickTag)">
  <img src="images/dclk.png" border=0>
</a>
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:

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

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

<a href="javascript:window.open(window.clickTag)">
  <img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag1)">
  <img src="images/dclk.png" border=0>
</a>
<a href="javascript:window.open(window.clickTag2)">
  <img src="images/dclk.png" border=0>
</a> 

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 DCM trafficker.

Document

<html>
  <head>
    <title>Flex by flex html page</title>
    <meta name="ad.size" content="height=0,width=0">
    <style>
      html, body {background-color: blue;}
      p { color:white; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var clickTag = "http://www.example.com"; // 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");
        $("p").text("Size="+WinWidth+"x"+WinHeight);
      }
      $(document).ready(function () {
        resizeWindow();
      });
      $(window).resize(function () {
        resizeWindow();
      });
     </script>
  </head>
<body>
  <a href="javascript:window.open(window.clickTag)"><p>Page loading...</p></a> </body>
</html>
Was this article helpful?
How can we improve it?