How to monetize classifieds website with banner ads

There are several ways to earn money from classifieds website: featured ads, making some classified categories paid, banner ads, contextual ads like Google AdSense and other banner networks. In this tutorial we will teach you how to monetize classifieds website with banner ads.

How to monetize classifieds website with banner ads

For banner ads you can use external services like buysellads.com and share 25% or revenue with them. In return you will be listed on their marketplace and attract potential advertisers. Payments are processed using paypal which is convenient in most cases. If you do not want to share revenue or payment with card or paypal is not available for your advertisers then you can use your own banner system. With your own banner system you are very flexible with banner placement on your website. For example you can insert random banner after n number of items in list view. This is targeted for visitors on mobile phones.

Setup your own banner advertisement system

For using you own banner system we need following:

  • Google analytics for tracking click events
  • FTP access to upload banner images

First decide on banner size. We prefer 300x150 pixel animated banners; they look good on sidebar for desktop users, look good on mobile phones, and animation draws attention for promoting valuable short messages regarding advertisement. Animation should be 3-4 frames; file size should not be bigger than 60 Kb.

How to monetize classifieds website with banner ads

After deciding on banner size create “promo banner” to advertise your available banner space. Promo banner can include some text like “50K views/month”, “Your ad here” etc.

“Advertise here” page

Create “Advertise here” page for promoting and explaining banner advertisement. Give some statistics info on that page: number of monthly views, number of monthly users visiting your website. Explain technical requirement for banner images, image size and file size, animation allowed or not, alternate banners allowed or not, show banner locations with website screenshots on PC and on mobile view. Alternate banners are good for two reasons:  test which banner performs better in terms of click through rate, showing different banner randomly to not annoy users visually. We will link to this page with “promo banner” and from all banner locations with simple text “Advertise here”.

Content you should have on “advertise here” page

  • Some important statistics from google analytics about traffic on your website: monthly visitors, page views.
  • Technical requirement of banner images.
  • Places where banners will be shown with PC and mobile screenshots.
  • Contact us form, email or phone number for contacting with banner inquiries.
  • Previous and current well known advertisers who advertised on your website, can show short testimonial from them. This will give confidence potential advertisers.

When contacted for banner advertisement you will need from advertiser following items:

  • Ready-made banners matching your technical requirement for images. If customer does not have ready banners then ask for 2-3 images about their product and make banner yourself. You can ask extra payment for it if you have too many advertisers, if not make banner design for free. It is up to you.
  • URL where banner will be linked. It can be on their website or classified item on your website. Make sure that link is not pointing to your competitor’s website. URL to the item on your website is best option here, because you will keep visitors inside your website while promoting advertisers item and earning money for it.
    Remember to add utm variables to track visits generated after clicking banner on your website. You can add tracking variable to any url be it external or internal link.
    UTM variables are: utm_source, utm_medium, and utm_campaign. For example, the following link would allow you to identify the traffic to example.com that came from a “banner” from “your_website” related to particular “advertiser”: https://example.com?utm_source= your_website&utm_medium=banner&utm_campaign=advertiser
  • If advertised content, banner and URL is ok with your policy then ask for payment from customer.

Upload banner images and screenshots using FTP to your server. Use absolute url of images in banner widget and inside advertisement page.

Banner code

After having all this information ready you can use following HTML code in your banner area, preferably on sidebar. Javascript in this code will perform following actions:

  • Randomize banner order
  • Use alternative banner image and alternate URLs randomly if presented
  • Insert banners after defined number of ads on category pages and places where classified items are listed. This will be shown to mobile users only. Remember classifieds sites have very high percentage of mobile users.
  • Show advertise here text link near banners.
  • Track banner click events with google analytics. Tracking click events is different than UTM variables. UTM variables will be recorder on advertiser’s website; click events will be recorder on your website and can be viewed in your analytics account. Remember that some banners can display direct call to action phone number so counting clicks is not reliable in terms of counting actions derived from given banner.

Here is banner HTML code, add it to your sidebar by navigating to “Appearance” -> “Widgets” page. Add “Text” widget to “Content right” widget area. Paste following html code to text area and select text type as “HTML / javascript”. If you have multilingual website paste same code to other locales, inside this widget, as well. This widget code will work with most default themes provided by classibase. We tested it with Classibase version 1.9.1 themes. Also do not use words like “banner”, “ads”, “adverts” etc. for banner file name, inside links, class names because they may be blocked by ad blockers installed on visitors web browser. Use names that to not trigger blocking of your banners.

<!--  banner ad widget code. Edit url and image src.  -->
<div class="cb-bnr" style="text-align:center">
<div class="cb-bnr-row">
<a href="http://example.com/page1.html" rel="nofollow"><img src="http://example.com/adhr.gif"/></a>
<a href="http://example.com/page2.html" rel="nofollow"><img src="http://example.com/bnr2a.gif" data-altsrc="http://example.com/page2b.html||http://example.com/bnr2b.gif|||http://example.com/page2c.html||http://example.com/bnr2c.gif"/></a>
<a href="http://example.com/page3.html" rel="nofollow"><img src="http://example.com/bnr3a.gif" data-altsrc="http://example.com/bnr3b.gif|||http://example.com/page3c.html||http://example.com/bnr3c.gif"/></a>
</div>
<p class="cb-bnr-prom"><a href="http://example.com/advertise-here-page.html">Advertise here</a></p>
</div>
<!--  END of editable area  -->
<style>
/* reklam rows */
.cb-bnr{margin:0 -10px;}
.cb-bnr-row{display:none;}
.cb-bnr .cb-bnr-row{display:block;}
.cb-bnr-prom{padding:0;margin:0;}
.cb-bnr-prom a{padding:10px 0;display:block;}
.cb-bnr-row a{display:block;text-align:center;margin:10px 0;line-height:1;padding:0;}
.cb-bnr-row img{width:100%; height:auto;}

