Simply put, HTML5 is the programming language that allows you to animate banners. As you can imagine, animated banners look more attractive and can bring much better results in comparison to usual banners. In this article, we will discuss the requirements of HTML5 creatives and explain how to use and run this type of banners on adserver.online platform.
How to create HTML5 creatives
1. At first, you need to create a folder.
2. Then, add your HTML file and any assets referenced by the file into that folder, but don’t include any other files. You may organize your assets into subfolders, but do not compress these subfolders.
What to include
- HTML file: The primary asset of your HTML5 creatives is the HTML file. This is the entry point for your creative. It must be a complete HTML document that includes at least one click tag and can load into an iFrame. Ad server serves the iFrame along with your assets. See below for click tag help.
- Other files: Include any other files that are referenced by the HTML file. Do not include any files that are not referenced.
What NOT to include
- Do not include any .zip files within your HTML5 .zip file.
- Do not include unreferenced files: As noted above, you need to include files only if they are referenced by the HTML file.
- Don't use the % symbol in the name any of the files in your asset.
- No backup assets are allowed in your HTML5 .zip file unless they are referenced by the HTML file.
Supported file types and limits of your .zip file
- Supported file types: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, MP4, OGG.
- The maximum number of files: Your .zip can include up to 100 files.
- Maximum file size: 5Mb
We recommend checking zip-files here https://h5validator.appspot.com/dcm/asset before uploading to the ad server.
Using click tag in HTML5 creatives
In order to process clicks, ad server adds a transparent overlay over HTML5 creatives by default. Thus, you don't need to modify your banner to make it work with Adserver.Online.
However, if you want your banner to be partially clickable or if it requires extended interaction with visitors (e.g. in a game), you can use window.clickTag variable in your js-code.
<a href="javascript:window.open(window.clickTag)" target="_blank"> <img src="images/superbanner.png"> </a>
If you still haven't decided whether you need to use this ad format or not, you can have a look at some examples of HTML5 creatives here.