HTML5 creatives

HTML5 creatives are ads built with JavaScript, HTML, and CSS that serve on webpages or in mobile apps. They can include images, animation, videos or any combination of these elements. They can support different interactions, including clicks, taps, and hovers. They can also expand larger than their initial size to give you a larger canvas for your brand's message.

Display & Video 360 supports direct upload of HTML5 rich media banners, including in-banner video. However, if you want to use creatives with advanced rich media functionality (such as expanding creatives, interstitials, and creatives with flexible dimensions), these must be uploaded to either Studio or Campaign Manager.

What is rich media?

Rich media is a digital advertising term for an ad that includes advanced features like video, audio, or other elements that encourage viewers to interact and engage with the content. Rich media ads include additional tracking metrics to record rich interactions, giving you a clearer picture of how consumers engage with your ad.

While text ads sell with words, and display ads sell with pictures, rich media ads offer more ways to involve an audience with an ad. You can access aggregated metrics on your audience's behavior, including number of expansions, whether they browsed through a product gallery, or played a game; which calls to action got more clicks, and more. Rich media ads help you get granular data on the success of your creative concept.

Supported formats

Display & Video 360 supports the following HTML5 formats. To see what creatives of each type look like, visit the Rich Media Gallery.

Banner

A creative with a fixed size and position on a web page or in a mobile app. A banner is the most basic rich media ad format. Rich media banner creatives can include videos and additional interaction metrics, while a standard HTML5 display creative cannot.

In-banner video

In-banner video creatives are display creatives with embedded video players. Videos can be included in all rich media formats, except data-driven creatives.

Data-driven creatives

Data-driven creatives are display creatives that can personalize their look & feel for different customer segments. You can create your own data-driven format by uploading a rich media banner built using Google Web Designer that is dynamically bound to the brand awareness schema.

Lightbox

Lightbox is a premium brand format for the Google Display Network. Lightbox is an expanding creative that works on both desktop and mobile. On desktop computers, a two-second mouseover expands the Lightbox. On mobile devices, you tap to expand. When expanded, the Lightbox takes over most of the available screen space to feature brand content, including videos, maps, games, and more.
Lightbox is the only expanding rich media format you can directly upload to Display & Video 360.

Build a creative

Google Web Designer is a free HTML5 design and development tool you can use to make any type of HTML5 creative. Visit Google Web Designer's Help Center to learn more about creating Display & Video 360 ads with this free design and development tool.

Create an HTML5 creative using Google Web Designer

When you use Google Web Designer, you can either start from scratch, or start from a built-in template.

Create a new ad from scratch

  1. To create a new file, click File > New file. This opens the New File dialog.
  2. Enter a name for your creative, then select Display & Video 360 for the Environment.
  3. Customize the creative options, then click OK.
  4. Add creative elements such as images or text, then drag components to the stage from Google Web Designer's components panel (for example, the Video component, or the Carousel Gallery component).
  5. Add at least 1 exit using the Tap Area component.

Create a new ad from a template

  1. Click File > New from template. This opens the Template gallery.
  2. (Optional) Click the filter select button to narrow the template options based on any of the following categories: ad types, platforms, network, features, verticals, dimensions.
  3. Hover over a template, then click Use to create a new file using that template.
  4. Enter a name for your new creative, then click OK.
  5. Customize the template by adding your own images, text, or components.
  6. Add at least 1 exit using the Tap Area component.

Publish your Google Web Designer creative files

  1. When your creative is complete, compress it into a .zip file for Display & Video 360.
    1. Click File > Publish > Publish locally.
    2. In the Settings pane, check the Create Zip checkbox.
    3. Click Publish.
  2. Upload the published .zip file to Display & Video 360. See Add an HTML5 creative below.
What to put in an HTML5 .zip file

HTML5 .zip files can include up to 100 files, and have no size limit. Regardless, you should keep your .zip file as light as possible. The only files in your .zip file should be the assets you need for your final HTML5 creative. For help on slimming down your HTML5 creatives' file size, see Reduce HTML5 file size in the Creative Solutions Help Center.

