Overlay banners

  • An overlay banner is any banner that displays on top of the website content, usually in the middle of the screen
  • The banner must have a close button that will close it when clicked by the user
  • If the closing button is not included in the creative, a default closing button will be added from the AdServer
  • An overlay 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
    • onCrossClick: in order to close the banner
  • 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 onCrossClick function must be called when the creative close button is clicked
  • This enables the AdServer to count close interactions and delete the creative containers
  • When the close button is clicked, the creative must not redirect to the landing page
Below is the JS function that must be called when the close button is clicked
window.parent.postMessage(params.onCrossClick, "*");
Example: Triggering the close button using the onclick attribute
<script type="text/javascript">
	function closeBanner() {
		window.parent.postMessage(params.onCrossClick, "*");
	}
</script>

<div id="container">
	<a id="redirect" target="_blank">
		<div id="content">
			...
		</div>
	</a>
	<div id="closeButton" onclick="closeBanner();">
		<img src='close_button_image.png' />
	</div>
</div>
Example: Triggering the close button using the addEventListener function
<div id="container">
	<a id="redirect" target="_blank">
		<div id="content">
			...
		</div>
	</a>
	<div id="closeButton">
		<img src='close_button_image.png' />
	</div>
</div>

<script type="text/javascript">
	document.getElementById('closeButton').addEventListener('click', function() {
		window.parent.postMessage(params.onCrossClick, "*");
	});
</script>