TAKEOVER SKIN LARGE DOCUMENTATION

Adsolutions / Documentation  / TAKEOVER SKIN LARGE DOCUMENTATION

TAKEOVER SKIN LARGE DOCUMENTATION

The template consists of a sample and a template. The template being as basic as possible and the sample is based on the template but shows some extra buttons and samples of scaling and responsiveness.

TEMPLATE PREVIEW

SAMPLE PREVIEW

IMPORTANT NOTE!! If you would like to preview your ad on a particular website while building the ad. Please contact [email protected] for a login to our system. Once logged in you’ll be able to upload and or alter your source files and see the effects in the preview URL we will provide you with.

The Take Over template consist of six source files plus a sample folder containing css/javascript and other assets:

  • ad.html
  • top.html
  • left.html
  • right.html
  • layer.html
  • background.jpg

If you want use a static image to be replicated across the different assets. Send us a 2560 x 1600 px image called background.jpg. And we’ll send you a preview URL for the preferred website.

The background image
The CSS file of each separate html file contains the same background-image:

body{
	cursor:pointer;	
	background-image:url('background.jpg');
	background-repeat:no-repeat;
}

This image is shared across all four other html files mentioned above. The image is replicated and aligned automatically. The recommended image dimensions are 2560 x 1600px.

!!! If you change the image size to something else please change the width in the window.ASRM_updatePos function in each of the separate html files:

 window.ASRM_updatePos = function(posInfo){
		  	if(doc.body){
			  	doc.body.style.backgroundPosition = (((posInfo.v.w-2560)*.5))+'px top';
			  }else{
			  	ADTECH.ready(function(){window.ASRM_updatePos(posInfo)});
			  }
		  }

If you would like to create a static take-over using just a static image you can either create a static image file (.psd preferably) and let us create it for you or upload your image in our system. Make sure it’s named backgound.jpg and has the correct dimensions.

File dimensions:                          2560 x 1600 px
Publish size:                               <500kb (recommended)

ad.html
The ad.html is a 300x 250 px rectangle ad. The background image is used as described above. So if you need no further animation the file will show the background image on it’s position on the website.

If you do want to add some additional content within the rectangle you can do so by writing your html in the ad html before the ADTECH.ready() function or right behind the body tag the cursor is positioned in the screenshot below:

<body>
	   <script>
		  ADTECH.ready(function(){
		  	//Report this ad ready
			  ADTECH.sendMessage(ADTECH.constructMessage(com.adtech.HtmlContent.CMD_TYPE_EXEC, {method:"setReady"}));
		  });
	  </script>
  </body>

Everything you put in this file will be shown on top of the background image.

The ad.html is linked to a couple of other files:

		<link rel="stylesheet" href="main.css"/>
	  <link rel="stylesheet" href="ad.css"/>
	  <script src="ad.js" async></script>
  </head>

The ad.css file contains the link to the shared background-image. If you want to set a background color instead of an image feel free to change it here. It can be used to add your own CSS or you can include extra files in the ad.html.

The ad.js file is where the click is implemented. You can change the URL in this file. Or designate it to a different element or add multiple clickable elements.

//default click, it's possible to designate another element for this
  doc.body.ontouchstart =  doc.body.onclick = function(e){  
  	ADTECH.click('adunit', 'http://www.adsolutions.com'); 
  };

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

left.html, right.html, top.html, layer.html

These four files wrap around or are placed over the website. The background is again used and aligned like explained earlier.

If you want to add some additional content within any of the three files you can do so by writing your html in the corresponding html files before the ADTECH.ready() function or right after the <body> tag:

<body>
		//YOUR CONTENT HERE
	   <script>
		  ADTECH.ready(function(){
		  	//Report this ad ready
			  ADTECH.sendMessage(ADTECH.constructMessage(com.adtech.HtmlContent.CMD_TYPE_EXEC, {method:"setReady"}));
		  });
	  </script>
  </body>

Everything you put in these file(s) will be shown on top of the background image or color.

When creating content for these elements, be aware what the width is of the site is in regard to common screen sizes. The remaining area’s on the side is where your communication will need to take place. For instance on the sample URL provided above the site content is 960pixels wide. So on a screen of 1920px wide you will have  ((1920-960)/2) = 480pixels on each side to show. But a lot of screens are a different size. So either keep within common screen sizes or make your content responsive. check http://www.w3schools.com/browsers/browsers_display.asp for an overview of common screen sizes.

As with the ad.html these three files also link to similarly named JS and CSS files.

These JS files also have a click is implemented by default. You can change the URL in these files. Or designate it to a different element or add multiple clickable elements.

//default click, it's possible to designate another element for this
  doc.body.ontouchstart =  doc.body.onclick = function(e){  
  	ADTECH.click('adunit', 'http://www.adsolutions.com'); 
  };

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to [email protected] (WeTransfer preferred)

Final creative or requests for a preview can be send to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.