Name your .zip file

Give your HTML5 .zip a filename shorter than 50 characters (including the ".zip"). If your filename is longer, the creative upload will fail.

Supported file types

  • HTML/Text: HTML, HTM, CSS, JS
  • Images: JPG, JPEG, GIF, PNG, SVG, WEBP
  • Fonts: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2

What to include in HTML5 .zip files

checkmark HTML file

The primary asset of your HTML5 creative is the HTML file. This is the entry point for your creative.

File must include at least 1 exit and be able to load into an iframe. Display & Video 360 serves the iframe along with your assets.

checkmark Other files

Include other files (for example, image, CSS, and JavaScript files) that are loaded by the HTML file.

Rich media creatives also support the following file types:
.avi, .mov, .mp4, .m4v, .mpeg, .mpg, .oga, .ogg, .ogv, .webm, .wmv

What not to include in HTML5 .zip files

Red X Other .zip files Do not include any .zip files within your HTML5 .zip file.
Red X Unreferenced files Only include files if they referenced by the HTML file. For example, do not include any source or authoring files that aren't loaded by the final creative.
Red X Local or session storage Display & Video 360 does not accept HTML5 assets that use local storage or session storage.
Red X Backup image

Do not include backup images in your HTML5 .zip file unless they're referenced by the HTML file. For example, if you're using the same image as both background image and backup image.

You must upload backup images separately, in the Backup images section.

Red X Files with long names
  • Filenames must be 200 single-byte characters or less.
  • Video and audio filenames must be 50 single-byte characters or less.
(Optional) Backup images

Backup images are optional, and only serve when your creative assets aren't supported by the viewer's browser or platform. For example, when someone's browsing with Internet Explorer 8 and your creative uses CSS animations.

Backup images must be uploaded separately from your creative .zip file. If you don't upload a backup image, a system-generated blank image will be served instead.

Exits

An exit (also known as a click tag) is any area in your creative that someone can click or tap to open an advertiser's landing page. Every creative must include at least one exit.

You can add an exit to your creative in any of the following ways:

  • Use Google Web Designer's tap area.
  • Define a JavaScript variable called "clickTag".
  • Use the Enabler (Enabler.exit()) to track exits in rich media formats.
Add an exit with Google Web Designer

Google Web Designer's Tap Area component is fully compatible with Display & Video 360. No custom code is required.

  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 ad

    Note: A similar action, Exit ad (overrides URL), doesn't allow you to modify the URL outside of the creative, such as within Studio or Campaign Manager, and should only be used for dynamic ads.

    Receiver gwd-ad
    Configuration
    • 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.
Add a click tag with JavaScript

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

Step 1: Create the clickTag variable 

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
  // Replace http://www.example.com with your own URL.
  var clickTag = "http://www.example.com";
</script>
</head>
</html>

Step 2: Attach the click tag to the element you want people to click

Use the click tag variable as the landing page URL to open when someone clicks a call to action in your creative. This sample click tag anchor wraps an image, but it could also wrap an HTML div or other element, depending on how big the clickable area in your creative is. For a real example, see the sample creative above.

<a href="javascript:window.open(window.clickTag)">
  <img src="images/dclk.png" border=0>
</a>
Add an exit using the Enabler

Use the Enabler when you want to add detailed interaction tracking to your rich media creative in addition to tracking exits.

  1. If you don't already have one, create a button element in your creative using a <div> tag. Create the element in your HTML file and give it an ID, for example: cta-exit.
    <div id="cta-exit"></div>
    Do not use anchor tags <a></a> for Enabler exits. The Enabler uses custom code to open your URL in a way that's compatible across browsers and platforms. If you use an HTML anchor tag, your link will open in two tabs or windows.
  2. Style the button using CSS.

    #cta-exit {
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  3. Assign an exit to the button. For the Enabler.exit method to work, you must first add and initialize Studio's Enabler in your creative.

Example code
function ctaExitHandler(e) {
  Enabler.exit('CTA Exit');
}
document.getElementById('cta-exit').addEventListener('click', 
    ctaExitHandler, false);

