Although we believe strongly in the superiority of our WebGL technology, you may have some HTML5 ads that you still want to use. You can easily upload your existing HTML5 banner(s) as standalone creatives. We will optimize the assets and the code so it loads faster and turn them sustainable. After publishing you can see basic analytics (impressions, clicks, engagement) in campaign analytics.
Why import HTML5?
There are a lot of benefits with bringing your existing HTML5 banners:
all your ads are managed and analyzed in one place. This will reduce friction when working with different platforms and simplifies your processes.
your assets are optimized using our state-of-the-art proprietary AI algorithm. This will reduce the total load size of your ad and will raise their viewability and CTR. A smaller ad size will also help to comply with publishers' requirements.
the banners can be shown on all known devices and web pages. We have years of experience with making sure that our ads are displayed on a variety of different hardware and technology.
serving via Nexd will lower your overall ad costs for serving. Did you know that Google takes a percentage of your ad budget from a simple serving service? Our price for CPM is a mere half the desktop price.
you get a unified tag for all your ads that will put a smile on your ad ops face 😎
we make your HTML5 more sustainable than any alternative solution
In other words, you will secure better results with fewer ad Euros/dollars all while your colleagues are more relaxed and happier.
How to import HTML5?
1. When you are in the creative list view you can find in the header a button "Import" -> "Import HTML5":
2. Drag from your file system to the drop file area or click on the "choose file" HTML5 banner ZIP file:
We will then:
optimize all the images, videos, and code so that it is lighter on the network and faster to load.
read the information in
manifest.json. We can import banners made with Google Web Designer, Adform, Mediasmart, etc. (An example can be located further down in the article.)
Pro tip: You can select multiple HTML5 banner ZIP files with one upload.
3. Preview the imported HTML5 banner(s). When the banner does not have a manifest.json file then you have to set the creative width and height manually.
Now, all you need is to select a platform (if needed) and export the banner as usual.
Should the need arise you can also replace the banner.
HTML5 best practices to keep in mind
1. Use manifest.json to define the source file, width and height for your HTML5 ad.
Metainfo serves as the foundation of truth for HTML5 ads, particularly when your ad consists of multiple .html files. The metainfo ensures that your ad starts from the correct .html file. Additionally, specifying the ad's width and height in the manifest file ensures that the ad is presented at the desired size.
Here's an example of the required information in manifest.json:
{
"width": 300,
"height": 250,
"source": "index.html"
}
2. Include the ad.size meta tag.
This will guarantee that our framework accurately adjusts your ad to various situations where it's necessary, such as placement issues or different pixel density screens.
Example of the meta tag:
<meta name="ad.size" content="width=300, height=250">
3. The index.html (and manifest.json) must be in the root of the HTML5 zip.
Here are two examples of acceptable file placements:
4. The root of your HTML5 ad should consist of just a single HTML node.
The root element should also specify the size for your ad, ensuring that when scaling occurs, the entire content scales correctly.
Here's a good example of a single HTML node:
<style>
#ad { width: 300px; height: 250px; }
</style>
<body>
<div id="ad">
<div id="head">
<!-- your ad code here-->
</div>
<div id="content">
<!-- some more ad code here-->
</div>
</div>
</body>
Here's a bad example of a single HTML node:
<style>
#head, #content { width: 300px; height: 250px; }
</style>
<body>
<div id="head">
<!-- your ad code here-->
</div>
<div id="content">
<!-- some more ad code here-->
</div>
</body>
5. Keep the root node as a block type.
Here's a good example where the div is block by default:
<body>
<div id="ad">
<!-- your ad code here-->
</div>
</body>
This is a bad example because anchor elements are inline by default:
<body>
<a id="ad">
<!-- your ad code here-->
</a>
</body>
Another bad example where the root element is set as grid:
<style>
#ad { width: 300px; height: 250px; display: grid; }
</style>
<body>
<div id="ad">
<!-- your ad code here-->
</div>
</body>
6. For a responsive HTML5, add the following CSS style rule
If your HTML5 AD is responsive and handles it’s own scaling and positioning, please add the following CSS style rule to your top level element:
transform: scale(1)!important;
7. Use relative paths for your assets instead of absolute paths.
To ensure the proper delivery of your ad through our global ad servers, it's crucial to employ relative paths for the assets within the ZIP file. All assets contained in the imported ZIP will be optimized and uploaded to our media server, ensuring swift and eco-friendly loading worldwide.
Using absolute paths would result in the file being loaded directly from that path, bypassing our ad servers. This would lead to every impression generating traffic to your server. If your server is unprepared to handle this surge of impressions, it can lead to issues in displaying the ad. Such issues could impact analytics and overall client conversions.
Here's a good example of using a relative path:
<style>
#ad { width: 300px; height: 250px; }
</style>
<body>
<div id="ad">
<img src="assets/example.jpg" />
</div>
</body>
Here's a bad example (which means using an absolute path):
<style>
#ad { width: 300px; height: 250px; }
</style>
<body>
<div id="ad">
<img src="https://yourdomain.com/assets/example.jpg" />
</div>
</body>
7. Only include assets in the zip file that are actually used in the ad.
We process all the contents of the imported ZIP, and all files are uploaded to the media server during export.
However, if the ZIP contains assets that are not actually used, it will have several negative effects:
It increases the overall ad size due to the larger ZIP file.
It prolongs the overall load time since the ZIP is bigger.
It extends the import time as it takes more time to process extra assets.
8. Use JavaScript to open links.
Our framework detects clicks and navigation events. To ensure smooth tracking and compatibility with any DSP-defined macros, it's recommended to open links usng JavaScript.
9. Set click tags and click-through URLs
An exit is any clickable area that directs the browser to a landing page. Click tags define click-through URLs for each exit on your HTML5 creative. Set the exit URL in your creative, depending on your needs and the creative type. When adding a default click action in CM, it overrides the clickTag variable or assigns a value to it.
Insert click tags in the
<head>of your HTML documents.Example
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
Use the
clickTagvariable as the destination in creatives.<a href="javascript:void(window.open(clickTag))">
<img src="images/logo.png">
</a>
Having troubles?
Please bear in mind that this feature is in beta and may need some troubleshooting. In the unlikely event that the imported banner did not work perfectly, then let us know.