Bir Reklam Banner’ın Yüzde 50’sinden Fazlasının Ne Kadar Süre Görüldüğünü Tutma
Selamlar arkadaşlar;
Bugün ilginç bir konu üzerine konuşacağız. Özellikle reklamcılık sektöründe bir reklam banner’ının kaç kere görüldüğünün sayılması çok önemlidir. Ancak avrupada yeni trend reklamın %50’sinden fazlasının toplam ne kadar süre göründüğü üzerine ilerlemektedir. İşte fiyatlandırmalar da görünene bu toplam süre üzerinden yapılmaktadır. Örneğin bir reklam, sayfanın altında konumlanmış olmasına rağmen sayfa her yüklendiğinde görünmese bile görüldü şeklinde kabullenip sayılmaktadır. Oysa bu yanlış bir yaklaşımdır. Asıl doğru olan client’ın scroll yaparak sayfanın aşağısına inip reklamı gerçekten görmesidir. İşte o zaman reklam görülüp esas amacına ulaşmış olmaktadır.
Aşağıda görüldüğü gibi en alttaki nintendo reklamının o an itibarı ile %68.67’si görülmektedir. Ve %50’dan fazlasının görüldüğü süre 7.27 sn’dir.
Aşağıda scroll işlemi sırasında scroll’un top pozisyonu bulunarak, sayılacak banner’ın ekrandaki top ve bottom kordinatları bulunur.
CalculateTime.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function () { //Scroll'un en son konumu saklanır. var lastScroll = 0; $(window).scroll(function (event) { //Geçerli scroll pozisyonu alınır var st = $(this).scrollTop(); //Yukarı aşağıya olan scroll hareketi belirlenir calculateTime(); if (p.percent > 0.13) { countDown(); console.log("start"); } else { stopTimer(); console.log("stop"); } //En son scroll pozisyonu kaydedilir. lastScroll = st; }); }); }); |
calculateTime(): Function’ı ile ekranda banner’ın görünen yüksekliği / toplam banner yüksekliğine bölünerek belli bir oranla çarpılır. Böylece banner’ın görünme yüzdesi hesaplanır. Ve ekranın üstüne yazılarak görünme oranı %50 ve fazlası ise (p.percent>0.13) countDown() function’ı ile sayıma başlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var p; var result; function calculateTime() { p = { scrollTop: $(window).scrollTop(), windowHeight: $(window).height(), contentTop: $('#Banner5').position().top, contentHeight: $('#Banner5').height() }; // ekrandaki bannerın scroll'a göre giriş ve çıkış kordinat sınırları belirlenir. p.lowerBound = p.contentTop - p.windowHeight; p.upperBound = p.contentTop + p.contentHeight; // banner'ın görünen kısmının tüm yüksekliğe oranın x2 katı alınır. p.percent = (p.scrollTop - p.lowerBound) / (p.upperBound - p.lowerBound) * 2; result = p.percent * 50 / 0.13; result = result > 100 ? 100 : result; result = result < 0 ? 0 : result; $('#hideMsg2 span').text(result.toFixed(2) + "%"); } |
countDown() & stopTimer(): Reklamın %50’sinden fazlasının göründüğü andaki süre sayılırken sayfadan çıkılır, başka tab’a geçilir veya minimize gibi işlemler yapılır ise sayım durdurulur. Geçen süre ekrana anlık yazdırılı. Tekrar sayfaya gelindiğide sayım süresine kalındığı yerden devam edilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var timer = null; var sec = 0; var doIt = true; function countDown() { if (doIt) { doIt = false; timer = setInterval(function () { if (window_focus == true) { $('#hideMsg span').text(sec++/100); } }, 10); } } function stopTimer() { clearInterval(timer); doIt = true; } |
Index.cshtml: Yukarıdan aşağıya eklenen bannerlar içinden “Banner5” için ölçüm yapılmaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/jquery-2.1.1.min.js"></script> <script src="~/Scripts/CalculateTime.js"></script> <div class="jumbotron"> <div align="left"> Test Banner Time </div> </div> <div class="row"> <div id="Banner1" style="height:200px"><img style="height:150px; width:1216px" src="~/Content/image/images.jpg" /></div> <div id="Banner2" style="height:200px"><img style="height:150px; width:1216px" src="~/Content/image/images2.png" /></div> <div id="Banner2" style="height:200px"><img style="height:150px; width:1216px" src="~/Content/image/images3.jpg" /></div> <div id="Banner3" style="height:200px"><img style="height:150px; width:1216px" src="~/Content/image/images4.png" /></div> <div id="Banner5" style="height:200px;"><img style="height:161px;width:1216px;border-style:double; border-color:red; border-width:6px" src="~/Content/image/images5.jpg" /></div> <div id="Banner6" style="height:200px"><img style="height:150px" src="~/Content/Image/images6.jpg" /></div> </div> |
CalculateTime.js(Tamamı):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
var window_focus = true; $(document).ready(function () { $(window).focus(function () { window_focus = true; }) .blur(function () { window_focus = false; }); $(function () { //Scroll'un en son konumu saklanır. var lastScroll = 0; $(window).scroll(function (event) { //Geçerli scroll pozisyonu alınır var st = $(this).scrollTop(); //Yukarı aşağıya olan scroll hareketi belirlenir calculateTime(); if (p.percent > 0.13) { countDown(); console.log("start"); } else { stopTimer(); console.log("stop"); } //if (st > lastScroll) { // countDown(); // console.log("start"); //} //else { // stopTimer(); // console.log("stop"); //} //Updates scroll position lastScroll = st; }); }); }); var timer = null; var sec = 0; var doIt = true; function countDown() { if (doIt) { doIt = false; timer = setInterval(function () { if (window_focus == true) { $('#hideMsg span').text(sec++/100); } }, 10); } } function stopTimer() { clearInterval(timer); doIt = true; } var p; var result; function calculateTime() { p = { scrollTop: $(window).scrollTop(), windowHeight: $(window).height(), contentTop: $('#Banner5').position().top, contentHeight: $('#Banner5').height() }; // ekrandaki bannerın scroll'a göre giriş ve çıkış kordinat sınırları belirlenir. p.lowerBound = p.contentTop - p.windowHeight; p.upperBound = p.contentTop + p.contentHeight; // banner'ın görünen kısmının tüm yüksekliğe oranın x2 katı alınır. p.percent = (p.scrollTop - p.lowerBound) / (p.upperBound - p.lowerBound) * 2; result = p.percent * 50 / 0.13; result = result > 100 ? 100 : result; result = result < 0 ? 0 : result; $('#hideMsg2 span').text(result.toFixed(2) + "%"); } |
Yukarıdaki örnekde de görüldüğü gibi teknolojinin kullanıldığı her alan, değişip gelişmeye mahkumdur. Çünkü zamana göre ihtiyaçlar değişmekte ve önceden yeterli olan datalar gelişen rekabet ortamında yeterli olmamaktadır. Daha detaylı bilgiler ile rakiplere karşı bir adım öne geçilmekte ve mükemmellik detaylarda gizlidir cümlesi bir daha doğrulanmaktadır.
Bir sonraki makalede görüşmek üzere. Hepinize hoşçakalın.
Source Kod: http://www.borakasmer.com/projects/TestTimeBanner.rar
Örnek Url(İptal): http://bannersshowtime.azurewebsites.net/
Selamlar Hocam;
Gerçekten çok güzel bir yazı olmuş. Çok hoşuma gitti. En farklı konular hep sizde:)
Elinize sağlık.
Merhaba Bora Bey;
Yine farklı bir yazı. Çok güzel ve bence ilerde reklam sektöründe bolca kullanılabilecek bir yapı.
İşe yarar yazıların baş kaynağasınız:)
Başarılar dilerim!!
Hocam elinize sağlık;
Çok güzel bir makale olmuş. Gerçekten çok beyendim. Sanırım toplam süreyi cookie’de saklayıp daha sonra clientlardan target bilgisi ile çekeceksiniz.
İyi çalışmalar.