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.
Display & Video 360 supports the following HTML5 ad formats. To see what creatives of each type look like, visit the Rich Media Gallery.
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.
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.
Build an HTML5 creative
Google Web Designer
The primary asset of your HTML5 banner is the HTML file.
(advanced) Create an HTML5 banner from scratch
- Create a valid HTML file, including the
- Add a
<meta>tag to indicate the intended size for your creative:
<meta name="ad.size" content="width=[x],height=[y]">
- Add a click tag:
Add this script tag, and replace "
https://www.google.com" with your advertiser's landing page:
var clickTag = "https://www.google.com";
- Wrap the
<div>tag of your primary image or ad container with an
<a>tag to make it clickable:
<img src="image.png" />
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
- Fonts: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2
What to include in HTML5 .zip files
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.
What not to include in HTML5 .zip files
|Other .zip files||Do not include any .zip files within your HTML5 .zip file.|
|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.|
|Local or session storage||Display & Video 360 does not accept HTML5 assets that use local storage or session storage.|
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.
|Files with long names||
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.
Open an advertiser, then click Creatives in the left menu.
Click New Upload HTML5 or image.
Enter a name for the creative in Display & Video 360.
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
If your HTML5 upload is rejected, follow these troubleshooting steps.
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.
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
https://. To edit the reporting label or URL, hover over the row, then click 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.
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 Creative status tab of the creative. Learn more about the creative review process.
The following settings are 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.
- Click Serving properties.
- 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.
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.
- In the browser's address bar, copy the link.
- 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
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 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.
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.