HTML5 Ad Creative Guideline

Marc Fevrier

December 04, 2024 19:34

All Ads Manager users can now upload HTML5 assets to Ads Manager when creating campaigns for Desktop, Mobile-App, and Mobile-Web.

How to upload a HTML5 ad creative

Select "New Creative" when setting up an ad group
Select the IMAGE tab
Upload the .zip file of a complete HTML5 display ad
Add a click-through URL
Click Save

ZIP File Requirements

Uncompressed 500kb max. 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
The index.html file needs to be less than 30kb.

Supported file types

HTML/Text: HTML, CSS, JS
Images: JPG, JPEG, GIF, PNG, SVG

What to include in HTML5 .zip files

HTML file

Required: ZIP containing HTML

The HTML document must contain a clickTag in the <head>
- Must contain a line like: var clickTag = ' ' (single-quotes)
Must include Meta tag declaring ad size is required (must be fixed, include valid ad size)

e.g. <meta name="ad.size" content="width=320,height=50">

Other files

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

What not to include in HTML5 .zip files

	Multiple ads per .zip files	Only include one ad per .zip file.
	Other .zip files	Do not include any .zip files within your HTML5 .zip file.
	Video files	Do not include any file types related to video
	Font files	Do not include any file types related to fonts
	Unreferenced files	Only include files if they are 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	Ads Manager does not accept HTML5 assets that use local storage or session storage.
	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.

You might experience a few errors when you upload an HTML 5 creative. If the upload is not working, check the index.html file and make sure both the ClickTag macro and the Meta Tag macro are added.

How to Add the ClickTag macro

Unzip HTML file, open the index.html file.
If you are editing on Mac, the file will open as 'Locked.' We would recommend downloading BBEdit on the App Store. Open the file in BBEdit.
Replace existing ClickTag macro with var clickTag = ' '
Save the index.html file. Re-zip the folder and upload into Ads Manager.

How to Add The Meta Tag Macro

Unzip HTML file, open the index.html file.
If you are editing on Mac, the file will open as 'Locked.' We would recommend downloading BBEdit on the App Store. Open the file in BBEdit.
Add the meta tag macro in the header of the code. Make sure the right creative size is reflected in the width and height. Tag example: <meta name="ad.size" content="width=300,height=250">
Save the index.html file. Re-zip the folder and upload into Ads Manager.