You can code different formats and animations for your HTML5 banners. If your banners are adaptable and able to fit a wider variety of placements, this can help you can increase your ad reach. Additionally, different formats provide more creative freedom for the visuals and the message of your banners.
Any HTML5 banner must have an .html file and a manifest.json file zipped together with images, scripts, and other banner materials. When you code a banner, you must add Adform DHTML library to your banner HTML file and assign clickTag values. Make sure to read about an HTML5 banner's structure and requirements before working on your banners.
Click example to see a standard HTML5 ad.
This type of banner is static and doesn't have animations or interactions. It has a manifest.json file that defines the ad dimension, an HTML file that is the banner's source, and the necessary images as separate files.
You can assign a clickTAG value to a standard HTML5 banner with this JavaScript code:
<script>
var banner = document.getElementById('banner');
clickTAGvalue = dhtml.getVar("clickTAG", "http://www.example.com"); //banner will receive clickTAG value - if not defined, banner will land to example.com
landingpagetarget = dhtml.getVar("landingPageTarget", "_blank"); //landingPageTarget variable enables to change target from Adform system.
banner.onclick = function() {
window.open(clickTAGvalue, landingpagetarget); //when banner is clicked it will open new window directing to clickTAG value
}
</script>
The single-file expanding banner format has a collapsed version (smaller size) and a larger version that expands when a user clicks on the ad. The expanded banner can offer video and other rich media experiences. The expanded part accommodates a link to the predefined landing page. The ad maintains expanded size until the user clicks the close button.
Use the SingleExpanding JavaScript component to create an animated single-file expanding banner. To use SingleExpanding component, add a component script to the banner's HTML file and initialize the component by calling SingleExpanding.init() method. To collapse a single-file expanding component, use SingleExpanding.destroy() method.
To use the SingleExpanding component, add it to the banner's HTML file:
<script>
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>
<!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
<!-- Components -->
For a complete SingleExpanding component setup, define additional settings. These settings, however, are optional and have default values.
You can ease the animation of the SingleExpanding component to make it smoother and less abrupt. Use expandEasing and collapseEasing properties to set animation easing type. You can pass your own easing function or use one of the following static properties:
var SingleExpanding = Adform.Component.SingleExpanding;
var index = Math.floor(Math.random() * 15);
var easing = [
SingleExpanding.regularEaseIn,
SingleExpanding.regularEaseOut,
SingleExpanding.regularEaseInOut,
SingleExpanding.backEaseIn,
SingleExpanding.backEaseOut,
SingleExpanding.backEaseInOut,
SingleExpanding.strongEaseIn,
SingleExpanding.strongEaseOut,
SingleExpanding.strongEaseInOut,
SingleExpanding.bounceEaseIn,
SingleExpanding.bounceEaseOut,
SingleExpanding.bounceEaseInOut,
SingleExpanding.elasticEaseIn,
SingleExpanding.elasticEaseOut,
SingleExpanding.elasticEaseInOut
][index];
Use SingleExpanding.on() and SingleExpanding.off() methods to add or remove single expanding event listeners. An event listener is a way to wait for user interaction (such as a click) and fire a specific code once that interaction happens.
To create a single-file expanding ad, you need .html, .js, and .css files:
1. Create a new folder for your HTML5 banner.
2. In the banner folder, create a .html file and place the provided code inside to define your banner format and its contents:
3. In the banner folder, create a new scripts folder.
4. In the scripts folder, create custom.js file and place the provided code inside to add SingleExpanding component and define additional settings:
5. In the banner folder, create a new styles folder.
6. In the styles folder, create custom.css file and place the provided code inside to define the collapsed and expanded stage styles:
Click example to see a double-file expanding HTML5 ad.
The double-file expanding banner has two HTML files: a collapsed banner asset and an expanded banner asset.
The collapsed banner asset includes a collapsed banner. The banner is set to expand on rollover (controlled from Adform’s side). Because the rollover function isn't relevant on touchscreen devices, include the expand function instead.
The following JavaScript code expands a banner:
var banner = document.getElementById('banner');
banner.onclick = function() {
expand();
}
function expand() {
dhtml.external.expand && dhtml.external.expand();
}
To expand the ad, the expand() function uses a public method.
The expanded ad must have a clickTAG and a close button.
Add Adform DHTML library to your banner to be able to assign a clickTAG value and activates the close button:
clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
var closebutton = document.getElementById('closeImage');
var banner = document.getElementById('banner');
closebutton.onclick = function() {
close();
}
banner.onclick = function() {
window.open(clickTAGvalue,landingpagetarget);
}
function close() {
dhtml.external.close && dhtml.external.close();
}
To collapse the expanded banner, the close() function uses a public method.
The provided example of an expanded ad contains an HTML5 Video Player. You can find more information about HTML5 Video Player Component in Use Videos in HTML5 Banners article.
Click example to see a floating HTML5 ad.
A floating HTML5 banner consists of one HTML file. This file must have a clickTag and a close button.
Add Adform DHTML library to your banner to be able to assign a clickTAG value and activate the close button:
<script>
var banner = document.getElementById('banner');
clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
var closebutton = document.getElementById('closeImage');
var banner = document.getElementById('banner');
closebutton.onclick = function() {
dhtml.sendEvent(dhtml.CLOSE_BUTTON_PRESS);
close();
}
banner.onclick = function() {
window.open(clickTAGvalue, landingpagetarget);
}
function close() {
dhtml.external.close && dhtml.external.close();
}
</script>
To close the ad, the close() function uses a public method.
Certain TakeOver formats used this type of ad to call a floating banner after a user clicks on a standard ad.
To create this type of ad, the standard HTML5 ad must have an additional Adform code snippet:
function showFloat() {
var bn = dhtml.getVar('bn');
var fbn = dhtml.getVar('floatBN');
if (fbn) parent.ADFCall(fbn, 'show');
parent.ADFCall(bn, 'show');
};
buttonFloat.onclick = function () {
showFloat();
};
To enable a banner to be responsive when serving from the Adform tag, you must add a call to resize function:
|
|
Resize the HTML banner and parent iframe. You can write the width and height as a number (in pixels), or a string defining the percentage (for example, "100%"). |
This function must be included because all HTML5 banners in Adform are put inside iframes with asset height and width specified in the manifest.json file. The resize function makes it possible to scale that iframe.
The resize function is called on dhtml.external object. Here's a usage example:
if (dhtml.external && dhtml.external.resize) dhtml.external.resize ('100%', '100%');
However, for the banner to become responsive, you must make its styling responsive. That includes setting HTML elements dimensions with relative values (in percentages), and positioning elements in locations relative to other elements. This is needed so that they stay in their relevant places after the banner is resized.
To make your banner styling responsive:
-
Define the wrapper element's dimensions in relation to the page. For example, if the banner has to be scaled to the full window in width, the main wrapper element’s styling should be:
#someWrapper { width: 100%; … } -
Define the positions of banner elements in relation to other elements on the page:
#someElement { left: 10%; bottom 30%; … }
Polite load ads show an image while the page is loading and loads heavy content (such as video) only after the page has fully loaded. There are two types of polite load ads:
-
Polite image and main banner (such a banner can be easily set up in Adform system without special code snippets)
-
The main banner with polite load snippet
For this polite load ad type, you need a polite image and a main banner. While the site loads, Adform displays the polite image. Then, after the site is fully loaded, Adform displays the main banner, which is a standard HTML5 ad, instead of the polite image.
To implement polite loading in an HTML5 banner, you need to add a polite source in the HTML file. A polite source can be an image to display while the page fully loads. After a pageLoadComplete event fires, Adform loads the actual heavier HTML5 banner with JavaScript. Polite loading functionality in JavaScript can be implemented via Adform's DHTML library.
Polite loading functionality consists of two parts:
-
Define a function to load the heavy content:
dhtml.sharedEvents.once('pageLoadComplete', function() { // code that loads heavy content });Note
pageLoadCompleteevent works only when the banner is served from the Adform system. -
Enable polite loading for a banner:
dhtml.external.initPoliteMode();
You can use this code when serving the banner from the Adform system as well as when you want to simulate polite loading while testing locally:
var bn = dhtml.getVar('bn', 0);
if (bn)
{
// when banner is served from tag
dhtml.sharedEvents.once('pageLoadComplete', init);
dhtml.external.initPoliteMode();
}
else
{
// when testing locally
setTimeout(init, 2000);
}
function init() {
// load heavy content
}
bn — a variable that is 0 when testing locally, and is the banner's tag number when served from Adform.
This type of polite loading ad can be tested in Adform Studio. There is a fake 5 second page load in the banner preview window. This means that for 5 seconds you'll see the polite image.
Note
If you click or hover over the banner while the page is loading, Adform scripts identify this as user interaction and fire Polite Loaded event.