THE EDITORIAL ADS


AD FORMAT SPEC

Ad4Game
MORE FORMATS

JAVASCRIPT USAGE

    USAGE:
  • Advanced

    • EXAMPLES:
  • Armorgames
The following code will request the Ad4Game Adserver and load 1 banner ready to be inserted into your webpage. Call to load the ad & prepare a javascript object: 
<script type="text/javascript" 
src="//ads.ad4game.com/www/delivery/
edito-select.php?zoneid=123&limit=1"></script>
Simplest usage: Place the following code anywhere into your document (but below the above request):
<script type="text/javascript">
ad4game.show();
</script>

HTML RENDERING:



HTML Tags:

The Javascript of the simple usage will output the selected banner with the following HTML code into your website:

<A href="...banner-destination..." target="_blank">

<h1>Title of the banner</h1>

<p>Description of the banner</p>

<img src="...url of the banners image..." border="0" />

</a>

You may pass arguments to the show-function to customize the simple usage, the function will notice the following args: class, style, title_tag, description_tag. As an example, calling the function with class and title_tag set:


<script type="text/javascript">
ad4game.show({
'class' : 'myclass',
'title_tag' : 'span',
});
</script>

 

will output the banner as follows:

 

<A href="...banner-destination..." target="_blank" class="myclass">

<span class="myclass">Title of the banner</span>

<p class="myclass">Description of the banner</p>

<img src="...url of the banners image..." border="0" class="myclass" />

</a>

Please note that the default <h1>...</h1> has changed to <span>...</span> and the class="myclass" has been added to all items. For further customization you may restrict the style or class to specific elements: title, description, image and url:


<script type="text/javascript">
ad4game.show({
'title_tag' : 'div',
'title_class' : 'myclass',
'title_style' : 'color:red;',
'description_tag' : 'span',
'description_style' : 'color:white;',
'url_class' : 'mylink',
'image_class' : 'myimage',
});
</script>

 

will result in the following HTML:

 

<A href="...banner-destination..." target="_blank" class="mylink">

<div class="myclass" style="color:red;">Title of the banner</div>

<span style="color:white;">Description of the banner</span>

<img src="...url of the banners image..." border="0" class="myimage" />

</a>

Editorial ads usually have different image sizes available. When no width & height is specified, the first available image is selected. If you specify the width and height, the adserver will render the image with same or closest size ratio, i.e.:


<script type="text/javascript">
ad4game.show({
'width' : '100',
'height' : '75',
});
</script>

 

will use an image with a similar size ratio of 100x75 and instruct the browser to resize the image to 100x75.

 

Some sites may want to hide the title, description or image. So you may instruct the show function to hide them:


<script type="text/javascript">
ad4game.show({
'no_image' : true,
});
</script>

 

will show you only the title and description, but no image. In reverse, you may show only the image, but no title and no description:


<script type="text/javascript">
ad4game.show({
'no_title' : true,
'no_description' : true,
});
</script>

 

It is also possible to limit the length of the title and/or description, i.e.:


<script type="text/javascript">
ad4game.show({
'title_length' : '20',
'description_length' : '40',
});
</script>

restricts the length of the title to max. 20 characters and the description to max. 40 characters.

 

Each part of the ad can be retrieved separatly to give you maximum control about the style: 

  <!--/* Ad4Game Editorial Tag */-->

<script type="text/javascript" src="//ads.ad4game.com/www/
  delivery/edito-select.php?zoneid=PUT_YOUR_ZONE_ID_HERE&limit=PUT_NUMBER_OF_EDITORIALS"></script>
  
  <script type="text/javascript">
  if (ad4game.ok()) {
  // init
  //get the click-url of the current ad 
  var url = ad4game.get_url();
   
  //get the target-window of the current ad, usually '_blank' 
  var target = ad4game.get_target();
   
  //get the title of the current ad, max. 20 characters , leave () empty for no limit
  var title = ad4game.get_title(20);
   
  //get the description of the current ad, max. 40 characters , leave () empty for no limit
  var description = ad4game.get_description(40);
   
  //get an image which the most same o closest aspect to the given size
  var imageUrl = ad4game.get_image(100, 200);
   
  ad4game.pixel(); // Very important, do not remove
  // end init
   
  //You may now use the above informations to create customized html within your document: 
   
  // start customizing here
  document.write('<div id="editorial">');
  document.write('<p><a href="'+url+'" target="'+target+'" title="'+title+'"><img src="'+imageUrl+'" border="0" /></a>');
  document.write('<a href="'+url+'" target="_blank" title="'+title+'">'+title+'</a></p>');
  document.write('<p>'+description+'</p>');
  document.write('</div>');
  // end customizing
  } 
  </script>
