Dr. Baranyai László, fénykép

Dr. Baranyai László
blog (online napló)

 

Banggood hirdetések honlapba illesztése

11 nappal ezelőtt, |

 

Alapvetően kedvelem a Banggood oldalt. Jó áron vásárolhatok sokféle terméket. A minőség az árral összhangban van, ez tagadhatatlan, de még így is a hazai piacon tökéletesen megállja a helyét minden, amit eddig rendeltem. Ezért is gondoltam, hogy csatlakozom az u.n. affiliate programhoz, azaz én is kiteszem honlapomra a reklámjait.

Reklámok kiválasztása

A Banggood.com honlap kínálatából a bannerek és kuponok ragadták meg a fantáziámat. A banner hagyományos képes hirdetés, aminek a kódja simán letölthető és copy-paste beillesztehtő bármely honlapba. Sajnos a HTML kód arra a kiválasztott képre és termékre, termékcsoportra vonatkozik. Hasonló a helyzet a kuponokkal, amelyek ezzel szemben szöveges reklámok linkkel, kupon kóddal, érvényességi dátummal és persze a leírással. Nem tudom mások hogy vannak ezzel, de én olyan lusta vagyok, hogy nem akarok naponta – vagy ennél gyakrabban – hirdetéseket manuálisan cserélgetni. Ennek a funkciónak a hiánya szerintem jelentős hátrány pillanatnyilag.

A hirdetések listából történő véletlenszerű kiválasztására és megjelenítésére rövid JavaScript programot írtam. A blog betöltésekor megjelenik egy alapértelmezett kép és reklámszöveg, amely a webshop általános hirdetése. Ezeket cserélem le a honlap betöltése során. Ebből a látogató nem vesz észre semmit, de biztosan nem marad reklám nélkül. A program a képes és szöveges hirdetések kezelésére készült. A hirdetések adatait tömbökbe rakja és onnan választ véletlenszerűen.

// Javascript Class for Advertisments
function ad_engine(idURL,idIMG,idTXT) {
 // HTML identifiers for ad url and picture
 this.bgURL = idURL;
 this.bgIMG = idIMG;
 this.bgTXT = idTXT;
 // list of text, url and picture addresses
 this.banner_URL = new Array();
 this.banner_IMG = new Array();
 this.txt_TITLE = new Array();
 this.txt_DATE = new Array();
 this.txt_URL = new Array();
 //
 // loading banner picture and url pairs
 this.addBanner = function(adURL,adIMG) {
 	this.banner_URL.push(adURL);
 	this.banner_IMG.push(adIMG);
 }
 //
 // loading text and url pairs
 this.addText = function(adURL,adTITLE,adDATE) {
 	this.txt_URL.push(adURL);
 	this.txt_TITLE.push(adTITLE);
 	this.txt_DATE.push(adDATE);
 }
 //
 // select index and replace existing data with random selection
 this.setBannerAd = function() {
 	this.idx = Math.floor( Math.random()*this.banner_URL.length );
 	if (document.getElementById) {
 		document.getElementById(this.bgURL).href = 'http://www.example.com/' + this.banner_URL[ this.idx ];
  		document.getElementById(this.bgIMG).src = 'http://img.example.com/banner/' + this.banner_IMG[ this.idx ];
 	} else {
 		document.all[this.bgURL].href = 'http://www.example.com/' + this.banner_URL[ this.idx ];
 		document.all[this.bgIMG].src = 'http://img.example.com/banner/' + this.banner_IMG[ this.idx ];
 	}
 }
 //
 // select index and replace existing data with random selection
 this.setTextAd = function() {
 	this.idx = Math.floor( Math.random()*this.txt_URL.length );
 	this.txtstr = '<a href="http://www.example.com/' + this.txt_URL[ this.idx ] + '"><strong>' + this.txt_TITLE[ this.idx ] + '</strong><br />' + this.txt_DATE[ this.idx ] + '</a>';
 	if (document.getElementById) {
 		document.getElementById(this.bgTXT).innerHTML = this.txtstr;
 	} else {
 		document.all[this.bgTXT].innerHTML = this.txtstr;
 	}
 }
} // End-of-class: ad_engine

A fenti osztály kódját szándékosan nem törtdeltem szét, hogy egyben ki lehessen másolni. A HTML lapba épített hirdetések azonosítóival inicializálható az objektum. Jelen formájában 1 db banner és/vagy 1 db szöveges hirdetés megjelenítésére szolgál. Az addBanner() és addText() függvények töltik fel a tömböket adatokkal. A setBannerAd() és setTextAd() függvények első lépésként kiválasztanak egy véletlen elemet a tömbökből, majd annak adataival lecserélik az alapértelmezett hirdetést. Banner (kép) hirdetés esetén elegendő a kép forrását és a befoglaló link címét cserélni. Szöveges hirdetésnél kis formázás is került bele, személyes ízléshez igazítva.

Az osztály használata egyszerű. Létrehozását követően fel kell tölteni a tömböket és elindítani a beállító funkcióját. Pár sorban megoldható:

// Initialize with HTML ids
var myad = new ad_engine('AD_URL_ID','AD_IMG_ID','AD_TXT_ID');
// List of banner advertisments
myad.addBanner('...link1...','...image1 name...');
myad.addBanner('...link2...','...image2 name...');
// Setup banner advertisment
myad.setBannerAd();
// List of text advertisments
myad.addText('...link1...','...title1...','...second row info...');
myad.addText('...link2...','...title2...','...second row info...');
// Setup text advertisment
myad.setTextAd();

Az egész hirdetéskezelő program valóban kis méretű, nem is terheli nagyon az oldal betöltését. Természetesen első körben megosztottam az ötletet az üzemeltetőkkel. Ők köszönettel vették a javaslatot, de úgy tűnik nem gondoltak rá, hogy ilyen irányba is fejleszteni lehetne. Reméltem, hogy sokkal profibb módon összerakják kategória választással, stb. A közösségi programok kitűnő marketing eszközök és az aktív tábor segít növelni – vagy szinten tartani – a minőséget. Nagy kár, hogy néha kezdetleges eszközök állnak csak rendelkezésre, miközben a közösség potenciálja sokkal nagyobb lenne. Ha valaki kedvet kapott a fenti JS kód használatához, vagy további testreszabásához, kedves egészségére.

 

 

« régebbi

 

Banggood reklám