TheDigital Peloton tags specs sheet
This document outlines the required specifications for display advertisements and HTML5 banners to ensure correct setup and trafficking through the DP AdForm platform.
1.General Display Ad Specifications
The following specifications apply to standard image-based(.jpeg, .png, .gif) and basic HTML5 or 3rd-party banners.
1.1. Standard Display Ad (Desktop)
Supported File Types
.jpeg (.jpg), .png, .gif, or HTML5/3rd-party tags
Maximum File Size
300 KB
Animation Limit
Maximum 30 seconds (must stop after 30 seconds)
Popular Sizes
300x250, 970x250, 728x90, 300x600, 160x600
1.2. Standard Display Ad (Mobile)
Supported File Types
.jpeg (.jpg), .png, .gif, or HTML5/3rd-party tags
Max Initial Load Size
5 KB
Max Total Load Size
200 KB
Animation Limit
Maximum 30 seconds
In-App Requirements
MRAID v1 and v2 supported. Must include an obvious close button (for full-screen units). Autoplay must be muted.
Popular Mobile Sizes
Smartphone: 300x250, 320x50, 320x480, 250x250. Tablet: 728x90, 300x250, 160x600, 300x600, 1x1.
1.3. Rich Media Ads
Supported File Types
HTML5 (rich media assets) or 3rd-party tags
Recommended File Size
300 KB
Supported Types
3D Cube, Venetian, Scratch Unit, Responsive Carousel, etc.
2. HTML5Banner Requirements
All HTML5 banners must adhere to strict packaging and coding standards for correct implementation on the DP AdForm platform.
2.1. File Packaging and Structure
- All banner files must be compressed into a single .zip file.
- The required files (manifest.json and the main HTML source file) must be located in the root of the .zip file. AdForm cannot correctly extract files if they are nested in sub-folders at the root level.
- The total banner 'weight' is measured based on the unzipped content.
2.2. The manifest.json File
The manifest.json file is mandatory and defines the banner's parameters.
version
Must be included (e.g., "1.0")
title
The banner's name (e.g., "300x250 Example Banner")
width / height
Defines the banner dimensions in pixels (e.g., "300", "250")
source
The file name of the main HTML source file (e.g., "yourbanner.html")
clicktags
Required if the banner has click-through functionality. All clickTAG instances must be defined here.
events
Optional. If custom events are used, they must be defined in the events list section.
Example manifest.json (for multiple click tags):
JSON
{
"version":"1.0",
"title":"300x250 Example Banner",
"width" :"300",
"height":"250",
"clicktags": {
"clickTAG": "https://default.landingpage.com",
"clickTAG2": "https://secondary.landingpage.com"
},
"source":"index.html"
}
2.3. AdForm DHTML Library
Every HTML5 banner must include the AdForm DHTML library within the <head> tags of the main HTML file to enable click tracking and communication with the AdForm system.
Required Code Snippet:
HTML
<script>
document.write('<script src="' + (window.API_URL ||'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' +Math.random()) + '"><\/script>');
</script>
2.4. Click Tag Implementation
The click-through functionality must be implemented using AdForm's dhtml.getVar() function to correctly retrieve the assigned click-through URL.
- Define the Click Tag: Ensure the click tag names (e.g., clickTAG, clickTAG2) are defined in the clicktags section of manifest.json. Note: Click tag names are case-sensitive.
- Retrieve the URL (JavaScript): Use dhtml.getVar() to retrieve the landing page URL and set a fallback URL for local testing.
JavaScript
// Retrieves the URL defined for 'clickTAG' in the manifest.json
// Uses 'https://example.com' as a fallback when testing locally
const clickTAGvalue = dhtml.getVar('clickTAG','https://example.com');
- Apply the Click Action: On click, open the retrieved clickTAGvalue.
JavaScript
// Example event listener for a clickable element
element.addEventListener('click', function(){
window.open(clickTAGvalue, '_blank');
});
