Responsive uyumlu Google Adsense Reklamları

Google AdSense reklamlarınızı nasıl JavaScript ile uyumlu yapacağınızı göstermeye çalışalım.

Yazılacak Javascript Kodu ziyaretçinin tarayıcı boyutunu tespit eder ve uygun olarak AdSense reklamlarını belirlenen alana yerleştirir.

Google AdSense resmi olarak Responsive "Uyumlu" Tasarım'ları onayladı ki bu demek oluyor ki Google reklamları kullanıcının cihazına göre hareket edecek.

Mesela eğer bir ziyaretçi sitenizi masaüstünden ziyaret ediyorsa 728*90 boyutundaki reklamları seçebilirsiniz ama eğer başka bir ziyaretçi sayfanızı telefondan ziyaret ediyorsa 480*60 boyutlarında daha küçük bir reklam kullanabilirsiniz.

AdSense kodu ziyaret eden kişinin ekran boyutunu tespit eder ve boş alana uyacak reklamı bulup yerleştirir.

Google AdSense reklamlarını hem eş zamanlı hem de eş zamanlı olmadan da kulanabilirsiniz.

İkinicisi sayfalarınızın daha etkili olmasını ve daha hızlı yüklenmesini sağladığından daha çok tavsiye edilen bir metoddur.

AdSense panelinizi açın ve reklamlarım ALTINDA "Create nem ad unit"e tıklatın. Reklam ve boyutunu "Responsive Ad Unit" olarak ayarlayın ve kaydet kodu getir diyelim.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});

AdSense mevcut genişliği hesaplayarak buraya sığacak reklamı sunar. En iyi performans gösteren reklamlar dikdörtgenler ve dik uzun olanlar olduğundan bu en iyi yaklaşım olmayabilir.

Ancak reklam birimini her zaman dikdörtgen ve dik uzun reklamları sunması için zorlayan bir seçenek var. Koddaki data-ad-format kısmındaki "auto"yu "rectangle"a çevirin ve her zaman dikdörtgen formatları sunsun. Benzer olarak koddaki data-ad-format kısmını "vertical" yaparsanız her zaman 120*600 ya da 160*600 boyutundaki reklamları sunacaktır.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Siz ayarlarınızı ne kadar değiştirseniz de Google AdSense algoritmaları yine de hangi reklamı suncağına karar verir. Mesela siz dikdörtgen istersiniz ama orta boylu ya da geniş bir dikdörtgen alabilirsiniz.

AdSense'i belirli bir boyuttaki reklamları uyumu kalarak- sunması için zorlayacaksanız özel-boyutlu reklamları kullanmayı tercih edebilirsiniz.

Bu reklamların boyutları ekrana göre belirlenir ama yayımcı daha fazla kontrole sahiptir.

<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');
 
    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers 
    } else {
        adWidth = ad.offsetWidth; // for old IE 
    }
 
    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXX";
 
    /* Replace 1234567890 with the AdSense Ad Slot ID */ 
    google_ad_slot = "1234567890";
  
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */
 
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + google_ad_size[0] + 'px;height:' 
      + google_ad_size[1] + 'px" data-ad-client="' 
      + google_ad_client + '" data-ad-slot="' 
      + google_ad_slot + '"></ins>'
    );
  
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

AdSense panelinize gidin ve ya yeni bir birim oluşturun ya da olanlardan birini kullanın 15 ve 18inci sıralara reklam biriminizin ID'sini ve ayrıca AdSense yayımcı ID'nizi de buralara yapıştırınız.

Sonra yukarıdaki kodları web sayfanızın herhangi bir yerine yapıştırın ve gerisini AdSense'e bırakın. Eğer çoklu uyumlu AdSense reklam birimlerini aynı web sayfasına eklemek istiyorsanız aynı kodları kullanın ama DIV ID'si her sırada #1 & #6 şeklinde artacak ve bunlar google-reklam1,google-reklam2 diye devam edecek.

Sonra yukarıdaki kodları web sayfanızın herhangi bir yerine yapıştırın ve gerisini AdSense'e bırakın. Eğer çoklu uyumlu AdSense reklam birimlerini aynı web sayfasına eklemek istiyorsanız aynı kodları kullanın ama DIV ID'si her sırada #1 & #6 şeklinde artacak ve bunlar google-reklam1,google-reklam2 diye devam edecek.