Visilabs Target Kurulum Kılavuzu

KURULUM KILAVUZU
MART 2014
Visilabs Target Kurulum Kılavuzu
1
İçindekiler
1
2
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
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
Visilabs Target Kurulum Kılavuzu
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);
Visilabs Target Kurulum Kılavuzu
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":"İndirim Kampanyası",
"img":"http://www.visilabs.com/images/kampanyalar/indirim.jpg",
"thumb":"http://www.visilabs.com/images/kampanyalar/indirimThumb.jpg",
"text":"İndirim 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
implemente edeceğiniz Suggest methodu ile gerçekleşir.
da genel öneriler siteye
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:
Visilabs Target Kurulum Kılavuzu
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,
Visilabs Target Kurulum Kılavuzu
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>' +
önerilerimiz</strong></div>'));
$.each(data, function(index, element) {
$('body').append($('<div>', {
text: element.title
}));
});
}
currentProductCode
+
'
nolu
ürün
için
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>
Visilabs Target Kurulum Kılavuzu
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)
Visilabs Target Kurulum Kılavuzu
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,
Visilabs Target Kurulum Kılavuzu
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();
Visilabs Target Kurulum Kılavuzu
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
belirleyebilmektesiniz.
de
bahsettiğmiz
gibi
size
tanımlanan
arayüz
üzerinden
Ö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");
Visilabs Target Kurulum Kılavuzu
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","");
Visilabs Target Kurulum Kılavuzu
11
Adres : Boğaziçi Üniversitesi Teknopark
Bebek İSTANBUL
Web : www.visilabs.com
e-mail : [email protected]
Tel : (0212) 356 74 20
Fax : (0212) 356 74 22
Visilabs Target Kurulum Kılavuzu
12

Download Report