HTML5 creatives are ads built with JavaScript, HTML, and CSS that serve on web pages or in mobile apps. They can be either display or rich media.
- Display – Image ads you can click to go to an advertiser's website
- Rich media – Ads with interactive elements like animations, image galleries, games, or embedded videos
Display & Video 360 supports direct upload of display and rich media banners. But 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. For examples of each creative type, 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 measure 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
Rich media is a digital advertising term for ads that have advanced features like video, audio, or other engaging elements. Rich media ads support more metrics to record rich interactions, giving you a clearer picture of how people engage with your ad. (For example, rich media ads can have counters and timers to tell you how many times or how long people played a game in your ad.)
Supported rich media features and formats:
- Rich media metrics – Count clicks, exits, interactions, video play time and more with rich media metrics.
- In-banner video – Ads with video players inside them. Videos can be included in any rich media format except data-driven creatives.
- Full screen expandable – Ads that can expand to fill a mobile device screen. For example, 3D Swirl creatives.
- Data-driven creatives – Data-driven creatives can personalize their message for different customer segments.
- 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
Create an HTML5 display banner
Google Web Designer
HTML5 editor
If you prefer to write your own code, you can create a banner using any HTML5 editor.
(advanced) Create an HTML5 banner from scratch
- Create a valid HTML file, including the
<html>,<head>,<title>, and<body>tags. - 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://google.com" with your advertiser's landing page:<script type="text/javascript">
var clickTag = "https://google.com";
</script> - 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
Studio's Enabler is required in rich media banners. Use it to:
- Securely load videos and images with
Enabler.getUrl(). - Open the advertiser's landing page with
Enabler.exit(). Use exits instead of click tags in rich media banners.
To prevent delays caused by creative disapprovals, follow the rich media guidelines as you make your creative.
What to put in an HTML5 .zip file
HTML5 .zip files can include up to 100 files, and have no size limit. But to meet publisher requirements, try to keep your .zip file as small as possible.
Name your .zip file
Give your HTML5 .zip a filename shorter than 50 characters (including the ".zip"). If your filename is longer, you won't be able to upload it.
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
- HTML file: The primary asset of your HTML5 creative is the HTML file. File must include at least 1 exit or click tag and be able to load into an iframe. Display & Video 360 serves the iframe along with your assets.
- Other files: Images, CSS, and JavaScript files used in your HTML file. Rich media creatives also support the following file types, but 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
- More .zip files: Don't add more .zip files within your HTML5 .zip file.
- Unused files: Only add files if they're used by the HTML file. Don't add any source or authoring files.
- Local or session storage: Display & Video 360 doesn't accept HTML5 assets that use local storage or session storage.
- Backup image: Don't include backup images in your HTML5 .zip file. Upload backup images separately, in the "Backup images" section.
- Files with long names: Video and audio filenames must be 50 single-byte characters or less. Other filenames must be 200 single-byte characters or less. (For example, Japanese, Chinese, and Korean use double-byte characters. In these languages, the limits are 25 and 100.)
(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.
Upload backup images separately from your creative .zip file. If you don't upload a backup image, a system-generated blank image is served instead.
Upload an HTML5 creative
Before you get started, make sure you've packaged your creative assets into a .zip file. Learn what to include in HTML5 zip files
-
Open an advertiser, then click Creatives in the left menu.
-
Click New, then Upload, then HTML5 or image.
-
Enter a name for the creative in Display & Video 360.
-
To add creative files, drop a .zip file from your computer over "Drop file here". Or, click Upload, then select a .zip file.
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 one size, or responsive HTML5 creatives with more than one size.
-
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://orhttps://. To edit the reporting label or URL, point to 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.
Display & Video 360 manually and automatically reviews your creatives to make sure they work. Creatives are also checked to make sure they comply with Google's ad policies and the policies of exchanges they can serve on. You can check the status of your creatives in the Creative status tab.
Advanced settings
The following settings are optional.
-
When your interstitial ad doesn't fit the screen on mobile, Display & Video 360 scales it to fit. To prevent scaling, turn on "Don't scale to fit device width."
-
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 add a tracking tag, 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.
Frequently Asked Questions
Why is the creative size showing up incorrectly after I uploaded the file?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 single-byte characters or 100 double-byte characters. For audio and video files, the maximum length is 50 single-byte characters or 25 double-byte 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 get 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, go to Troubleshoot creative uploads.