Multiple banners on a single website: You may append same (or different) zoneIDs to the initial request to advice the ad4game ad server to load and show more than 1 banner a time: 
<script type="text/javascript" src="//ads.ad4game.com/www/delivery/edito-select.php?zoneid=123&limit=4"></script>
Above will prepare 4 ads for your website, first from zone 123, followed by zone 456, 123 (again!) and 567. You switch the context of the ad4game-object by calling next() on it: First Ad : 

  <script type="text/javascript">
  if (ad4game.ok()) {
  // init
  //get the click-url of the current ad 
  var url = ad4game.get_url();
   
  //get the target-window of the current ad, usually '_blank' 
  var target = ad4game.get_target();
   
  //get the title of the current ad, max. 20 characters , leave () empty for no limit
  var title = ad4game.get_title(20);
   
  //get the description of the current ad, max. 40 characters , leave () empty for no limit
  var description = ad4game.get_description(40);
   
  //get an image which the most same o closest aspect to the given size
  var imageUrl = ad4game.get_image(100, 200);
   
  ad4game.pixel(); // Very important, do not remove
  // end init
   
  //You may now use the above informations to create customized html within your document: 
   
  // start customizing here
  document.write('<div id="editorial">');
  document.write('<p><a href="'+url+'" target="'+target+'" title="'+title+'"><img src="'+imageUrl+'" border="0" /></a>');
  document.write('<a href="'+url+'" target="_blank" title="'+title+'">'+title+'</a></p>');
  document.write('<p>'+description+'</p>');
  document.write('</div>');
  // end customizing
  } 
  </script>
All other Ads : 

  <script type="text/javascript">
  
  //Get the next available ad
  ad4game.next();
  
  if (ad4game.ok()) {
  // init
  //get the click-url of the current ad 
  var url = ad4game.get_url();
   
  //get the target-window of the current ad, usually '_blank' 
  var target = ad4game.get_target();
   
  //get the title of the current ad, max. 20 characters , leave () empty for no limit
  var title = ad4game.get_title(20);
   
  //get the description of the current ad, max. 40 characters , leave () empty for no limit
  var description = ad4game.get_description(40);
   
  //get an image which the most same o closest aspect to the given size
  var imageUrl = ad4game.get_image(100, 200);
   
  ad4game.pixel(); // Very important, do not remove
  // end init
   
  //You may now use the above informations to create customized html within your document: 
   
  // start customizing here
  document.write('<div id="editorial">');
  document.write('<p><a href="'+url+'" target="'+target+'" title="'+title+'"><img src="'+imageUrl+'" border="0" /></a>');
  document.write('<a href="'+url+'" target="_blank" title="'+title+'">'+title+'</a></p>');
  document.write('<p>'+description+'</p>');
  document.write('</div>');
  // end customizing
  } 
  </script>

The following snippet renders 4 Editorial Units as <li> tags:


<!--/* Ad4Game Editorial Tag */-->
<script type="text/javascript" src="//ads.ad4game.com/www/delivery/
edito-select.php?zoneid=123&limit=4"></script>

<script type='text/javascript'><!--//<![CDATA[

  var nbrgames = 4;
  for(var i=0;i<nbrgames;i++){
	   if(i>0) ad4game.next();
      if (ad4game.ok()) {
          // init
          var url = ad4game.get_url();
          var target = ad4game.get_target();
          var imageUrl = ad4game.get_image(70, 70);
          var title = ad4game.get_title(20);
          var description = ad4game.get_description(500);
          ad4game.pixel(); // Very important, do not remove
          // end init
          
          // HTML Customizing
		  document.write('<ul>');
         document.write('<li class="ad4"><a href="'+url+'" target="'+target+'"><img src="'+imageUrl+'" width="64" height="64" alt="'+description+'"/><span>'+title+'</span></a></li>');
		  document.write('</ul>');
          // End HTML Customizing
      }
  }
  //]]>--></script>

 

BEST PRACTICES

LISTS

The Editorial Ads can be fully customized, use your Javascript & CSS skills to create stunning themed lists of Editorial Ads. These lists can be displayed on the sidebar of your page or within the content.

Usage:

Listing 5 Editorial Ads.
The image Tag is scaled to 50x50 px.

BANNER ROTATORS

Displaying several Editorial Ads at the same canvas by setting a timer for each Editorial Ad appearance.

Usage:

Timed display of multiple Editorial Ads with a default size (140x140 px)

USE OUR WIDGETS

Sticky Edits
Edits 300x250
coming soon..

Get a list of 4 MMO Editorial Ads with the Title and Description tags using this cross-browser valide CSS widget.

Click to activate a theme:
Available Themes

redblackcrimsonsteelblueforestgreendimgrayhotpinkorangeredgoldenrod


Default

darkred

You can use a custom color by introducing a color hex code (i.e. FF0011)

Introduce your ad-space zoneid (or use 27265 to test)

Insert the following embed code inside your page HTML source-code, this will render a Medium Rectangle (300x250 px) as a DIV tag.

PREVIEW

The Sticky Edits widget consists of a slide bar shown at the bottom of a webpage above the content, it maintains its position in the browser as the visitor scrolls down the page.
This widget displays top MMO games in its body as small thumbnails using a cross-browser valide Style Sheet.

Click to activate a theme:
Available Themes

silverthistleorangeredtansteelblueaquaghostwhitegoldenrodolive


Default

gray

You can use a custom color by introducing a color hex code (i.e. FF0011)

Introduce your ad-space zoneid (or use 27265 to test)

Insert the following embed code inside your page HTML source-code before the closing of the </BODY> tag.

PREVIEW

SHOWCASES

muchgames.com
Usage:
The 140x140 Editorial Ad with the Title, Description and other custom values from Muchgames.Visit Site

mousebreaker.com
Usage:
The 180x135 Editorial Ad scaled down to 65x49
with the Title and Description tags.Visit Site