Documentation
Learn how ad:personam automatically transforms HTML5 banners to meet Adform DSP requirements. Our built-in converter handles clickTAG implementation, library injection, and manifest generation—no manual coding required.
HTML5 banners on ad:personam are powered by the Adform DSP, which requires specific technical standards for click tracking and landing page redirection. Whether you create banners with Google Web Designer, Adobe Animate, or custom code, our platform automatically handles the transformation to ensure your creatives work seamlessly across premium inventory.
Why HTML5 Banners Need Transformation
Adform DSP has strict requirements for HTML5 banner files to ensure reliable click tracking, viewability measurement, and cross-platform delivery. Standard HTML5 banners built with third-party tools typically use generic implementations that aren't compatible with Adform's serving infrastructure.
Key Adform requirements:
- DHTML library integration — Every banner must load Adform's JavaScript library to enable click tracking and event reporting
- clickTAG variable handling — Landing page URLs must be retrieved dynamically via Adform's API, not hard-coded in your HTML
- Manifest file — A structured JSON file defines banner metadata including dimensions, clicktags, and custom events
- Event tracking — User interactions (clicks, expansions, video completions) must be reported using Adform-specific methods
Without these modifications, clicks won't track correctly, landing pages won't redirect, and your campaigns won't deliver properly.
How ad:personam Handles HTML5 Banners
When you upload an HTML5 creative to ad:personam, our HTML5 banner converter for Adform-compatible ZIPs automatically transforms your files behind the scenes. You don't need to write any code or manually edit your creative—the conversion happens instantly during upload.
What the converter does:
1. Injects the Adform DHTML Library
The converter scans your index.html file and automatically inserts the Adform DHTML library within the <head> tag:
<script>
document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
</script>
This library provides the dhtml object used for all Adform API interactions.
2. Transforms clickTAG Implementation
If your banner has hard-coded landing page URLs (common in Google Web Designer exports or custom HTML), the converter automatically replaces them with Adform's dynamic clickTAG retrieval:
Before (generic implementation):
element.addEventListener('click', function() {
window.open('https://example.com', '_blank');
});
After (Adform-compatible):
const clickTAGvalue = dhtml.getVar('clickTAG', 'https://example.com');
element.addEventListener('click', function() {
window.open(clickTAGvalue, '_blank');
});
The dhtml.getVar() method retrieves the landing page URL from Adform's system when the banner serves live. The second parameter provides a fallback URL for local testing.
3. Generates or Updates manifest.json
Every Adform-compatible banner requires a manifest.json file in the ZIP archive root. The converter automatically creates or updates this file with your banner's specifications:
{
"version": "1.0",
"title": "My Banner 300x250",
"description": "Converted by ad:personam",
"width": "300",
"height": "250",
"clicktags": {
"clickTAG": "https://example.com"
},
"source": "index.html"
}
If your banner has multiple clickable elements with different destinations, the converter detects them and generates multiple clickTAG entries (clickTAG, clickTAG2, clickTAG3, etc.).
4. Preserves Banner Assets and Structure
All your creative assets—images, fonts, CSS files, JavaScript libraries—remain untouched. The converter only modifies the necessary HTML and JavaScript code to meet Adform requirements while preserving your banner's design and animations.
Supported HTML5 Workflows
The converter works with HTML5 banners created using any tool or method:
Google Web Designer
Export your banner as a ZIP file directly from Google Web Designer. The converter automatically:
- Locates the hard-coded exit URL in the
gwd-eventshandler - Replaces it with
dhtml.getVar('clickTAG', originalURL) - Preserves all GWD-specific libraries and animation timelines
Adobe Animate (formerly Flash Professional)
Export as HTML5 Canvas and upload the ZIP. The converter handles:
- CreateJS library integration (preserved alongside Adform DHTML)
- Canvas click event transformation
- Multi-frame animation compatibility
Hand-coded HTML5
For custom-built banners, the converter intelligently identifies:
- Click event listeners attached to DOM elements
- Anchor tags with
hrefattributes - Form submissions that need landing page redirection
Other authoring tools
Banners from Bannerflow, Celtra, or any other HTML5 authoring platform are supported—as long as the ZIP contains standard HTML, CSS, and JavaScript files.
Multiple Landing Pages (Multiple clickTAGs)
If your banner has several clickable areas leading to different destinations, define them in your JavaScript before upload:
// Multiple destinations example
const clickTAG1 = 'https://example.com/product-a';
const clickTAG2 = 'https://example.com/product-b';
const clickTAG3 = 'https://example.com/contact';
The converter will detect all clickTAG variables and automatically:
- Replace each with
dhtml.getVar('clickTAG', url),dhtml.getVar('clickTAG2', url), etc. - Register all clicktags in the
manifest.jsonfile - Enable separate click tracking for each destination in the Adform system
This gives you granular analytics on which creative elements drive the most engagement.
Testing Your Converted Banner
Once uploaded, you can preview your HTML5 banner directly in ad:personam before publishing it to a line item. The preview environment simulates the Adform serving infrastructure, so you can verify:
- Click functionality — Does clicking open your landing page in a new tab?
- Animation playback — Do transitions and effects work as designed?
- Responsive behavior — Does the banner scale correctly at different viewport sizes?
If you need to make changes, simply re-upload a corrected ZIP—the converter will process it again instantly.
Best Practices for HTML5 Banner Creation
To ensure smooth conversion and optimal campaign performance:
File structure
- Keep all assets in the root directory or organized subfolders (
images/,css/,js/) - Name your main HTML file
index.html(most tools do this by default) - Avoid spaces or special characters in file names
File size
- Target 150 KB or less for fast load times (uncompressed, excluding external libraries)
- Compress images using modern formats (WebP, optimized PNG)
- Minify CSS and JavaScript before export
Click areas
- Make clickable regions visually obvious (buttons, CTAs, product images)
- Use
cursor: pointerCSS to indicate interactivity - Ensure click targets are at least 44×44 pixels for mobile compatibility
External dependencies
- Prefer CDN-hosted libraries (jQuery, GSAP) over bundled copies to reduce file size
- Test that external resources load reliably—some ad environments block certain domains
Troubleshooting
"Click not tracking" after upload
Ensure your original banner had a defined click event listener. The converter cannot add click functionality if your HTML didn't include one to begin with.
"Invalid ZIP structure" error
The ZIP must contain index.html in the root directory. If your authoring tool exports a subfolder structure, manually re-zip with index.html at the top level.
"Multiple clickTAGs not detected"
If you have several landing pages, make sure each is assigned to a distinct JavaScript variable with "clickTAG" in the name (clickTAG, clickTAG2, myClickTAG3). The converter uses naming patterns to detect multiple destinations.
Next Steps
- Upload your first HTML5 banner — Step-by-step guide to the upload process
- Publish creatives to line items — Configure tracking pixels and destination URLs when attaching banners to campaigns
- AdChoices compliance — AdNotice icon automatically added to all HTML5 banners for privacy transparency