The name you give your exit with this method (in this example, "CTA Exit") will appear in the creative details in Display & Video 360. You can modify this name to affect what shows up in the final report.

Upload an HTML5 creative

You can upload a .zip file containing your HTML5 creative files directly into Display & Video 360.

Upload an HTML5 creative
  1. Open an advertiser, then click Creatives in the left menu.

  2. Click New and then Upload and then HTML5 or image.

  3. Enter a name for the creative in Display & Video 360.

  4. To add your creative files, drag a .zip file from your computer and drop it over "Drag file here". Or, click Upload, then select the .zip file from your computer. Learn what to include in HTML5 zip files
    Drag files to upload them

    If your HTML5 upload is rejected, follow these troubleshooting steps.
  5. Select one or more serving dimensions for your creative. Display & Video 360 supports creatives with either a single size, or responsive HTML5 creatives that support multiple sizes.

  6. (Optional) To add a backup image and backup reporting label, expand the Backup image panel. If you're uploading a responsive creative, you can upload one backup image per size.

  7. (Optional) Upload a polite load image. This image is shown when there are delays loading your primary creative files, or on slower network connections.

  8. In the Events section, review and edit the exits detected in the creative. For each exit (or click tag) you can edit the landing page URL, beginning with http:// or https://. To edit the reporting label or URL, hover over the row, then click Edit Edit.

    After you save the creative, it may take a few minutes for an updated landing page to appear in preview or in your synced Campaign Manager advertiser.

  9. (Optional) Click Additional details to append a tracking tag to the creative, add an integration code, or notes.

  10. Save your creative.

Once a creative has been added to Display & Video 360, the creative will be manually and automatically reviewed to ensure the creative functions correctly and is compliant with the creative policies of both Display & Video 360 and any inventory sources that have explicit creative requirements. You’ll see information about the creative’s review status in the Audit status section of the creative. Learn more about the creative review process.

Share a preview

You can share HTML5 creatives with others for review or sign-off using a preview link. Anyone you share this link with will be able to view it. No sign-in is required.

You can preview from the list of creatives or from the creative's details page:

  • From the Creatives page in either List view or Gallery view, click Preview ​​.
  • From the creative's Details page, below the creative name, click Preview.

The preview opens in a new browser tab.

  1. In the browser's address bar, copy the link.
  2. Paste and send this copied link to the person you want to review your creative.

Shared previews are full page previews that allow you to test how the creative looks in different environments, and whether events are recorded at the right time. Learn more about preview options

Frequently Asked Questions

How do I fix issues with previewing my creatives?

You may have difficulty previewing your creatives in Display & Video 360 if your creatives aren't loaded using SSL. (These are also known as non-secure creatives.)

To preview non-secure creatives, click the shield icon Insecure content in your browser's address bar, then click Load unsafe scripts (if you're using Chrome) or Disable Protection on This Page (if you're using Firefox). Once the page reloads, you should be able to see your non-secure creative.

Why is the creative size showing up incorrectly after I uploaded the file?
The creative size is determined by either the creative or the backup image. Make sure that your backup image matches the size of your main creative or select the correct dimensions for your creative using the Dimensions drop-down menu.
Why was my creative asset rejected?

Common problems that will prevent you from uploading a creative asset include:

  • Filename is too long: For most file types, the maximum length is 200 characters. For audio and video files, the maximum length is 50 characters. (Shorten these maximums in half for languages with wide characters.)
  • ZIPs within ZIPs: Including a compressed ZIP file inside another ZIP file is not allowed.
  • Creative has no clickthrough: All creatives must include at least 1 exit that leads to an advertiser landing page.
  • Google Web Designer creative needs update: If your creative was built using Google Web Designer, you may see the error ”Metadata in the Google Web Designer HTML is invalid“. This means the creative was built with an outdated version of Web Designer and the creative needs an update. Upgrade to the latest version of Web Designer, then open and re-publish the creative.
Was this helpful?
How can we improve it?