Search
Clear search
Close search
Google apps
Main menu

How to prepare HTML5 assets for DCM

 

This guide helps you prepare HTML5 assets to upload into DCM.

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

Expand all   Collapse all

About HTML5 creatives

Creatives that use HTML5
  • Display creatives are non–rich media creatives that can use image or HTML5. Display creatives offer:

    • click tag reporting on individual exits
    • polite loading
  • Rich media All other HTML5 creatives use rich media elements, so they must be created in Studio (e.g., display expanding or display interstitial creatives). You can get HTML5 rich media creatives from Studio and set them up in DCM. This includes rich media display banner HTML5 creatives, which use rich media elements.

Creative setup resources
About HTML5

Compatibility

HTML5 creatives don't require third-party plugins or special file types. This makes them compatible with most mobile devices, including iOS.

Flexible dimensions

HTML5 creatives can use 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.

Prepare and upload HTML5 assets

To set up display creatives with HTML5, 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 % in the name: Do not include a percent symbol (%) in the names of any of the files in your asset.

    • 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: Unlimited. 

    Sample HTML5 .zip 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:

Upload issues

Use the HTML5 Validator to check if your .zip files will be accepted by DCM.
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 or contained more than 100 files (the maximum). 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 creatives based on these guidelines, plus a number of our own enhancements.

  • Studio build guide: Use this guide to add video or expanding features to your HTML5 creative.

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

Click tags define landing pages for each exit on your creatives with HTML5 assets. An exit is any area that can be clicked that directs the browser to a landing page. Each click tag defines the landing page for a different exit.

When an exit gets a click, the creative calls DCM for the landing page associated with that exit. You can set this landing page in your creative or your ad, depending on your needs.

DCM detects click tags when you upload your assets. You can change the landing page your click tag uses anytime, even after you export tags. That's because the click tag is a standard variable, a placeholder for the landing page rather than a hardcoded value.

There are some best practices for setting up your click tags since the ad-level overrides the creative-level settings in display creatives:

  • ​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 URLs in your asset because that prevents DCM from tracking clicks and prevents traffickers from updating the URL. After upload, DCM 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>

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

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
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 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 either a .zip or .adz file 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.google.org";
      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>
HTML5 files with click tags

These HTML5 files are used to dynamically change URLs and record clicks with the DoubleClick ad servers.

Simple

Calls a click tag upon a click.

Including Parameter

Calls clickTag when the button is clicked. This example demonstrates passing a parameter to the destination URL (e.g., a zip code).

Including a # sign example

Coded to break up the tracking call to DoubleClick and the landing page URL of the button. This needs to be done for any creative that clicks through to a destination URL that contains a pound sign (#).

Multiple click tags

Contains multiple click tags.

Loader

.zip containing two .zip files, the parent file and the child file. The parent loads the child file.

HTML5 files with image Floodlight tags

These are samples of HTML5 files that are used for recording user interactions in non–rich media creatives.

On click

Calls an image Floodlight tag when the button is clicked.

On load

Calls an image Floodlight tag when the HTML5 is loaded.

HTML5 files with dynamic Floodlight tags

These are samples of HTML5 files that are used for recording user interactions in non–rich media creatives, when images are not used.

On click

Calls a dynamic Floodlight tag when the button is clicked.

On load

Calls a dynamic Floodlight tag when the HTML5 is loaded.

HTML5 files with special tracking

This is a sample of an HTML5 file that is used for recording user interactions in non-rich media creatives.

1x1 tracking pixel

Calls a DoubleClick 1x1 tracking pixel when it loads.

Was this article helpful?
How can we improve it?