- Getting Started
- HTML5 General Specifications
- HTML5 Advanced Specifications
- Uploading HTML5 Assets
- Additional Upload Tips
- HTML5 Best Practices
Note: If you are using Bannersnack to design your creatives, please view our Bannersnack Design Program Troubleshooting article here: https://help.choozle.com/html5-design-program-troubleshooting-bannersnack
HTML 5 assets are a type of display asset that must follow the same guidelines as display assets with some additional recommendations.
HTML5 General Specifications
File types: HTML5:
.ZIP, .HTML, .JS, .CSS, .JPG, .JPEG, .GIF, .PNG, and .SVG
IAB suggested file size:
Initial: 150 KB maximum
Max Initial File Load Count: 15 Files
Subsequent/Polite Load: 1 MB maximum
User-Initiated Load: 2.2 MB Recommended
Please note that custom font files ending in .ttf or .woff are not allowable within HTML5 uploads.
HTML5 Advanced Specifications
Here are some guidelines before you start the process of creating your ads, and feel free to send this information to your creative provider—they may have a better idea of how to decipher this guide if this all sounds like a foreign language:
A click-tracking <script> code must be somewhere between the opening <head> and closing </head> tag in the .html file of the creative.
This tracking code allows our system to track the clicking of the ad and the <script> code is as follows:
With this complete - DO NOT hardcode any Click-through URL into your HTML5 creative - instead we need to code any click of the ad to open a click window. The click-thru url is added during the upload process in the Choozle platform when you add the URL to the Landing Page URL field.
See this in the following example of the coded contents of a ‘.html’ file in your HTML5 creative file structure:
Attached is a starter file that contains the above index.html code (see an attached file titled 'index.html').
Uploading HTML5 AssetsTo upload an HTML5 asset, follow these steps:
1. Navigate to Libraries > Creative.
2. Within the Creative Asset Library, select the + button. Your HTML files or ZIP files can contain HTML, CSS, JS, and Image files.
3. Include the necessary details and UR.
Utilize click-through URL defined in HTML5 file: This checkbox will typically be left unchecked. However, if the primary HTML index file does include a hardcoded clickthrough URL this box should then be checked.
The Primary File field must match the name of the HTML index file within the zipped creative asset. The default setting is index.html as that is the most common name for HTML5 asset’s primary file. If the HTML primary file is named anything else, you can change the field to match the name of the HTML index file for upload.
The Click Tracking Parameter field is provided to the primary HTML file as a URL parameter. The name of the URL parameter is customizable at the time of creative upload or during editing. The Click Tracking parameter is case sensitive and must match the click tracking parameter throughout the HTML index file. The default setting for upload is clickTAG.
4. Click the green Save button.
Additional upload tips:
Compress Files: when creating a zip file on a Mac computer you must select the individual files and then right-click and select Compress X Files. If you right-click on the folder and create an archive zip file from the folder, Mac adds invisible _OSX folders to the zip archive and it will not upload.
Additional Upload Tips
Method 1: SingleHTMLFile
- The maximum HTML file size is 200 kilobytes.
Method 2: ZipCompressedFile
- The primary HTML file should be located in the root of the zip file.
- Zip files must contain no more than 100 files, including at least one HTML file for use as the initiating file for display. (We suggest keeping the file count low to minimize browser performance impact.)
- The maximum size of any automatically started video should be less than 1.1 megabytes
- The maximum size of any individual file is 2.2 megabytes.
- The maximum size of the primary HTML file should be 100 kilobytes.
- The Zip file should be smaller than 10 megabytes compressed and the contents should be smaller than 12 megabytes uncompressed.
- Only file types of HTML, JS, CSS, JPG, JPEG, GIF, PNG, and SVG may be included in the Zip file.
- Constraints: Under IAB guidelines, dynamic creatives are not to be used. Because they will be served inside an iframe, expandable creatives are not allowed because they are confined to the size of the creative.
- Graceful Degradation: You are responsible for ensuring that your creative gracefully degrades for browsers or devices that do not support HTML5 features used in your creative.
- Backup/DefaultClickthroughParameter: To correctly call the clickthrough page through the backup ad image, you must supply a click-through parameter for that purpose. If you wish to also use that clickthrough URL in your HTML5 creative, you can configure the creative to use the Backup Clickthrough URL as the Default Clickthrough URL.
- Retrieving the Click Tag Parameter: The Click Tag URL can be retrieved from using the following code:
By appending a URL escaped landing page to the click tag URL, our system will track the click and redirect the request to the given landing page. If no landing page is provided, we will track the click and redirect the result to the default landing page.
Different landing pages can be used for different actions. Please see the IAB’s Guidance for Ad Designers and Creative Technologists for more suggestions on implementing multiple landing pages.
- UsingMultipleClickthroughURLs: By appending a URL escaped landing page to the click tag URL, our system will track the click and redirect the request to the given landing page. Different landing pages can be used for different actions. Please see the IAB’s Guidance for Ad Designers and Creative Technologists for more suggestions on implementing multiple landing pages.
- Using the Click Tracking Parameter: When the advertisement is clicked on, the creative must direct the user to the correct click tag page in a new window. Please see the IAB’s Guidance for Ad Designers and Creative Technologists for more suggestions on implementing clicks in HTML5 ads.
- Size Definition The IAB has suggested that the dimensions of your creative be added to your primary HTML document in a meta tag inside of the head section of your document. The IAB has defined the dimension meta tag as:
Replace the width and height values with your creative’s dimensions. If an ad size meta tag is not provided in the primary HTML document, you will be prompted to enter dimensions when you submit the creative.
- Fonts: Please note that custom font files, which end in extensions .ttf or .woff, are not allowable within HTML5 files.
HTML5 Best Practices
To help increase performance from HTML ads, the IAB suggests that you include image sprites instead of many images to decrease the number of file requests made by your creative. The IAB has a list of commonly used sprite creation tools on their HTML5 Wiki page.
Video tags may be used in place of animations as long as the video file follows all IAB and Trade Desk guidelines for display creatives. Videos should always be muted unless a user intentionally triggers sound, and should not automatically be played on mobile devices.
Audio tags may be used on a creative. Audio tags should only play if an intentional user action starts the audio.
Different browsers have different subsets of HTML5 features enabled. Your creative may fail on a browser if it attempts to use a feature that is not enabled on the browser because not all browsers support all features of HTML5. It is your responsibility to ensure that your creative “gracefully degrades” in case the browser it is viewed on doesn’t support the features it uses.
The IAB suggests that you use “feature detection” to determine if a browser has the features your creative needs to be rendered. Feature detection is usually performed on the customer’s browser when the creative is shown. That is the most reliable way to determine if a feature is present on a given user’s browser. HTML5 Creative Specifications
The IAB suggests that you use a feature detection framework, and specifically mentions “modernizr” as an option. Modernizr documentation and files can be found at www.modernizr.com. Use of modernizr is outside the scope of this document. There are several options for displaying an ad when the browser it is running on a browser that does not support a feature. Some are listed below.
If a browser does not have a feature you need to display an ad, we suggest that you remove the need for that feature. One example provided by the IAB is to have a user input their Postal Code if their browser does not support geolocation.
If all else fails, the IAB suggests displaying a backup image instead of the HTML5 creative.