Mobiili siteheader

Mobiili siteheader on lehekülje ülaosas paiknev kitsaks kokku surutav reklaamlahendus, mis on algselt näha avatud kujul ning kerimise korral aheneb. Uuesti tagasi kerimisel avaneb lahendus taas täisulatuses.

Kokkusurutud kujul on see paigale kinnitatud ja jääb lehekülje kerimisel nähtavale. Mobiili siteheader on kogu aeg nähtav, kuni see suletakse, klõpsates sulgemisnupule.

Sulgemisnupp ilmub pärast reklaami esimest kokkusurumist ja pärast seda on see nii kokkusurutud kui täisulatuses ribareklaami ülaosas. Nupu lisab siteheaderi ülaossa DELFI ja see asub reklaami ülaosas paremal.

Mobile Siteheader

Mobile siteheader is a collapsing banner on the top of the page that starts off expanded and collapses on scroll event and expands again if scrolled back up.

The collapsed state is sticky and scrolls along with the page. Banner is always visible until closed by clicking on the close button.

The close button appears after the banner collapses for the first time and after that it will be on top of both closed and expanded states of the banner. The button is added on top of the banner by DELFI and is located on the top right of the banner.

Mobile siteheader is only shown in articles.

Specifications

Dimensions
Siteheader consists of two possible states, expanded and collapsed, where accepted dimensions of are 600×250 + 600x100px

Weight limit
Total weight limit of siteheader is 150 KB. (The sum KB size of both images.)

Close button is 30x30px and is positioned 12px from the top and right side.

General tips on creating siteheader
The siteheader banner is displayed in a separate container that is resized by Delfi and the banner should be aware of the parent element resizing itself.
Set the background of the body of the banner something other than white so that it is visually distinct of rest of the page.

Siteheader banner must include the following script:

<script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

Also the banner must call for a resize function as soon as possible for the initial positioning and size to be set:

dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");

All template files below include the Adform.DHTML.js script and the first resize function call.

How to add a clicktag
For clicktag to work you must have added the Adform.DHTML.js file and trigger the clicktag on a wrapper div element like this.

<div id="clickLayer">banner</div>
<script>
	dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");
	var clickArea = document.getElementById('clickLayer');

	clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
	landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

	clickArea.onclick = function() {
		window.open(clickTAGvalue,landingpagetarget);
	}
</script>

You can read more on how to add a clicktag at AdFrom

AdForm Studio

Simplest way to create a siteheader is to use an existing Adform studio siteheader banner. Just replace the images, change the background color, add clicktag and that’s it.

Example: Siteheader made with template
Adform Studio: Siteheader Template

Click on Template
(Optional) set the height of the siteheader
Set the clicktag of the siteheader
Set the background color of the siteheader
Open additional assets
Replace the collapsed image
Replace the expanded image
(Optional) preview siteheader
Upload directly or download siteheader