Sidekick banners

  • A sidekick banner is a banner made up from two different parts
  • The first part is usually a standard banner
  • The second part is usually a very big banner
  • In order to display the second part, the user interaction is required; Examples:
    • The second part is displayed on mouse over on the first part
    • The second part is displayed on click on the first part
  • The second part must have a close button that will close it when clicked by the user
  • If the closing button is not included in the second part of the banner, a default closing button will be added from the AdServer
  • A sidekick 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
    • 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 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 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>
Back