@media screen and (max-width: 600px){
.cb-bnr{margin:0;}
}
@media screen and (max-width: 450px) {
.content table.list_style_full tr.cb-bnr-row{display:block;line-height:1;padding:0;}
.content table.list_style_full tr.cb-bnr-row td{display:block;margin:0;}
}
</style>
<script>
function randomBnr(){
	/*
	* Shuffle jQuery array of elements - see Fisher-Yates algorithm
	*/
	jQuery.fn.shuffle=function () {
		var j;
		for (var i=0; i < this.length; i++) {
			j=Math.floor(Math.random() * this.length);
			$(this[i]).before($(this[j]));
		}
		return this;
	};
	$('.cb-bnr .cb-bnr-row a').shuffle();
	
	// convert alternative data to proper jquery data if defined
	$('.cb-bnr .cb-bnr-row a:has(img[data-altsrc])').each(function(){
		var $me=$(this);
		var $img=$('img',$me);
		var default_url=$me.attr('href');
		var default_img=$img.attr('src');
		var data_str=$img.data('altsrc');
		var data_arr=data_str.split('|||');
		var data=[{url:default_url,img:default_img}];
		for(x in data_arr)
		{
			var data_url_src=data_arr[x].split('||');
			if(data_url_src.length>1){
				data_img=data_url_src[1];
				data_url=data_url_src[0];
			}
			else{
				data_img=data_url_src[0];
				data_url=default_url;
			}
			data.push({url:data_url,img:data_img});
		}
		
		// remove data attribute from html 
		$img.removeAttr('data-altsrc');
		// add json data 
		$img.data('altsrcjs',data);
		
		//select random index and apply to current item
		var ind=Math.floor(Math.random() * data.length);
		$img.data('ind',ind);
		$me.attr('href',data[ind].url);
		$img.attr('src',data[ind].img);
	});
	
	// track clicks
	$('body').on('click','.cb-bnr-row a',function(e){
		// if google analytis is not loaded then continue load linked page
		if (e.isDefaultPrevented() || typeof ga !== "function") return;
		// cancel event and record click
		e.preventDefault();
		var $me = $(this);
		var href = $me.attr('href');
		var src = $('img',$me).attr('src');
		ga('send', {'hitType': 'event','eventCategory': 'bnr','eventAction': href,'eventLabel': src,'hitCallback': loadPage});
		// redirect after one second if recording takes too long
		setTimeout(loadPage, 1000);
		// redirect to outbound page
		function loadPage() {document.location = href;} 		
	});	
}
function initBnrRow(){
	console.log('initBnrRow');
	// define where to insert bnr in list of items
	var insert_pos=[3,7,20,30,40];
	var $rek=$('.cb-bnr .cb-bnr-row a');
	var $rek_prom=$('.cb-bnr .cb-bnr-prom');
	var rek_len=$rek.length;
	var rek_ind=0;

	if(rek_len>0){		
		// init rows
		$('table.list_style_full').each(function(){
			var $me=$(this);
			var $tr=$('tr',$me);
			var len=$tr.length;
			var len_td=$('td,th',$tr.first()).length;
			
			for(x in insert_pos){
				ind=insert_pos[x];				
				if(ind<len-1){					
					var $cur_rek=$rek.eq(rek_ind);
					var $cur_rek_img=$('img',$cur_rek);
					var $sel_rek=$cur_rek.clone();					
					var $new_tr=$('<tr class="cb-bnr-row"><td colspan="'+len_td+'"></td></tr>');
					$('td',$new_tr).append($rek_prom.clone());
					$('td',$new_tr).append($sel_rek);		
					$tr.eq(ind).after($new_tr);						
					rek_ind=(rek_ind + 1) % rek_len;	

					// check if it has alternate items, select next alternate
					var data=$cur_rek_img.data();
					if(typeof data.altsrcjs!='undefined'){												
						data.ind=(data.ind+ 1) % data.altsrcjs.length;
						$sel_rek.attr('href',data.altsrcjs[data.ind].url);
						$('img',$sel_rek).attr('src',data.altsrcjs[data.ind].img);
						$cur_rek_img.data('ind',data.ind);
						$('img',$sel_rek).removeData();
					}
				}
			}
		});
	}
}

addLoadEvent(function(){
randomBnr();
initBnrRow();
});
</script>

There are several scenarios for image data-altsrc attribute.

  • Do not define it if you do not have any alternate banners
  • To show different banner images and link to same destination URL then define alternative banner image sources separated by ||| following syntax data-altsrc="img1|||img2|||img3”
  • To show different images and link to different sources then use following syntax data-altsrc=" url1||img1|||url2||img2|||url3||im3”

How to promote banner advertisement?

There are several promotion plans for banner ads:

  • Display your own promotional banner linking to advertise here page
  • Show “advertise here” link before or after banners
  • Send email newsletter to all registered users. Be careful with this because users must subscribe to your newsletter before you send them any newsletter, and you should have unsubscribe links in your newsletters. These rules differ for each country so check your legal requirements before sending newsletter.
  • Add footer link on some email messages sent from your website. These are usually emails when new user registers, notification emails sent to user when their listing approved. Text can be “Discover more advertising options” with link to advertise here page.
23 (+1) visits

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Classifieds Business Newsletter

    Get discounts and tips about growing your classifieds website.

    Subscribe