Pushdown banners

  • A pushdown banner is a particular case of an expading banner and has two display states; expanded and retracted
  • The difference between them is that the pushdown banner, when expanding, it pushes down the website content instead of displaying the expanded part on top of it
  • These two states have different width or height properties
  • In order to switch between the two states, the user interaction is required; Examples:
    • The expanded state is displayed on mouse over and it reverts to the retracted state on mouse out
    • The expanded state is displayed on mouse over and it reverts to the retracted state when clicking a close button
    • The expanded state is displayed on click and it reverts to the retracted state when clicking a close button
  • A pushdown banner must include the below specifications:
    • params: in order to received AdServer information
    • clickTag: in order to track clicks in the AdServer and redirect users to the landing page URL
    • doexpand: in order to trigger the expanded state
    • dolittle: in order to trigger the retracted state
  • Creative code receives all AdServer information through the params object
  • The JS tag which contains the params object must be implemented as high up as possible in the .html file (ideally as the first tag in head)
Below is the JS Code that must be implemented in the .html file
<script type="text/javascript">
    var parsed = (document.location.href.split('#')[1] || '').split('&');
    var params = parsed.reduce(function(params, param) {
        var param = param.split('=');
        params[param[0]] = decodeURIComponent(param.slice(1).join('='));
        return params;
    }, {});
</script>
  • The landing page URL is controlled by the AdServer.
Below is the JS variable that contains the landing page URL
params.clickTag
  • When the creative is clicked, it must open params.clickTag in a new tab
  • There are multiple ways to accomplish that, you can find some examples below
Example: Changing the href attribute of an <a> tag
<a id="redirect" target="_blank">
	<div id="content">
		...
	</div>
</a>

<script type="text/javascript">
	document.getElementById('redirect').href = params.clickTag;
</script>
Example: Adding the onclick attribute to the container tag
<script type="text/javascript">
	function gotourl() {
		window.open(params.clickTag, "_blank");
	}
</script>

<div id="content" onclick="gotourl();">
	...
</div>
Example: Using the addEventListener function
<div id="content" onclick="gotourl();">
	...
</div>

<script type="text/javascript">
	document.getElementById('content').addEventListener('click', function() {
		window.open(params.clickTag, "_blank");
	});
</script>
  • Creative must not use javascript: href property on <a>elements as this will cause issues in Firefox
DO NOT USE! This is a bad example of implementing the redirect to params.clickTag
<a href="javascript:window.open(params.clickTag,'_blank');">
	<div id="content">
		...
	</div>
</a>
  • The doexpand function must be called when expand animation starts
  • This enables the AdServer to count expand interactions and expand the creative containers
Below is the JS function that must be called when the expand animation starts
window.parent.postMessage(params.doexpand, "*");
Example: Triggering the expand animation using addEventListener
<a id="redirect" target="_blank">
	<div id="content">
		...
	</div>
</a>

<script type="text/javascript">
	function triggerExpand() {
		window.parent.postMessage(params.doexpand, "*");
		// expand animation here
	}
	document.getElementById('content').addEventListener('mouseover', triggerExpand);
</script>
  • The dolittle function must be called when retract animation starts
  • This enables the AdServer to count retract interactions and retract the creative containers
Below is the JS function that must be called when the retract animation starts
window.parent.postMessage(params.dolittle, "*");
Example: Triggering the retract animation using addEventListener
<a id="redirect" target="_blank">
	<div id="content">
		...
	</div>
</a>

<script type="text/javascript">
	function triggerRetract() {
		window.parent.postMessage(params.dolittle, "*");
		// retract animation here
	}
	document.getElementById('content').addEventListener('mouseout', triggerRetract);
</script>
Back