Merhaba,
Bu yazıda Google Tag Manager ile sitemize nasıl “exit intent pop-up” ekleyebiliriz konusunu ele alacağız.
Dilerseniz ilk olarak exit intent pop-up kavramından bahsedelim.
Exit intent pop-up, bir kullanıcı sayfamızdan çıkmak üzereyken bunu javascript ile algılayıp kullanıcıya promosyon, indirim, kampanya göstermek için kullanılan bir yöntem.
Örnek bir senaryo üzerinden ilerleyelim,
Ayakkabı almak isteyen bir kullanıcı, e-ticaret sitemizde x markanın ürünlerine baktı, birçok sayfada dolaştı ve tam sitemizden çıkmak üzereyken bu kullanıcıya “x markanın ürünlerinde sepette %5 indirim” şeklinde bir pop-up gösterdik. Bu hamle kullanıcının ilgisini çekebilir, hatta süreci alışverişe kadar götürebilir.
Bu uygulamayı gerçekleştirmek için, kullanıcıların mouse hareketlerini incelememiz gerekiyor, eğer cursor sayfanın üst bölümlerine geldiyse kullanıcı çıkmak üzere olabilir, bu noktada bizde pop-up gösterebiliriz demektir.
Eğer bu kurguyu erdalbilisim blog için düşünecek olursak, kullanıcı mouse’u aşağıda kırmızı ile gösterilen alana getirirse bir pop-up göstermek istiyoruz.
Bu noktada bir miktar yazılım bilgisine ihtiyacımız olacak, fakat bu yazıda kodları sizlerle paylaşacağım için, kopyalayıp kendi sitenizde kullanabilirsiniz.
Adım adım ilerleyelim.
1 – Javascript ile kullanıcının mouse hareketlerini takip edelim
Yukarıda gördüğünüz kod bloğu, kullanıcının mouse pozisyonu y ekseninde yani dikey olarak 30 değerinden düşükse “Hello World !” şeklinde bir alert verecektir.
Öncelikle bu “30” değerinin nereden geldiğini açıklayalım.
Eğer herhangi bir sitede developer tool’a girip console sekmesine aşağıdaki kodları
yazarsanız, mouse sayfada her hareket ettirildiğinde konsola mouse pozisyonunun x ve y değerleri yazılacaktır.
Hemen test edelim ve konsol üzerinde sonuçlarına bakalım.
Konsolda mouse un x ve y ekseninin değerlerini görüyoruz, burada dikkat etmemiz gereken nokta konsola yazılan Y değeri sayfanın yukarı bölgelerine çıktıkça düşüyor olması, yani kullanıcı ne kadar yukarı yaklaşırsa değer o kadar düşecektir. Yukarıdaki örnekte “30” değerini vermemizin sebebi bu.
Gelelim bir sonraki noktaya,
2 – Bir pop-up oluşturalım
Bunun için kullanabileceğiniz bir çok web sitesi var, ücretsiz bir şekilde önceden tasarlanmış pop-uplar oluşturabilirsiniz. Bu yazıya mahsus ben sıfırdan oluşturacağım.
Yukarıdaki kod bloğunda bir kutu oluşturup, içerisine örnek bir resim ekledim. Resme tıklandığında kendi sayfamıza gidecek şekilde link verdim, ayrıca birde kapatma butonu ekleyip, kullanıcının pop-up’ı kapatabilmesini sağladım.
Pop-up aşağıdaki şekilde gözükmektedir
Bu iki adımı başarıyla tamamladıysak son bir işlem daha kaldı.
3 – Oluşturduğumuz kodları GTM üzerinden eklemek
Bunun için yapmamız gereken sitemize ekli olan gtm hesabına girip bir “custom html” etiketi oluşturmak, bunun hangi sayfalarda çalışacağını trigger ile özelleştirmek ve son olarak isimlendirip kaydetmek.
Ben bu örnek için pop-up kodunun tüm sayfalarda çalışmasını istedim, böylece hangi sayfada olursa olsun kullanıcı çıkmak üzereyken bir mesaj gösterebilirim.
Değişiklikleri kaydediyoruz ve artık herşey hazır, sizde verdiğim kodlardan sadece resim adresini ve resmin yönlendirdiği adresi değiştirip, aynı şekilde sitenizde kullanabilirsiniz.
Kodun son halini görebilmeniz bir drive dosyası içerisinde sizinle paylaşacağım.
https://docs.google.com/document/d/1YDt2VeZ0EKpbEOS3RbNxSt3jYM3djMP7KpbTdfaAA50/edit?usp=sharing
Bir sonraki yazılarda tekrar görüşmek üzere.
