Üçüncü Parti Araca Gerek Duymadan, JavaScript ile Sadece Evet/Hayır Tipi Anket Oluşturmanın Pratik Yolu

Bir web sitesi sahibi olarak, ziyaretçilerinizle sürekli bir etkileşim kurma arayışında olmanız doğaldır. Bu etkileşim, hem sitenizin dinamizmini artırır hem de kullanıcı etkileşimi verileri toplayarak içeriğinizi ve stratejinizi geliştirmenize yardımcı olur. Ancak bu etkileşimi sağlarken, özellikle Google AdSense politikaları çerçevesinde, sitenizin performansını ve kullanıcı deneyimini olumsuz etkileyecek faktörlerden kaçınmak kritik öneme sahiptir. İşte tam da bu noktada, harici bir hizmete veya karmaşık bir eklentiye ihtiyaç duymadan, yalnızca HTML, CSS ve JavaScript kullanarak basit bir evet/hayır anketi oluşturma yöntemi devreye giriyor. Bu makalede, bu pratik yaklaşımı AdSense uyumluluğu ve web sitesi optimizasyonu göz önünde bulundurularak detaylıca ele alacağız.

Neden Kendi JavaScript Anketinizi Oluşturmalısınız?

Günümüzde birçok web sitesi, anket veya geri bildirim formları için üçüncü taraf eklentilere veya API'lere bağımlı durumdadır. Bu çözümler genellikle kullanışlı olsa da, beraberinde bazı potansiyel dezavantajları da getirir:
1. Performans Yükü: Her ek üçüncü taraf komut dosyası, sitenizin yüklenme süresine ve genel performansına ek bir yük bindirir. Bu durum, özellikle mobil cihaz kullanıcıları için kötü bir deneyime yol açabilir ve dolaylı olarak SEO sıralamanızı ve AdSense gelirlerinizi etkileyebilir.
2. Gizlilik ve Güvenlik: Üçüncü taraf hizmetler, sitenize entegre edildiğinde veri gizliliği konusunda yeni endişeler doğurabilir. Kendi çözümünüzü oluşturarak, toplanan verilerin kontrolünü tamamen elinizde tutarsınız.
3. AdSense Uyumluluğu: Google AdSense, reklamların yerleşimini ve kullanıcı deneyimini oldukça ciddiye alır. Üçüncü taraf betikler bazen reklam yerleşimleriyle çakışabilir, sitenin düzenini bozabilir veya istenmeyen pop-up'lara neden olabilir. Kendi betiğinizle, anketinizin reklam alanlarına müdahale etmediğinden ve kullanıcıyı rahatsız etmediğinden emin olabilirsiniz. Bu, AdSense uyumluluğu açısından büyük bir avantajdır.
4. Esneklik ve Özelleştirme: Kendi çözümünüzü tasarladığınızda, anketinizin sitenizin genel tasarımına ve marka kimliğine tam olarak uymasını sağlayabilirsiniz. Renkler, yazı tipleri, düğme stilleri gibi her detay üzerinde tam kontrole sahip olursunuz.
5. Gereksiz Özelliklerden Kaçınma: Üçüncü taraf anket araçları genellikle karmaşık özellik setleriyle gelir. Basit bir evet/hayır anketi için bu özelliklerin çoğu gereksizdir ve sadece siteye ekstra kod yükü bindirir. Kendi basit çözümünüzle sadece ihtiyacınız olan işlevselliği eklersiniz.
Bu nedenlerle, basit bir "Basit Anket Oluşturucu JS İle" yaklaşımı benimsemek, sitenizin sağlığı ve sürdürülebilirliği için akıllıca bir tercih olacaktır.

Temel Bileşenler: HTML, CSS ve JavaScript

Üçüncü taraf bir araca ihtiyaç duymadan kendi anketinizi oluşturmak için yalnızca web'in temel yapı taşlarına ihtiyacınız olacak:

HTML Yapısı: Anketin İskeleti

Anketinizin temel yapısını HTML ile oluşturacaksınız. Bu, kullanıcıya sorulacak soruyu, "Evet" ve "Hayır" seçenekleri için iki ayrı düğmeyi ve anketin mevcut durumunu veya sonuçlarını gösterecek bir alanı içerir. Örneğin, `

` etiketi ile soruyu, `` etiketleri ile cevap seçeneklerini ve `

` veya `` gibi bir etiketle de sonuç mesajını tutabilirsiniz. Her bir elemente, JavaScript ile kolayca erişebilmek için benzersiz `id` değerleri atamak iyi bir uygulamadır. Bu sade yapı, anketinize minimum kaynak tüketimiyle hayat vermenin ilk adımıdır.

CSS ile Görselleştirme: Estetik ve Kullanıcı Dostu Tasarım

HTML ile iskeletini oluşturduğunuz anketin görsel çekiciliğini ve UX iyileştirmesini CSS ile sağlayacaksınız. Anketin sitenizin mevcut tasarımına kusursuz bir şekilde entegre olması için, düğmelerin renklerini, boyutlarını, yazı tiplerini ve boşluklarını ayarlayabilirsiniz. Responsive tasarım prensiplerini uygulayarak, anketinizin mobil cihazlarda da harika görünmesini ve kullanılabilir olmasını sağlamak önemlidir. Reklamlarınızın bulunduğu alanlara çok yakın konumlandırılmamasına veya reklamları kapamasına özellikle dikkat etmek, AdSense uyumluluğu için kritik bir detaydır. İyi tasarlanmış bir anket, kullanıcı deneyimini zenginleştirirken, AdSense politikalarına uygunluğunu da korur.

JavaScript ile Dinamik İşlevsellik: Etkileşim ve Veri Toplama

Anketinizin kalbi, kullanıcının etkileşimini yönetecek olan JavaScript kodunuzdur. Kod blokları veya uzun diziler vermeden, bu süreci şu şekilde açıklayabiliriz:
1. Düğme Olay Dinleyicileri: JavaScript, "Evet" veya "Hayır" düğmelerine yapılan tıklamaları algılar. Her düğmeye özel bir olay dinleyici (`addEventListener`) eklenir.
2. Seçimi Kaydetme: Kullanıcı bir düğmeye tıkladığında, ilgili seçim (Evet veya Hayır) bir değişkende veya daha gelişmiş olarak tarayıcının yerel depolama (`localStorage`) alanında saklanır. Bu, kullanıcının aynı ankete tekrar oy vermesini engellemek için önemlidir ve iyi bir veri toplama stratejisinin temelini oluşturur.
3. Sonuçları Gösterme: Kullanıcı oy kullandıktan sonra, anketin HTML yapısındaki sonuç alanına, "Oyunuz kaydedildi. Teşekkürler!" veya "Şimdiye kadar X kişi Evet, Y kişi Hayır dedi." gibi bir mesajı dinamik olarak yerleştirebilirsiniz. Bu, kullanıcının katılımının fark edildiğini hissetmesini sağlar.
4. Tekrar Oy Kullanımını Engelleme: `localStorage` kullanarak, kullanıcının tarayıcısında anketin daha önce yanıtlandığına dair bir işaret bırakabilirsiniz. Sayfa yeniden yüklense bile, bu işaret sayesinde kullanıcıya anketin daha önce yanıtlandığını bildirebilir ve yeni bir oy kullanmasını engelleyebilirsiniz. Bu, hem veri bütünlüğü hem de kullanıcı deneyimi açısından önemlidir.
Bu basit işlevselliği, sitenizin `head` veya `body` etiketinin sonuna ekleyeceğiniz küçük bir `