Yapışkan CTA
Yapışkan CTA, genellikle bir başlık veya alt bilgi çubuğunda sabit konumda kalan ve ziyaretçi sayfayı kaydırırken görünür kalan bir eylem çağrısıdır.
Önemli noktalar
- Yapışkan CTA sayfa yüklenince değil, kaydırma eşiği aşılınca kenara sabitlenir.
- Asıl maliyet yüksekliktir: her piksel mobilde okuma alanından düşer.
- Hero butonu ekrandan çıktıktan sonra gösterin ki ikisi çakışmasın.
- Etikette genel bir fiil değil, sonuç ve süre yazsın.
- Form, modal ve quiz adımlarında çubuğu gizleyin; çakışma engellenir.
Derinlemesine
Yapışkan CTA, CSS sticky veya fixed konumlandırmayla kurulur: bir kaydırma eşiği aşıldığında öğe normal belge akışından çıkar ve görüntü alanının üst ya da alt kenarına kilitlenir. Tarayıcı onu her kaydırma karesinde yeniden çizer; bu yüzden özenli uygulamalar çubuğu ince tutar, ağır gölge ve animasyondan kaçınır. Çubukta genelde tek bir buton ve teklifin kısa bir tekrarı bulunur; hedef adres ve izleme parametreleri sayfadaki ana CTA ile aynıdır.
Performansı iki değişken belirler: çubuğun ne zaman göründüğü ve ne kadar dikey alan kapladığı. Çok erken tetiklerseniz, henüz kimsenin geçmediği hero butonunu tekrarlar; çok geç tetiklerseniz sayfanın ortasında karar veren okuyucuyu kaçırırsınız. Asıl ödünleşim yüksekliktir, çünkü çubuğun kapladığı her piksel telefonda okuma alanından düşer ve tek satırı aşan bir çubuk kısayol değil engel gibi hissettirir. Kontrast fark edilirliği artırır, aşırısı banner körlüğü doğurur.
Uygulamada çubuk, kararın ekranın altında verildiği uzun sayfalara eklenir: fiyat karşılaştırmaları, vaka çalışmaları ve quiz hunisi açılış sayfaları. Bir Pivix scorecard açılış sayfasında çubuk değerlendirmeyi başlatma eylemini taşır; örnek sorulardan ikna olan okuyucu hero'ya geri kaydırmadan başlayabilir. Etiket, genel bir fiili tekrarlamak yerine sonucu ve süreyi söylemelidir; ziyaretçi quiz adımlarına girdiğinde çubuk kendini gizlemelidir. Hedef adresi sayfa içi butonla aynı tutun ama izleme kimliğini ayırın; yoksa iki giriş noktasını raporda birbirinden ayırmak mümkün olmaz.
Yapışkan çubuk en az kısa sayfalarda işe yarar; orada zaten orijinal CTA görüntü alanından çıkmaz. Sayfada başka sabit öğeler varsa doğrudan zarar verir: yapışkan başlık, sohbet butonu ve tarayıcının kendi araç çubukları telefonda geriye dar bir içerik şeridi bırakır. Sabitlenmiş çubuk DOM sırasında ana içerikten önce geldiğinde ekran okuyucu ve klavye kullanıcıları da zorlanır. Sayfa boyunca tek net bir eylem zaten görünürse çubuk erişim değil gürültü ekler.
Pratikte örnek
Nasıl ölçülür
Yapışkan çubuktaki tıklamaları ayrı bir bağlantı kimliğiyle hero butonundan bağımsız izleyin ve her kaynağın toplam başlangıçlardaki payını karşılaştırın. Önemli olan artımlı etkidir: çubuk bulunan sayfalardaki dönüşümler ile benzer ama çubuksuz sayfalardakiler. Çubuk tıklamaları artarken toplam başlangıçlar sabit kalıyorsa, çubuk yalnızca tıklamaları sayfa içi butondan taşıyordur.
Dönüşümün yanında kaydırma derinliğini ve mobil çıkış oranını izleyin. Ekran alanı yiyen bir çubuk, dönüşümde görünmeden çok önce telefonlarda medyan kaydırma derinliğinin kısalması olarak belirir. Oturum kayıtları, toplu metriklerin sakladığı çakışmaları gösterir; örneğin kapanan bir form alanı. Her sayıyı cihaza göre ayırarak okuyun, çünkü telefon ve masaüstü burada belirgin biçimde farklıdır.
Sık yapılan hatalar
En sık hata, sabit öğeleri toplam yüksekliklerini hesaplamadan üst üste yığmaktır. Yapışkan başlık, CTA çubuğu ve çerez bildirimi birlikte telefon ekranının yarısını kaplar; ziyaretçi anahtar deliğinden okur. Yayına almadan önce küçük bir görüntü alanında toplam sabit yüksekliği ölçün, CTA çubuğunu tek satır metinle sınırlayın ve seçim kaydedildikten sonra çerez katmanını kalıcı olarak kaldırın.
İkinci hata, çubuğu bedava alan sanıp başlık, fiyat, geri sayım ve iki butonla doldurmaktır. Bölünmüş dikkat, çubuk daha çok görülse bile tıklama oranını düşürür. Tek eylem bırakın; ikinci bir seçenek gerçekten gerekiyorsa onu rakip bir buton değil metin bağlantısı yapın. Çubuk hiçbir zaman form alanlarını veya ekran klavyesinin bulunduğu bölgeyi kapatmamalıdır.
Sıkça sorulan sorular
Yapışkan CTA ile yüzen CTA arasındaki fark nedir?
Yapışkan CTA, genellikle tam genişlikte bir başlık veya alt bilgi çubuğu olarak düzenin bir kenarına sabitlenir ve sayfa kenarları içinde kalır. Yüzen CTA ise içeriğin üzerinde kompakt bir buton olarak, çoğunlukla bir köşede süzülür ve sayfayı kaplar.
Bir açılış sayfasına yapışkan CTA'yı ne zaman eklemeliyim?
Ana CTA'nın görüş alanından kayacağı daha uzun sayfalarda kullanın. Eylemin her zaman göründüğü kısa sayfalarda yapışkan çubuk fazla fayda sağlamadan karmaşa yaratır.
Yapışkan CTA sayfada ne zaman görünmeli?
Ziyaretçi ana hero butonunu geçtikten sonra; böylece ikisi aynı ekranda yarışmaz. Eşiği hero bölümünün alt kenarına bağlamak sabit bir piksel değerinden daha güvenilirdir, çünkü hero yüksekliği görüntü alanına ve çeviri metnine göre değişir. Sayfa yüklenirken göstermek, sayfaya aynı anda iki özdeş buton koymak demektir.
Yapışkan CTA mı yüzen CTA mı daha çok dönüşüm getirir?
Hiçbiri baştan üstün değildir; farklı kısıtları çözerler. Yapışkan çubuk tam genişliktedir ve kısa bir değer cümlesi taşıyabilir, bu yüzden tek ve net bir eyleme uyar. Yüzen buton bir köşeyi kaplar; eylem ikincilse veya sayfada zaten geniş bir sabit öğe varsa daha uygundur. İkisini birlikte kullanmak çoğu zaman kazandırdığından fazlasını götürür.
Yapışkan CTA mobil kullanılabilirliğe zarar verir mi?
Verebilir; belirleyici etken yüksekliktir. Rahat bir dokunma alanı olan tek satır kabul edilebilir, daha fazlası okuma alanını yer ve bir alan odaklandığında ekran klavyesini kapatabilir. Giriş alanı odaktayken veya modal açıkken çubuğu gizleyin ve testi temiz bir emülatörde değil, tarayıcının kendi araç çubukları görünürken yapın.
Yapışkan çubuğun metni hero butonuyla aynı mı olmalı?
Vaat aynı olmalı, kelimeler değil. Hero tam çerçeveyi taşır; çubuk sonucu birkaç kelimeyle tekrarlar, örneğin değerlendirmenin adı ve süresi. Güveni yıkan şey, hero'nun hiç bahsetmediği bir şeyi öneren ya da okuyucunun beklediğinden farklı bir hedefe götüren bir çubuktur.
Yapışkan çubuğun alt bilgiyi kapatmasını nasıl önlerim?
Sayfaya çubuk yüksekliği kadar alt iç boşluk verin veya alt bilgi görüntü alanına girdiğinde intersection observer ile sabitlemeyi kaldırın. İkisi de yasal bağlantıları, iletişim bilgilerini ve gizlilik bildirimini erişilebilir tutar. Betik kullanılamıyorsa en basit çözüm, çubuğu belge sonunda normal bir öğe olarak konumlandırmaktır.
Yapışkan CTA sayfa hızını veya düzen kaymasını etkiler mi?
Risk yükleme süresinde değil, düzen kaymasındadır. Render sonrası eklenen bir çubuk içeriği aşağı iter ve kümülatif düzen kayması olarak sayılır; yerini ilk düzende ayırın ya da hiçbir şeyi itmeyen bir katman olarak açın. Her kaydırma karesinde yeniden çizilen gölge yüklü bir çubuk, düşük donanımlı telefonlarda takılma da yaratır.