Vladimir Komarov: Site | Blog | Photo Blog | Books Vladimir Komarov Projects: MyAstroData | MyAstroData Network | MyAstroData Finance | ArtGround | Lora Georgieva

Нов рекламен формат в сайта - кампанийна реклама

29 ноември 2009, 14:16:41 | Категория: Реклама в сайта | Автор: Владимир Комаров

Тази публикация е предназначена за потенциалните рекламодатели и за колегите уеб разработчици. За останалата част от потребителите едва ли ще представлява особен интерес.

Тя представя един нов рекламен формат, който ще въведа за рекламодатели през януари 2010, а за разработчиците - jQuery базирано слайдшоу, което могат да ползват за своите проекти.

За рекламодатели

Все още не съм решил нищо окончателно и не знам дали рекламата ще е отново PPC или този път ще е PPT, и на какви цени (за клик или за 1000 импресии) ще се продава. В момента, в който имам яснота по тези въпроси, в страницата за реклама ще се появи допълнително инфо, вж. B - Кампанийна реклама.

Това, което е ясно е, че става дума за рекламно слайдшоу (или пък директно Flash клип) в "шапката" на сайта, под основната навигация. Банерът е видим от всички страници на сайта, с изключение на раздела "Моят хороскоп". Отчитат се импресии, както и уникални за деня кликове - като след като даден потребител кликне върху банера до края на текущата дата той не (му) се показва.

Всичко това може да се види от това кратко демо видео. През декември ще експериментирам с формата: предстои една игра с награди за потребителите + инициативата за "500 безплатни консултации" - тези две кампании ще бъдат тест за формата.

За уеб разработчици

На 7 декември ще направя три месеца в Economedia, където в момента работя като уеб разработчик (PHP, PostgreSQL / MySQL, jQuery), обслужвайки сайтовете на "Градът Медиа Груп" и на "Sofia Echo". Работата в Икономедиа - най-голямата група за бизнес медии - очевидно ми влияе добре, правейки ме още по-съсредоточен върху целта ми до пет години да стана милионер, както и по-бизнес ориентиран :] Шегата настрана, рекламата, иновативните рекламни формати, идеите и методите за монетизиране на уеб трафика и т.н. - това е част от работната атмосфера и смея да твърдя, че се уча от може би най-добрите в бранша. Това едно на ръка.

От друга страна имаме тази прекрасна JavaScript библиотека - jQuery - и нейната здрава философия: write less, do more. Започнах да работя с нея през декември 2008. jQuery oбщността е създала тонове полезни снипети и плъгини от 2006 насам и предполагам, че е наистина добра идея всеки разработчик, който я ползва в работата си - според възможностите и желанието си - да дава и своя принос.

Като обеденим темата за рекламата с леснотата и лекотата на работа с jQuery получаваме ето това слайдшоу, което ви предоставям за свободно ползване:

jQuery Hover Slideshow 0.1 24.11.2009; Author: Vladimir Komarov (Economedia)

1

2

3

4

5

Debug: Current: 1; Over X; Last: X;

jQuery кодът, който оживява слайдшоуто:

	$(function() {	
		// Functions
		var setNavigationStyle = function(index) {
			$("#navigationDiv .trigger").css({"background" : "#EEEEEE"});
			$("#navigationDiv .trigger p").css({"color" : "#000000"});
			$("#navigationDiv #t_" + index).css({"background" : "#FFFFFF"});
			$("#navigationDiv #t_" + index + " p").css({"color" : "#008000"});
		}
		
		// Init slides and navigation
		var i = 1;
		$("#mainFrame .slides").each(function() {
			$(this).attr("id", "s_" + i);
			i++;
		});
		var i = 1;
		$("#navigationDiv .trigger").each(function() {
			$(this).attr("id", "t_" + i);
			i++;
		});
		setNavigationStyle(1);
		
		var ss = true;
		var ss_init = true;
		var d = 3000; // 3 seconds
		var total = 5;
		var c = 1;
		var last = 0;
		var timers = new Array();
		
		// Slide show - v. 0.1 24.11.2009	
		if (ss) {
			var makeSlideShow = function() {
				if (!ss_init) {							
					// Counter
					c++;
					if (last) { 
						last >= total ? c = 1 :  c = last + 1;
						last = 0;
					}

					// Debug
					$("#currentSlideSS").html("<b>" + c + "</b>");					
											
					// Change slide
					$("#mainFrame .slides").hide();
					$("#mainFrame #s_" + c).fadeIn("slow");	
					
					setNavigationStyle(c);					
							
					// Reset counter
					if (c >= total) { c = 0; }
				}
				else if (ss_init) { ss_init = false; }
				// Repeat after X seconds (var d)
				timers.push( setTimeout(makeSlideShow, d) );
			}
			makeSlideShow();
		}				
		
		// Handle Events
		// Hover - Triggers
		$("#navigationDiv .trigger").hover(
			function() {
				// Get ID
				var ID = $(this).attr("id");
				var index = parseInt(/\d/.exec(ID));
				
				// Stop slideshow - Reset slide show setTimeout's
				for (var t = 0; t <= timers.length; t++) { clearTimeout(timers[t]); }
				// First we stop slideshow, then start it again with new index
				last = index;
				
				// Debug
				$("#currentSlideOver").html("<b>" + index + "</b>");
				$("#currentSlideLast").html("<b>" + last + "</b>");
				
				// Change slide
				$("#mainFrame .slides").hide();
				$("#mainFrame #s_" + index).fadeIn("slow");
				
				setNavigationStyle(index);
			},
			function() {
				// Debug
				$("#currentSlideOver").html("<b>X</b>");
				
				// Start slideshow again
				ss_init = true;
				makeSlideShow();
			}
		);
		// Hover - Slides
		$("#mainFrame .slides").hover(
			function() {
				// Get ID
				var ID = $(this).attr("id");
				var index = parseInt(/\d/.exec(ID));
				
				// Debug
				$("#currentSlideOver").html("<b>" + index + "</b>");				
				
				// Stop slideshow - Reset slide show setTimeout's
				for (var t = 0; t <= timers.length; t++) { clearTimeout(timers[t]); }
				// First we stop slideshow, then start it again with new index
				last = index;
			},
			function() {
				// Debug
				$("#currentSlideOver").html("<b>X</b>");
				$("#currentSlideLast").html("<b>" + last + "</b>");
				
				// Start slideshow again
				ss_init = true;
				makeSlideShow();
			}
		);		
	});

