CountDown component documentation

Example of Standard MPU ad with CountDown component:

HTML5 STUDIO LINK

Example of Leaderboard ad with CountDown component:

HTML5 STUDIO LINK

Initialization

To start with CountDown Component, you have to load it in your .html file.

Adf.CountDown.v1.css:

<head>

<link rel="stylesheet" href="styles/Adf.CountDown.v1.css">

</head>

Adf.CountDown.v1.js:

Add under banner <div></div> container which holds entire content.

<!-- Components -->
    <script src="scripts/Adf.CountDown.v1.js"></script>
<!-- Components -->

Settings

To completely setup countdown component user may define some settings, but however some of these settings are not mandatory and have default values.

Mandatory options

Name	Type	Default	Description
elementId	`string`	‘banner’	element id in which CountDown will be drawn
counterImage	`string`	‘assets/roll.png’	path of countdown image

Adf.CountDown.v1.js should be placed inside scripts folder.
Adf.CountDown.v1.css should be placed inside styles folder.
roll.png or other graphics which represents countdown images should be placed inside assets folder.

Optional options

Name	Type	Default	Description
label	`string`	”	text which will be shown with countdown
counter	`integer`	3	duration of countdown
action	`function null`	null	callback that will be executed on countdown click or end

Options needs to be set inside countdown.init({});

Example:

<script>

var countdown = new Adf.CountDown();
countdown.init({
        placement: 'banner', //counter placed into ad content
            action: showFloat, //floating ad will be shown after countdown
            counter: 3 //counts 3,2,1
        });

</script>

Events

CountDown.on() and CountDown.off() methods should be used to add or remove countdown event listeners. All the available events are listed bellow.

Name	Value	Description
`CountDown.START`	‘countDownStart’	event is emitted on countdown start
`CountDown.TICK`	‘countDownTick’	event is emitted on countdown tick
`CountDown.END`	‘countDownEnd’	event is emitted on countdown end
`CountDown.ACTION`	‘countDownAction’	event is emitted on countdown action

Example of standard rich media ad with CountDown

<!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="styles/Adf.CountDown.v1.css">

</head>
<body class="Adform">

    <div id="banner" class="Adform-banner u-fullWidthHeight">

        <!-- Place of you banner content -->

    </div>

    <!-- Countdown Component -->
    <script src="scripts/Adf.CountDown.v1.js"></script>
    <!-- Countdown Component -->

    <!-- User code -->
    <script>
        function showFloat() {
            parent.ADFCall(dhtml.getVar('bn'), 'show');
        };

        var countdown = new Adf.CountDown();

        countdown.init({
            placement: 'banner',
            action: showFloat, //floating ad will be shown after countdown
        });

    </script>
    <!-- User code -->

Exposed methods

start - starts counter
hide - hides counter
dismiss - dismiss counter