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
It 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 network automatically applies the recommended settings to match its specific technical requirements.
Here are the available options and what they mean:
Custom: The default option, providing full control over all advanced settings.
Adform: Optimized for Adform, ensuring the inclusion of the necessary DHTML library.
AdRoll: Configures specific root folder structures and file size limits for AdRoll.
Amazon Ads: Handles specific file size limits and external dependencies for Amazon.
Boursorama: Tailored for the Boursorama platform requirements.
Google Ads / Google Display & Video 360: Adjusted for Google's strict file size and dependency rules. These include the HTML5 Enabler, crucial for controlling click behavior on Google 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.
Ströer: Optimized for the Ströer advertising network specifications.
Advanced Settings
The Advanced settings section allows for more granular control over your HTML5 export, especially when the "Custom" Adnetwork is selected.
ClickTag Management
The ClickTag defines how your destination URL is handled within the banner code. You can choose between two methods:
Hardcoded ClickTag (default): The destination URL is written directly into the HTML code during generation.
Best for: Direct buys or simple campaigns where the URL is fixed.
Pros: Works immediately without ad server configuration.
Dynamic ClickTag (URL Parameter): The banner uses a standard variable (e.g.,
clickTag) that is filled by the Ad Server at the moment of display.Best for: Programmatic (RTB) and professional platforms
Pros: Allows "Ad Ops" teams to change the destination URL or add tracking (UTMs) without regenerating the files.
File & Performance Optimization
Limit file-size per exported ZIP: Set a target file size (e.g., 150kb). Abyssale's algorithm will attempt to optimize the output to match this size, though final size may vary based on content.
Bundle external dependencies: Controls whether assets like fonts or images are included inside the ZIP file or loaded from a CDN. Most ad networks recommend bundling them for reliability.
Include inline assets: Embeds resources like images directly into the HTML file using Base64 encoding. This is useful for creating banners with zero external file dependencies.
SVG export: Embeds compatible layers as inline SVG in the HTML5. This improves graphic sharpness and can potentially reduce file size.
Animation & Video
Enable infinite loop animation: Allows your banner animation to loop continuously or for a specific number of cycles. The default is 0 (plays once).
CDN-hosted video: If your banner contains video, this loads it from a CDN instead of embedding it in the ZIP, significantly reducing the final file size.
Compatibility
Include JPG fallback: Some networks require a static image if HTML5 cannot be displayed. When enabled, Abyssale includes a static JPG version of your banner in the export.
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!