Anasayfa » Duyarlı reklamların yükseklik boyutu nasıl sınırlandırılır?

Duyarlı reklamların yükseklik boyutu nasıl sınırlandırılır?

Teknoklik Editör
Duyarlı reklamların yükseklik boyutu nasıl sınırlandırılır?

Google Adsense içinde oluşturup sitemize yerleştirdiğimiz reklam kodları bazen istediğimiz gibi sonuçlar vermeyebilir, tasarımı bozabilir.

Duyarlı reklam kodumuzun ihtiyacınız olan her şeyi yapmadığını fark ederseniz, reklam kodunuzu duyarlı sitenizin gereksinimlerini daha iyi karşılayacak şekilde değiştirebilirsiniz. Bu yazıdaki örnekler bu değişiklikleri doğru şekilde nasıl yapacağınızı gösterir.

Bu yazıda açıklanan örnekler, Google sitesinden alınmış olup, AdSense reklam kodunda yapılan kabul edilebilir değişikliklerdir. Duyarlı reklam kodunuzu bu onaylanmış yöntemlerle değiştirerek AdSense Program politikalarını ihlal etmemiş olursunuz. Detaylı bilgi için…

Bu örnek, mobil, tablet ve masaüstü gibi üç farklı ekran genişliği aralığı için belirli reklam birimi boyutlarını ayarlamak amacıyla duyarlı kodunuzu nasıl değiştireceğinizi gösterir. Bu örneği takip etmek için CSS medya sorguları veya AdSense reklam kodunu değiştirme konusunda daha önce herhangi bir deneyiminizin olması gerekmez.

İstenilen sonucu vermeyen duyarlı reklam örneği

Duyarlı reklamların yükseklik boyutu nasıl sınırlandırılır?
Resim-1

Görselde (resim-1) göründüğü gibi, Logonun yanındaki Google Adsense reklamı normalinden daha büyük görüntüleniyor ve sitenin tasarımı bozuyor. Bu yazımızda, bu duyarlı reklamın boyutlarını değiştirerek reklamların istediğimiz gibi (resim-2) gözükmesini sağlayacağız. Haydi Başlayalım…

Her ekran için tam olarak aşağıdaki reklam birimi boyutlarını ayarlayan bazı değiştirilmiş duyarlı reklam kodlarını burada bulabilirsiniz:

  • 500 piksele kadar ekran genişlikleri için: 320×100 boyutunda bir reklam birimi.
  • 500 piksel ile 799 piksel arasındaki ekran genişlikleri için: 468×60 reklam birimi.
  • 800 piksel ve daha geniş ekran genişlikleri için: 728×90 reklam birimi.

Google Adsense Kodumuz

<style>
.ornek_duyarli_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .ornek_duyarli_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ornek_duyarli_1 { width: 728px; height: 90px; } }
</style>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456” crossorigin=”anonymous”></script>
<!– ornek_duyarli_1 –>
<ins class=”adsbygoogle ornek_duyarli_1
     style=”display:block”
     data-ad-client=”ca-pub-1234567890123456
     data-ad-slot=”8XXXXX1“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

İlginizi Çekebilir:  Twitter’ın Pek Bilinmeyen Özellikleri

Bu örnek kodu kendi sitenize uyarlamak için:

Yukardaki örnek kod üzerinde bazı değişiklikler yaparak kendimize göre uyarlayacağız.

1. Öncelikle, eğer daha önceden oluşturmadıysak, AdSense hesabınızda bir görüntülü reklam birimi oluşturun ve “Reklam boyutu” bölümünde Duyarlı’yı seçili bıraktığınızdan emin olun.

2. Duyarlı reklam kodunuzdaki aşağıdaki bilgileri bir yere not edin, daha sonra bize lazım olacak:

  • Yayıncı kimliğiniz (data-ad-client), örneğin: “ca-pub-1234567890123456
  • Reklam biriminizin kimliği (data-ad-slot), örneğin: “1234567890
  • Duyarlı reklama verdiğiniz ad, örneğin: “Header-Reklam

3. Şimdi değişikliklere başlayalım.

  • Örnek kodda, ornek_duyarli_1 gördüğünüz her yere benzersiz bir adla değiştirin yada Adsense’de duyarlı reklamlara verdiğiniz adla değiştirin.

Koyacağınız adı yalnızca İngilizce harfler (A-Z), rakamlar ve alt çizgiler içermeli ve ilk karakter İngilizce bir harf olmalıdır.

Bu örnek kodu her uyarladığınızda farklı bir benzersiz ad kullanmanız gerekir.

  • “ca-pub-1234567890123456” yı kendi yayıncı kimliğinizle (data-ad-slot) değiştirin.”ca-pub-1234567890123456‘yı kendi yayıncı kimliğinizle (data-ad-slot) değiştirin.
  • “8XXXXX1” i kendi reklam biriminizin kimliğiyle (data-ad-slot) değiştirin.

4. Reklamın her ekran için almasını istediğiniz boyutlara karar verin:

  • Örnek koddaki mevcut reklam birimi boyutlarından memnunsanız herhangi bir ek değişiklik yapmanıza gerek yoktur.
  • Her ekran için farklı reklam boyutları ayarlamak istiyorsanız örnek kodda:
    • 500 piksele kadar ekran genişlikleri için 320 piksel ve 100 piksel yerine, kullanmak istediğiniz reklam biriminin genişliği ve yüksekliğini girin.
    • 500 piksel ile 799 piksel arasındaki ekran genişlikleri için 468 piksel ve 60 pikseli, kullanmak istediğiniz reklam biriminin genişlik ve yüksekliğiyle değiştirin.
    • 800 piksel ve daha geniş ekran genişlikleri için 728 piksel ve 90 piksel değerlerini, kullanmak istediğiniz reklam biriminin genişlik ve yüksekliğiyle değiştirin.

5. Değiştirilen reklam kodunuzu kopyalayıp reklamların görünmesini istediğiniz sayfanın HTML kaynak koduna yapıştırın.

İlginizi Çekebilir:  WhatsApp'ta Bir Fotoğrafı Nasıl Sticker Yaparsınız?

6. Artık reklamımız istediğimiz boyutlarda gözükecektir ve tasarımda herhangi bir sorun çıkarmayacaktır. (resim-2)

Hepsi bu kadar…

NOT: Not: Reklam kodunuzu yerleştirdikten sonra, duyarlı davranışın doğru çalıştığından emin olmak için reklamlarınızı farklı cihaz ve ekranlarda test etmenizi öneririz.

Bunlar da hoşunuza gidebilir

Yorum Yap

Teknoklik Logo
 

Editör'ün Seçtikleri

Faydalı Makaleler

© Teknoklik.net ‘in tüm hakları saklıdır.

 
 

 

 

Bu web sitesi deneyiminizi geliştirmek için çerezleri kullanır. Bu konuda sorun yaşamadığınızı varsayacağız, ancak isterseniz vazgeçebilirsiniz. Kabul Et Devamını Oku