NATIVE ADS


AD FORMAT SPECS

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 Native Ads can be fully customized, use your Javascript & CSS skills to create stunning themed lists of Native Ads. These lists can be displayed on the sidebar of your page or within the content.

Usage:

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

BANNER ROTATORS

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

Usage:

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

SHOWCASES

muchgames.com
Usage:
A Native Ad with the Title, Description and other custom values from Muchgames.Visit Site

mousebreaker.com
Usage:
A Native Ad scaled down to 65x49
with the Title and Description tags.Visit Site