Kişiselleştirilmiş ve alakalı kampanyalar oluşturmak, tekliflerimizi ürünlerimizle ilgilenen müşterilerin karşısına sunmak önemlidir. Bu blogda, kampanyalarımızda hedeflediğimiz müşterilere ilgilendikleri ürün grupları için kişiselleştirilmiş kupon kodları gösterilmesini sağlayacağız.
Bir örnekle açıklamak gerekirse; Facebook üzerinde kazaklar için oluşturduğumuz kampanyadan gelen müşterimize kazak indirim kuponu, gömlekler için oluşturduğumuz kampanyadan gelen kullanıcılara gömlek indirim kuponu göstereceğiz ve bunu sadece kampanyayı oluştururken hepimizin kullandığı UTM linklerini kullanarak yapacağız ve reklamlar ile müşteri arasında bir kişiselleştirme bağı oluşturmuş olacağız. Dijital pazarlamada artık standart pazarlama tekniklerinden ziyade iyi kurgulanmış kişiselleştirme çözümlerinin oldukça önem arz ettiğini biliyoruz. O yüzden bu yazıda ne yaptığımızı öğrenmek yerine neler yapabileceğimizin farkındalığını arttırmaya çalışalım.
Bu yazı biraz uzun ve bir o kadar da bilgilendirici olacak.
İşleyiş
- Kampanyalara ürün grubunu ve kupon kodunu tanımlayacağımız utm parametreleri ekleyeceğiz. Örn: utm_content=KAZAKLAR& utm_id=SANAOZEL20
- UTM değerlerini text alanlarında kullanabilmek için değişkenlere tanımlayacağız
- UTM değerlerini diğer sayfalarda kullanabilmek için UTM Cookie oluşturacağız (Bunun kodunu sizinle paylaşıyor olacağım)
- UTM Cookie değerlerini text alanlarında kullanabilmek için değişkenlere tanımlayacağız
- Açılış sayfasına Hello bar oluşturacağız (Bunun kodunu sizinle paylaşıyor olacağım)
- Ürün sayfasına kupon kodu bölgesi ekleyeceğiz
- Sepet sayfasına kupon kodu bölgesi ekleyeceğiz
UTM Değerlerini Değişkenlere Atama
Ben ürün grubumu ve kupon değerimi UTM_ID ve UTM_CONTENT değerlerine tanımladım o yüzden bu iki değer için değişken oluşturacağım. Şu adımları takip edin; Değişkenler > Yeni > URL > (Bileşen Türü) Sorgu
UTM Değerlerini Cookie’e Atama
Bu işlemi yapmamızdaki amaç müşteri açılış sayfasından farklı bir sayfaya ilerlediğinde utm yapısı değişeceği için farklı sayfalarda kupon kodu karşına çıkmayacak. Bizde utm değerlerimizi diğer sayfalarda da kullanabilmek için (ürün sayfası, sepet) 3 günlük bir cookie oluşturacağız. Cookie süresi müşteriye tanımak istediğiniz fırsat süresiyle doğru orantılıdır arttırıp kısaltabilirsiniz.
Aşağıdaki kodu kopyalayarak yeni bir HTML Etiketi oluşturalım
<script>
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
createCookie("utm_id", "BURAYA UTM DEGISKENI GELECEK", "BURAYA GUN GELECEK")
createCookie("utm_content", "BURAYA UTM DEGISKENI GELECEK", "BURAYA GUN GELECEK")
</script>Ve tetikleyici olarak; Sayfa Görüntüleme > Page Url > (içerir) utm_id >> olacak şekilde ayarlayalım, bunun sebebi All Page olarak ayarlasaydık müşteri her sayfa değiştirdiğinde yeni çerezler oluşturacaktı ve utm değişkenleri undefined olarak tanımlanacaktı.
UTM Cookie Değerlerini Değişkenlere Atama
Birinci adımda oluşturduğumuz gibi iki adet değişken oluşturacağız. Şu adımları takip edin; Değişkenler > Yeni > Birinci Taraf Çerezi > Çerez Adı
Test
Linkimiz ile önizleme modunu açalım oluşturduğumuz değişkenler ve çerezler çalışıyor mu kontrol edelim.
İlk oluşturduğumuz link üzerinden utm değerlerini aldığımız değişkenimiz çalışıyor.
Utm değerlerini çerezlere atadığımız etiketimizde sağlıklı bir şekilde çalışıyor.
İkinci oluşturduğumuz çerez üzerinden değer aldığımız değişkenimizde çalışıyor.
Buraya kadar her şey sorunsuz bir şekilde ilerlediyse alt yapı kurulumunu tamamladık demektir.
Açılış Sayfasına Hello Bar Oluşturma
Arka planda yapılması gereken işlemleri tamamladık, artık müşterilerin görüntüleyeceği alanlara kupon kodlarını yerleştirmek kalıyor. Bunun için ilk kodu açılış sayfasına Hello Bar olarak ekleyeceğiz ve burası önemli Hello Bar’ımızın sadece reklamdan gelen kullanıcıların açılış sayfalarında çıkmasını istediğimiz için tetikleyici olarak Sayfa görüntülenme > Page URL > (içerir) utm_id olarak yapılandıracağız.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
#bn-bar {
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-transition: all 0.5s ease;
position: fixed;
-webkit-transform: translatez(0);
width: 100%;
height: 40px;
line-height:40px;
top: -35px;
font-size:16px;
z-index: 10000;
background-color: #52ae56;
color:white;
font-family: "Helvetica Neue", "Arial", sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: -4px 4px 8px rgba(0, 0 , 0, 0.2);
-moz-box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
text-align:center;
border-radius: 0px 10px 10px 10px;
}
#hider {
border-radius: 10px;
position: fixed;
right: 0px;
top: 0px;
height:40px;
width:30px;
z-index:10001;
float:right;
background-color:black;
color: white;
background-position: 7px 5px;
background-repeat:no-repeat;
}
#hider:hover {
background-color:#fff;
cursor:pointer;
}
</style>
<script>
var autohide;
jQuery('body').prepend('<div id="bn-bar"><marquee onmouseout="this.start()" onmouseover="this.stop()" scrolldelay="100"><b>{{utm_content (product name)}} </b>ürün grubu için size özel indirim tanımlanmıştır. Kupo Kodu: {{utm_id (coupon code)}} </marquee><div id="hider">x</div></div>');
$(document) .ready(function(){
$("#hider") .click(function(){
$("#bn-bar").animate({
top: "-50"
}, "fast","linear", function(){});
})
$("#bn-bar") .mouseover(function(){clearTimeout(autohide);});
setTimeout(function(){$("#bn-bar") . animate({top: "0"}, "slow","linear", function(){});},2500);
autohide = setTimeout(function(){$("#bn-bar") .animate({top: "-30"}, "fast","linear", function(){});},100000);
})
</script>Yukarıdaki kod ile yeni bir HTML Etiketi oluşturalım ve 50. satırdaki değişken alanlarını kendi url utm değişken değelerleriniz ile değiştirmeyi unutmayın. Html css bilginiz var ise hello bar’ı kendinize göre özelleştirebilirsiniz.
Kampanya linkimiz ile Ön izleme moduna alalım.
Ürün Sayfasına Kupon Kodu Bölgesi Ekleme
Site içerisindeki alanlara müdahale etmek için Html DOM yapısına Javascript ile müdahale edeceğiz. Bu ve bir sonraki adımlar her site için farklı aksiyonlar gerektirir. Ben kendi site yapıma göre aksiyon alacağım sizde benzer işlemleri kendi siteniz için yapabilirsiniz.
Nedir Html DOM? HTML için kullanılan doküman nesne modelidir. HTML Elementlerini objeler olarak, HTML elementlerinin tüm özelliklerini, HTML elementlerine erişmek için metotları, tüm HTML elementleri için olayları tanımlar. Diğer bir deyişle HTML DOM yeni elementler eklemek, elementleri değiştirmek veya silmek için kullanılır. HTML DOM'a JavaScript ile erişim sağlayabiliriz.
Ürün sayfamda sepete ekleme butonunun hemen yanına kupon kodu ekleyeceğim. İlk olarak kod yerleştirmek istediğim alanın class yada id değerini buluyorum. Benim sepete ekle bölgem içinde barındığı class değeri aşağıdaki görselde paylaştığım gibi “woocommerce-variation-add”. İstediğim alanı bulduğuma göre dilediğim kodu oraya ekleyebilirim.
Bu kod yapısı sizde çalışmayacaktır kendi web siteniz özelinde farklı değerler alır.
<script>
var d1 = document.getElementsByClassName('woocommerce-variation-add-to-cart')[0];
d1.insertAdjacentHTML('beforeend', '<button style= "margin: 10px;" class="button">Kupon Kodu: {{cookie utm_id}}</button>');
</script>Yukarıda belirttiğim kodun anlamsal yapısı şu şekildedir
Kod yapısını oluşturduktan sonra kupon kodu kısmına daha önce oluşturduğumuz cookie utm_id değişken değerimizi tanımlıyoruz. Tetikleyici olarak Sayfa görüntülenme > Cookie utm_id > (şunu içermez) undefined olarak yapılandıracağız.
Sepet Sayfasına Kupon Kodu Bölgesi Ekleme
Son adıma nihayetinde geldik, bu adımda da bir önceki adımda olduğu gibi Html DOM yapısına müdahale edeceğiz. Yine kendi sepet sayfama göre aksiyon alacağım.
Sepet sayfamda bulunan “Kupon Kodu” input bölgesine çerezde sakladığım cookie utm_id değişkenini otomatik yazılı olarak yerleştireceğim. Bu sefer farklılık olması adına id (coupon_code) değeri üzerinden işlem yapacağım.
Bu kod yapısı sizde çalışmayacaktır kendi web siteniz özelinde farklı değerler alır.
<script>
var d2 = document.getElementById("coupon_code").value="{{cookie utm_id}}";
</script>Yukarıda belirttiğim kodun anlamsal yapısı şu şekildedir
Kod yapısını oluşturduktan sonra kupon kodu kısmına daha önce oluşturduğumuz cookie utm_id değişken değerimizi tanımlıyoruz. Tetikleyici olarak Sayfa görüntülenme > Cookie utm_id > (şunu içermez) undefined olarak yapılandıracağız.
Artık tüm işlemleri tamamladık. Baştan sona bir test yapalım.
Son Test
Sonuç
Buraya kadar gelebildiyseniz sizi tebrik ederim. Kurulumu tamamladık artık tüm kupon kodlarımızı kolaylıkla utm yapımız üzerinden oluşturabileceğiz. Unutmayın bu kurulum tek seferlikti her kampanyaya her kullanıcıya ayrı kupon ekranları sunabilirsiniz. Kişiselleştirme ve otomatizasyonun keyfini çıkarın.
