The following guidelines describes Countdown Component implementation and setup. Please follow instructions below in order to correctly setup component and change available parameters.
Load component in <head></head> inside index.html:
<head>
...
<script src="//s1.adform.net/banners/scripts/components/Adform.Countdown.js"></script>
...
</head>Note:
- roll.png or other graphics which represents numbers counting in countdown component should be placed insideAdditional Assetsfolder. This applies only if the countdown is image-based. Detailed instructions Countdown Component Setup (Image-based)
These are the properties that have to be present in Countdown Component:
| Name | Type | Default | Description |
|---|---|---|---|
| placement | string |
‘adf-banner’ | element id in which Countdown will be drawn |
Optional settings are not mandatory and have default values.
| Name | Type | Default | Description |
|---|---|---|---|
| action | function |
null | callback that will be executed on countdown click or end |
| actionOnClick | boolean |
false | set to ‘true’ in order to get action invoked on click |
| initializeOn | string |
‘load’ | set to ‘hover’ or ‘load’ to choose how countdown gets initialized in banner |
| counterImage | string |
” | path of countdown image if countdown is image-based |
| counterText | string |
” | provide a countdown text if countdown is text-based |
| textPosition | string |
‘bottom right’ | position of text-based counter in banner |
| label | string |
” | text which will be shown above image countdown |
| counter | integer |
3 | duration of countdown |
Options need to be set inside var countdown = new Adf.Countdown({});
Note: choose between
counterImageandcounterTextoptions, depending on type of Countdown that is being created (image-based or text-based).
Examples below shows how to setup component in different scenarios.
Example below displays a default caller with Countdown functionality. It uses an image from assets folder, counter number appears over the provided image. Countdown gets toggled on hover, user can click to dismiss the counter and invoke action, which in this case calls the floating banner.
<script>
var countdown = new Adf.Countdown({
placement: 'adf-banner', // set countdown placement element
action: showFloat, // action or function that gets called after countdown
actionOnClick: true, // if true, action gets invoked on click, counter is then dismissed
initializeOn: 'hover', // set to 'hover' or 'load' to choose how countdown gets initialized in banner
counterImage: Adform.getAsset(1), // set counter image
counter: 3 // set countdown time in seconds
});
countdown.init();
</script>Important: Countdown graphical image should be set in
Additional Assetsand asset number should be defined viacounterImage:parameter.
Provided text-based Countdown example uses default actionOnClick and initializeOn options. It is only required to set counterText value in order to start using a text-based Countdown. Additionaly, default text position can be changed adding a textPosition option.
<script>
var countdown = new Adf.Countdown({
placement: 'adf-banner', // set countdown placement element
action: close, // action or function that gets called after countdown
counterText: 'Ad will close in {count} seconds', // set counter text
counter: 15 // set countdown time in seconds
});
countdown.init();
</script>Note: It is mandatory to place
{count}incounterTextstring to indicate counter placement in text.
In order to make Countdown component responsive to video events, simply add event listeners to your banner video element as portrayed in example below:
video.addEventListener("play", function(){
countdown.pause();
});
video.addEventListener("pause", function(){
countdown.resume();
});Use provided exposed component methods to control Countdown in your code.
Code below shows how Countdown component could be setup in HTML5 Standard rich media ad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
</script>
<link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />
<script src="//s1.adform.net/banners/scripts/components/Adform.Countdown.js"></script>
</head>
<body>
<div id="adf-banner" class="adf-Banner adf-Background adf-Border u-sizeFull">
<!-- Place banner content here -->
</div>
<!-- Components -->
<script src="scripts/custom.js"></script>
<!-- Components -->
<!-- User code -->
<script>
function showFloat() {
parent.ADFCall(Adform.getVar('bn'), 'show');
};
var countdown = new Adf.Countdown({
placement: 'adf-banner', // set countdown placement element
action: showFloat, // action or function that gets called after countdown
actionOnClick: true, // if true, action gets invoked on click, counter is then dismissed
initializeOn: 'hover', // set to 'hover' or 'load' to choose how countdown gets initialized in banner
counterImage: Adform.getAsset(1), // set counter image
counter: 3 // set countdown time in seconds
});
countdown.init();
</script>
<!-- User code -->| Name | Description |
|---|---|
| countdown.start() | Starts counter |
| countdown.hide() | Hides counter |
| countdown.dismiss() | Dismisses counter |
| countdown.pause() | Pauses counter |
| countdown.resume() | Resumes counter after pause |