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 display banners and rich media banners. However, if you want to use creatives with advanced rich media functionality, including expandable or interstitial formats, use Studio. Studio creatives can be trafficked through Campaign Manager 360 and synced to your Display & Video 360 account.

HTML5 creatives can be assigned to display line items.

Supported HTML5 creative types

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

Display

An HTML5 creative with one or more fixed sizes and a fixed position on a web page or in a mobile app.

Supported display features:

  • Click tags – Click tags are a bit of code used to track clicks that open your advertiser's landing page.
  • Responsive creatives – You can package several different sizes of the same display banner as one responsive creative to simplify creative assignment.

Rich media

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.

Rich media banner creatives can include videos and detailed interaction metrics (including counters and timers), while an HTML5 display creative can't.

Supported rich media features and formats:

  • Rich media metrics – Use rich media metrics to track clicks, exits, interactions, video play time, and more.
  • In-banner video – In-banner video creatives are banners with embedded video players. Videos can be included in all rich media formats, except data-driven creatives.
  • Fullscreen expandable – A creative that can expand to fill a mobile device screen. For example, 3D Swirl creatives can expand to fullscreen.
  • Data-driven creatives – Data-driven creatives can personalize their look & feel for different customer segments.
  • Lightbox creatives – 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. See sample Lightbox creatives
  • Parallax creatives – Parallax is an animation effect you can use in rich media creatives to create the illusion of depth with layers of images. As the viewer scrolls the page up or down on a mobile device, the foreground and background images move at different speeds.

AMPHTML

Creatives built with AMP (Accelerated Mobile Pages) are faster, lighter, and more secure than regular creatives.

Build an HTML5 creative

HTML5 creatives can be built with any HTML5 editor, or you can use Google Web Designer, a free web app. After building your creative, package the files in a .zip file to upload it to Display & Video 360.

Create an HTML5 display banner

You can create an HTML5 display banner using Google Web Designer or any HTML5 editor.

Google Web Designer

Google Web Designer is a free HTML5 design and development tool you can use to make any type of HTML5 creative. When you use Google Web Designer, you can either start from scratch, or start from a built-in template.

HTML5 editor

The primary asset of your HTML5 banner is the HTML file.

 Image of the Download ZIP button next to the creative name in Studio Download a sample ZIP file

Advanced content (advanced) Create an HTML5 banner from scratch

  1. Create a valid HTML file, including the <html>, <head>, <title>, and <body> tags.
  2. Add a <meta> tag to indicate the intended size for your creative:
    <meta name="ad.size" content="width=[x],height=[y]">
  3. Add a click tag:
    1. Add this script tag, and replace "https://www.google.com" with your advertiser's landing page:

      <script type="text/javascript">
          var clickTag = "https://www.google.com";
       </script>
    2. Wrap the <div> tag of your primary image or ad container with an <a> tag to make it clickable:
      <a href="javascript:window.open(window.clickTag)">
        <div id="container">
          <img src="image.png" />
        </div>
      </a>

Create a rich media banner

Rich media banners can be built with an HTML5 editor or Google Web Designer. Start by creating a banner ad, then add media components such as video, YouTube video, or audio.

Create an AMPHTML banner

AMPHTML banners use a specialized set of HTML5 tags to quickly load mobile web pages. You can also use AMPHTML to create fast-loading ads, and ads that are compatible with AMPHTML pages.

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, see Reduce HTML5 file size.

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, however the videos must be hosted on an external server, or the creative must be built with Studio:
.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.

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. 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.
    Note: 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 360 advertiser.

  7. 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 information section of the creative. Learn more about the creative review process.

Advanced contentAdvanced settings

The following settings are optional.

  •  (Optional) By default, when your creative is served as an interstitial in a mobile app, if it's not as wide as the device's screen, Display & Video 360 will automatically scale the creative to fit while keeping the same aspect ratio. If you wish to disable scaling, check Don't scale to fit device width. To allow scaling, leave the box unchecked.

  • Add a Backup image and reporting label. If you're uploading a responsive creative, you can upload one backup image per size.

  • Upload a Polite load image. This image is shown when there are delays loading your primary creative files, or on slower network connections.

  • If your Display & Video 360 advertiser is linked to a Campaign Manager 360 account, add a tracking ad to get reporting in the linked Campaign Manager 360 advertiser. Note: This option is only available for rich media, Swirl, and custom data-driven creatives.
    1. Click Serving properties.
    2. Search for an existing Campaign Manager 360 tracking ad. To give it time to sync, you should create a tracking ad in Campaign Manager 360 before making your creative in Display & Video 360.

      Tip: To make it easier to find the right tracking ad, assign only 1 tracking ad per ad and placement in Campaign Manager 360.
  • Click Additional details to append a tracking tag to the creative, add an integration code, or notes.

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 can't I upload my creative?

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.

For more help, see Troubleshoot creative uploads.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue