KURULUM KILAVUZU MART 2014 1
İçindekiler 1 Suggest Methodu... 3 1.1 Banner Sıralamasının Ziyaretçilere özel değişmesi... 3 1.2 Site üzerindeki widget aracığıyla gösterilen öneriler... 4 1.2.1 RealTime Recommendation... 4 1.2.2 Alternative Product Recommendation... 6 1.2.3 Offer By LastProductView Recommendation... 7 2 SuggestActions Methodu... 9 2.1 Belirtilen kurala uygun davranışı gösteren ziyaretçilere popup gösterimi... 9 2.1.1 Belirli kategorideki ürünlere 3 defa bakan ziyaretçilere popup gösterimi... 9 2.1.2 Üye olmayan ziyaretçilere belirli sayfa gösterimlerinde popup gösterimi... 10 2
Visilabs Target uygulaması ziyaretçilere sitedeki hareketlerine göre özel öneriler sunmakla beraber site üzerindeki bannerların sıralamasını da ziyaretçinin davranışlarına göre değiştirmektedir. Target bu önerileri ve değişimi site üzerine implemente edilen javascript fonksiyonuyla gerçekleştirmektedir. Size sunulan arayüz ekranından aksiyon almak istediğiniz durumu(kişiye özel banner sıralaması, ziyaretçinin site üzerindeki hareketlerine göre yapılacak öneriler, site üzerinde belirli davranışları sergileyen ziyaretçilere özel popuplar v.s gibi) belirtikten sonra siteye implemente ettiğiniz javascript kodu ile aksiyon almak istediğiniz durumu, ziyaretçi bu davranışı sergilediğinde gerçekleştirebilirsiniz. Aksiyon almak istediğiniz durumu size sunacağımız arayüz ekranından kolayca yapabilirsiniz. Visilabs Target uygulaması aşağıda protipi bulunan iki javascript fonksiyonu aracılığı ile veri alışverişini gerçekleştirmektedir. 1 Suggest Methodu Visilabs.prototype.Suggest = function(zoneid, ContentID, ProductCode, Callback) ZoneID -> Arayüz üzerinden aksiyon almak istediğiniz durumunu id'si. ContentID -> Bannerın gösterileceği alanın yani template'in div id'si. ProductCode -> Ürün Detay sayfalarında parametre olarak geçilmektedir. Bu Parametre ile ürün detay sayfalarında bu ürüne bakan diğer ziyaretçilerin gezdiği diğer ürünler ya da bu ürünü satın alan ziyaretçilerin satın aldığı diğer ürünlerinin önerisinin veridiği senaryolar için kullanılmaktadır. ProductCode gerektirmeyen method bildirimlerinde parametre değeri olarak null geçilmektedir. Callback -> Parametre olarak alınan Callback methodunun ismidir. 1.1 Banner Sıralamasının Ziyaretçilere özel değişmesi Ziyaretçiye özel Banner Sıralaması Siteye implemente edeceğiniz Suggest methodu ile gerçekleşir. Methodun prototipi: Visilabs.prototype.Suggest = function(zoneid, ContentID, null, Callback) Örnek implementasyon: <script src="http://example.com/js/visilabs.js" type="text/javascript"></script> <script type="text/javascript"> var VL; VL = new Visilabs(); VL.AddParameter("json", "true"); VL.Suggest(1, null, null, BannerLoaded); 3
function BannerLoaded(data)... </script> Suggest methoduna parametre olarak geçen BannerLoaded isimli CallBack methoduna düşen örnek bir response: _VTObjs["_VisilabsTarget_0"].Callback( [ "title":"indirim Kampanyası", "img":"http://www.visilabs.com/images/kampanyalar/indirim.jpg", "thumb":"http://www.visilabs.com/images/kampanyalar/indirimthumb.jpg", "text":"indirim Kampanyası ", "dest_url":"http://www.visilabs.com/indirim.aspx", "target":"_self", "code":"product_123", "priority":1,, "title":"segment Analizi", "img":"http://app.visilabs.com/files/24/480/banners/cohort.jpg", "thumb":"http://www.visilabs.com/images/segment.jpg", "text":"segmentation", "dest_url":"http://visilabs.com/urunler/segment/70", "target":"_self", "code":"product_124", "priority":2, ]), Dönen data json formatında olup, belirtilen değerler arayüzden girilmiştir ve bir kurala bağlanmıştır. Ziyaretçi site üzerinde tanımlanan bu kurala uygun bir adımı izlediği takdirde banner sıralaması ziyaretçiye özel olacak şekilde değişecektir. Banner gösterimleri için hazırlanan template alanına özel div id değerini Suggest methoduna parametre olarak geçeceğiniz gibi bu değeri null geçerek ilgili parçacığa kendiniz de set edebilirsiniz. 1.2 Site üzerindeki widget aracığıyla gösterilen öneriler Site üzerinde bulunan widget alanda gösterilen ziyaretçiye özel ya da genel öneriler siteye implemente edeceğiniz Suggest methodu ile gerçekleşir. Bu bölümde farklı senaryoları örneklendirmek gerekirse : 1.2.1 RealTime Recommendation RealTime Recommendation ile Site üzerinde o anda bakılan ürünler gösterilmektedir. Methodun prototipi: 4
Visilabs.prototype.Suggest = function(zoneid, ContentID, null, Callback) Örnek implementasyon: <script src=" http://example.com/js/visilabs.js " type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () var vlc = new Visilabs(); vlc.addparameter("json", true); vlc.suggest(1, null, null, RealTimeSuggest); ); function RealTimeSuggest(data) $('body').append($('<div><strong>şu anda bakılan ürünler</strong></div>')); $.each(data, function(index, element) $('body').append($('<div>', text: element.title )); ); </script> Örnek olması açısında sadece title attr'si yazılmıştır. Callback methoduna parametre olarak düşen data içeriğinde ürüne ait birçok özelliği aşağıdaki örnek bir response üzerinde inceleyebilirsiniz. Suggest methoduna parametre olarak geçen RealTimeSuggest isimli CallBack methoduna düşen örnek bir response: _VTObjs["_VisilabsTarget_0"].Callback([ "title": "Test Product", "img": "http://example.com/img/test1.jpg "code": "Code1", "target": "_self", "dest_url": "http://www.example.com/test/testproduct.html "brand": "Brand1", "price": 29.900000, "dprice": 19.900000, "cur": "TL", "rating": 1, "comment": 2, "discount": 43.48, "dcur": "TL", "freeshipping": false, "samedayshipping": true, 5
"attr1": "", "attr2": "", "attr3": "", "attr4": "", "attr5": "", 1.2.2 Alternative Product Recommendation Alternative Product widgeti ile o an bakılan ürüne bakan diğer ziyaretçilerin baktıkları diğer ürünler önerilmektedir Methodun prototipi: Visilabs.prototype.Suggest = function(zoneid, ContentID, currentproductcode, Callback) Örnek implementasyon: <script type="text/javascript"> var currentproductcode = ""; $(document).ready(function () var vlc = new Visilabs(); currentproductcode = "ProductCode"; var querystringval = getparameterbyname("id"); if (querystringval!= "") currentproductcode = querystringval; vlc.addparameter("json", true); vlc.suggest(2, null, currentproductcode, AlternativeProductViewSuggest); ); function AlternativeProductViewSuggest(data) $('body').append($('<div><strong>' + currentproductcode + ' nolu ürün için önerilerimiz</strong></div>')); $.each(data, function(index, element) $('body').append($('<div>', text: element.title )); ); function getparameterbyname(name) name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null? "" : decodeuricomponent(results[1].replace(/\+/g, " ")); </script> 6
Suggest methoduna parametre olarak geçen AlternativeProductViewSuggest isimli CallBack methoduna düşen örnek bir response: _VTObjs[ "_VisilabsTarget_0" ].Callback([ "title": "Alternative Product 1", "img": "http://example.com/img/alternativeproduct1.jpg", "code": "Code241", "target": "_self", "dest_url": "http://example. com/test/test.html ", "brand": "Brand1", "price": 429.000000, "dprice": 329.000000, "cur": "TL", "rating": 0, "comment": 0, "discount": 23.31, "dcur": "TL", "freeshipping": false, "samedayshipping": true, "attr1": "", "attr2": "", "attr3": "", "attr4": "", "attr5": "", 1.2.3 Offer By LastProductView Recommendation Offer By LastProductView widgeti ile ziyaretçinin Anasayfaya dönmeden önce ziyaret ettiği ürüne bakan diğer ziyaretçilerin baktıkları diğer ürünler önerilmektedir. Bu widget Anasayfa üzerinde öneri yapmaktadır. Methodun prototipi: Visilabs.prototype.Suggest = function(zoneid, ContentID, lastproductcode, Callback) 7
Örnek implementasyon: <script src="http://www.example.com/scripts/visilabs.js" type="text/javascript"></script> script type="text/javascript"> $(document).ready(function () var vlc = new Visilabs(); vlc.addparameter("json", true); vlc.suggest(3, "vlcontent", null, LastProductViewSuggest); ); function LastProductViewSuggest(data) $('body').append($('<div><strong>en son bakılan ürüne göre öneriler</strong></div>')); $.each(data, function(index, element) $('body').append($('<div>', text: element.title )); ); function getparameterbyname(name) name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null? "" : decodeuricomponent(results[1].replace(/\+/g, " ")); </script> Suggest methoduna parametre olarak geçen LastProductViewSuggest isimli CallBack methoduna düşen örnek bir response içeriği: _VTObjs[ "_VisilabsTarget_0" ].Callback([ "title": "Alternative Product 2", "img": "http://example. com/ img/alternativeproduct2.jpg", "code": "Code123", "target": "_self", "dest_url": "http://example.com/ test/test2.html", "brand": "Brand2", "price": 229.000000, "dprice": 162.900000, "cur": "TL", "rating": 0, "comment": 0, "discount": 28.86, "dcur": "TL", "freeshipping": false, 8
"samedayshipping": false, "attr1": "103725", "attr2": "342340", "attr3": "", "attr4": "", "attr5": "", 2 SuggestActions Methodu Visilabs.prototype.SuggestActions = function(callback) Callback -> Parametre olarak SuggestActons methoduna sadece Callback methodu geçmektedir. 2.1 Belirtilen kurala uygun davranışı gösteren ziyaretçilere popup gösterimi Visilabse ile size sunulan arayüz ekranından kural tanımı yapabilir ve bu kurala uygun hareket eden ziyaretçilere popup gösterimi yapabilirsiniz. Kurala uygun popup gösterimlerini siteye implemente edeceğiniz SuggestActions methodu ile gerçekleştirebilirsiniz. Farklı senaryolar aracığıla örneklendirmek gerekirse 2.1.1 Belirli kategorideki ürünlere 3 defa bakan ziyaretçilere popup gösterimi Siteye implemente edeceğiniz kod bloğunda İlgili popup'ı açan kod satırı OpenModalPopup() isimli methotdur. Methodunun bu popup açması için ilgili kontrollerden geçmesi gerekmektedir. Bu kontrollerde data'nın boş olup olmadığı(data.length >0) ve ve aksiyon id'sinin uygun olup olmadığı(data[0].actionid ==1) kontrolü ile sağlanmaktadır. Site üzerinde farklı kurallarla tetiklenebilecek birden fazla popup gösterimi olabileceği için id kontrolü bulunmaktadır. İlgili kural tetiklene kadar act.js scriptinden dönen json boş dönecektir. Kural tetiklendiği anda act.js scripti data dönüşü yapacaktır. Kural tanımını arayüzden sürükle-bırak olarak yapabilmektesiniz. Methodun prototipi: Visilabs.prototype.SuggestActions = function(callback) Örnek implementasyon: var VL; VL = new Visilabs(); VL.AddParameter("json", "true"); VL.SuggestActions(OnActionsLoaded); function OnActionsLoaded(data) if (data.length > 0 && data[0].actiontype == "LightBox") if (data[0].actid == 1) OpenModalPopup(); 9
SuggestActions methoduna parametre olarak geçen OnActionsLoaded isimli CallBack methoduna düşen örnek bir response içeriği: _VTObjs[ "_VisilabsTarget_0" ].Callback([ "actid": 1, "title": "Visilabs Popup", "actiontype": "LightBox", "actiondata": "dest_url": "visilabs.com", "type": "Inline", "wname": "İletişim bilgilerinizi bırakın, sizi arayalım", "width": 580, "height": 310, "url": "", "custom_attr": [ ] ],"1 1",""); 2.1.2 Üye olmayan ziyaretçilere belirli sayfa gösterimlerinde popup gösterimi Sitenizi üye olmadan ziyaret eden ziyaretçilerin belirli sayıda sayfa gösteriminden sonra popup çıkararak mail toplayabilirsiniz. Daha önce de değindiğimiz gibi Kurala uygun popup gösterimleri siteye implemente edeceğiniz SuggestActions methodu ile sağlanmaktadır. Bir önceki senaryomuzda ilgili pop'un aksiyon id'si 1 idi. Burada farklı bir kural tanıma bağlı aksiyon oluşturduğumuz için ilgili aksiyon kontrolünü 2 olarak belirlenmiştir.( if(data[0].actid == 2)) Kuralı daha önceden de bahsettiğmiz gibi size tanımlanan arayüz üzerinden belirleyebilmektesiniz. Örnekleme site üzerinde 4 kez üye olmadan ziyaret eden ziyaretçiler için tanımlanmıştır. Methodun prototipi: Visilabs.prototype.SuggestActions = function(callback) Örnek implementasyon: var VL; VL = new Visilabs(); VL.AddParameter("json", "true"); 10
VL.SuggestActions(OnActionsLoaded); function OnActionsLoaded(data) if (data.length > 0 && data[0].actiontype == "LightBox") if (data[0].actid == 2) OpenModalPopup(); SuggestActions methoduna parametre olarak geçen OnActionsLoaded isimli CallBack methoduna düşen örnek bir response içeriği: _VTObjs[ "_VisilabsTarget_0" ].Callback([ "actid": 2, "title": "Visilabs Popup", "actiontype": "LightBox", "actiondata": "dest_url": "visilabs.com", "type": "Inline", "wname": "Mail Collector", "width": 580, "height": 310, "url": "", "custom_attr": [ ] ],"1 1",""); 11
Adres : Boğaziçi Üniversitesi Teknopark Bebek İSTANBUL Web : www.visilabs.com e-mail : contact@visilabs.com Tel : (0212) 356 74 20 Fax : (0212) 356 74 22 12