XHTML markup кодът:

	<div id="slideshow">
		<div id="mainFrame">
			<div class="slides">
				<img src="1.jpg" alt="" />
			</div>
			<div class="slides hidden">
				<img src="2.jpg" alt="" />
			</div>
			<div class="slides hidden">
				<img src="3.jpg" alt="" />
			</div>
			<div class="slides hidden">
				<img src="4.jpg" alt="" />
			</div>
			<div class="slides hidden">
				<img src="5.jpg" alt="" />
			</div>
		</div>
		<div id ="navigationDiv">
			<div class="trigger">
				<p>1</p>
			</div>
			<div class="trigger">
				<p>2</p>
			</div>
			<div class="trigger">
				<p>3</p>
			</div>
			<div class="trigger">
				<p>4</p>
			</div>
			<div class="trigger">
				<p>5</p>
			</div>
		</div>
	</div>
		
	<p>Debug: Current: <span id="currentSlideSS"><b>1</b></span>; Over <span id="currentSlideOver"><b>X</b></span>; Last: <span id="currentSlideLast"><b>X</b></span>;</p>

CSS правилата:

	div#slideshow {	border: 1px solid #AAAAAA; clear: both; float: left; margin: 0 0 20px 0; padding: 2px; position: relative; width: 520px; }
	
	div#mainFrame { border: 1px solid #BBBBCC; height: 412px; float: left; margin: 0 4px 0 0; overflow: hidden; position: relative; width: 360px;}
	.hidden { display: none; }
	
	div#navigationDiv { border: 1px solid #BBBBCC; float: left; padding: 0 0 2px 0; position: relative; width: 152px; }	
	div.trigger { background: #EEEEEE; clear: both; cursor: pointer; height: 80px; float: left; margin: 2px 2px 0 2px; position: relative; width: 148px; }
	div.trigger p { font-weight: bold; margin: 30px 10px 10px 40px; }

Тествано c Firefox 3.5, Chrome, Safari 3, Opera 9, Internet Explorer 7. Валиден XHTML и CSS код.

Можете да ползвате кода за собствени цели, като бих се радвал, ако линквате този пост от вашите сайтове/блогове и/или ми върнете обратна връзка под формата на конструктивна критика, предложения или просто някакъв коментар.

Споделяне на новината в Twitter Споделяне на новината във Facebook За да не изпуснете новина: Email и RSS абонаменти

Етикети:

Всички права запазени, www.myastrodata.com © 2008-2018
Препубликуването на статиите в онлайн или печатна медия е позволено само след изрично писмено съгласие от страна на администратора на сайта, Владимир Комаров, и от страна на автора на статията, в случаите, когато статията е на гост-автор! Свободно можете да използвате фрагменти от статията под формата на цитати при условие, че цитатът е уместен и не променя смисъла на написаното, както и ако поставите директен линк към тази статия под или над цитата, задължително (използвайте permalink). Всеки линк от Ваша страна се приема като знак на добра воля в помощ за популяризирането на сериозната астрология и Ви връща моята сърдечна благодарност! Всички въпроси по темата отнасяйте директно към администратора на сайта.

Permalink: http://www.myastrodata.com/news/nov-reklamen-format-v-sayta-kampaniyna-reklama/

^