This guide will walk you through Abyssale's HTML5 export settings, explaining what each option does and how to ensure your generated banners are perfectly optimized for your chosen ad networks.
How to Access HTML5 Export Settings
You can find the HTML5 export settings on the Design Overview page. You need to configure these settings before generating your HTML5 file.
Follow these steps to access them:
From your Abyssale workspace, select the design you want to work with. This will take you to the Design Overview page.
On the left-hand menu, click on the Settings tab.
Scroll down to the HTML5 export settings section and expand it to see all available options.
Note: HTML5 export settings are only available on Animated design since it's the only type of design who allow to generate HTML5 output file.
The Importance of Setting Up First
t is crucial to set your HTML5 export settings correctly before you generate any visuals.
Once a visual is generated, its settings are locked. This means that if you later change the HTML5 settings for your design, those changes will not affect any visuals that were already generated. When you export an older visual, it will still use the settings it was generated with.
To apply new settings to your visuals, you must generate them again. This will create a new visual using the updated settings.
Adnetwork Options
The Adnetwork dropdown menu is the most important setting to choose when exporting your HTML5 banner. Selecting the correct ad network will automatically apply the recommended settings to match its technical requirements.
Here are the available options and what they mean:
Custom: This is the default option. It gives you full control over all the advanced settings, allowing you to manually configure the output.
Adform: This option is optimized for the Adform platform. It ensures your banner includes the necessary Adform DHTML library.
AdRoll: Configures your banner for the AdRoll network, which has a specific root folder structure and file size limit.
Amazon Ads: Optimizes your banner for the Amazon Ads network, including a specific file size limit and handling for external dependencies.
Boursorama: Tailored for the Boursorama platform with a specific file size limit.
Google Ads / Google Display & Video 360: These options are optimized for Google's advertising platforms. They adjust the banner to meet Google's strict file size and dependency rules. They also include the option to use the HTML5 Enabler, which is crucial for controlling click behavior on these networks.
IAB: This option exports the banner according to the Interactive Advertising Bureau's (IAB) universal guidelines, which are a set of general standards for digital ads.
Advanced Settings
The Advanced settings section allows for more granular control over your HTML5 export, especially when the "Custom" Adnetwork is selected.
Limit file-size per exported ZIP: When the "Custom" Adnetwork is selected, you can set a target file size. Abyssale's algorithm will try to optimize the output to match this size, but please note that the final size may vary depending on the content of your banner.
Bundle external dependencies: This setting controls whether external assets like fonts or images are included inside the ZIP file or loaded from a CDN (Content Delivery Network). For most ad networks, it's recommended to bundle them.
Include JPG fallback: Some ad networks require a JPG image fallback. When enabled, Abyssale will include a static JPG version of your banner in the export ZIP.
Include inline assets: This option embeds resources like images directly into the HTML5 file using Base64 encoding. This is useful for creating banners without external dependencies.
Enable infinite loop animation: You can enable this to make your banner animation loop continuously. You can also specify the exact number of loops. The default is 0, which means it will only play once.
CDN-hosted video: If your banner contains a video, enabling this setting will load it from a CDN instead of embedding it in the ZIP, which helps reduce the file size.
SVG export: This feature embeds compatible layers as inline SVG in the HTML5. It can improve the sharpness of your graphics and potentially reduce the file size.
We hope this guide has given you a clear understanding of Abyssale's HTML5 export settings. By correctly configuring these options, you can ensure your banners are perfectly optimized for your chosen ad networks.
If your ad network isn't on our predefined list, don't worry! We can add it for you at no additional cost. Just send us the technical specification documentation for your ad network, and we'll handle the rest. This will allow you to generate fully compliant banners for your specific platform.
If you have any further questions, feel free to reach out to our support team. Happy creating!