Standard banners

  • A standard banner is any banner which is delivered in a predefined container in the website, it doesn't change size, doesn't go over website elements and it does not require special AdServer functions in order to be displayed properly. Examples:
    • Billboard banners (970x250, 980x200, etc.)
    • Rectangle (300x250)
    • Skyscrapers (160x600, 120x600)
    • Brandings (usually made from three separate banners)
    • Interstitials (the skip method is controlled by the AdServer)
    • Mobile (320x50, 640x100, etc.)
  • A standard 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
  • 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>