Gemius Romania - Technical Specifications

General

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

params

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>

clickTag

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>

General

An expanding banner is a banner that has two display states; expanded and retracted
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
An expanding 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

params

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>

clickTag

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>

doexpand

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>

dolittle

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>

General

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

params

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>

clickTag

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>

onCrossClick

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>

General

A footer banner is a particular case of an overlay banner
It is usually displayed on top of the website content, aligned to the bottom and horizontally centered
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
A footer 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

params

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>

clickTag

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>

onCrossClick

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>

General

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

params

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>

clickTag

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>

doexpand

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>

dolittle

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>

General

A drawbridge banner is a banner made up from three different parts
The first two parts are usually two skyscraper banners that are displayed around the website content, aligned to the left and right side of it
The third part, or the middle, is a banner that fills the empty space between the two skyscrapers
In order to display the third part, the user interaction is required; Examples:
- The third part is displayed on mouse over on any of the skyscrapers
- The third part is displayed on click on any of the skyscrapers
The third part must have a close button that will close it when clicked by the user
If the closing button is not included in the third part of the banner, a default closing button will be added from the AdServer
A drawbridge 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

params

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>

clickTag

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>

doexpand

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>

onCrossClick

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>

General

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

params

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>

clickTag

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>

doexpand

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>

onCrossClick

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>

Standard

Expand

Overlayer

Footer

Pushdown

Drawbridge

Sidekick