Reklam birimleri

Duyarlı reklam kodunuzu nasıl değiştirebilirsiniz?

Sağladığımız duyarlı reklam kodu tüm ihtiyaçlarınızı karşılamıyorsa, bu kodu duyarlı sitenizin gereksinimlerini daha iyi karşılayacak şekilde değiştirebilirsiniz. Aşağıdaki örneklerde bu değişiklikleri doğru şekilde nasıl yapacağınız gösterilmiştir:

Önemli:

Not: Bu makalede anlatılan örnekler AdSense reklam kodunda gerçekleştirilmesi kabul edilebilir değişikliklerdir. Duyarlı reklam kodunuzu buradaki gibi onaylanan şekillerde değiştirdiğinizde AdSense Program politikalarını ihlal etmiş olmazsınız.

Ekran genişliği için kesin reklam birimi boyutu örneği

Bu örnekte, üç farklı ekran genişliği (mobil, tablet ve masaüstü) için spesifik reklam birimi boyutları ayarlamak üzere duyarlı kodunuzu nasıl değiştirebileceğiniz gösterilmiştir. Bu örneği uygulamak için CSS medya sorguları veya AdSense reklam kodu değiştirme konusunda deneyiminiz olması gerekmez.

Aşağıda, belirtilen ekran genişliği için kesin reklam birimi boyutlarını ayarlayan bazı değiştirilmiş duyarlı reklam kodları verilmiştir:

  • 500 piksel boyuta kadar ekran genişlikleri için: 320x100 reklam birimi.
  • 500 piksel ile 799 piksel arası ekran genişlikleri için: 468x60 reklam birimi.
  • 800 piksel ve daha büyük ekran genişlikleri için: 728x90 reklam birimi.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bu örnek kodu kendi sitenize uyarlamak için:

  1. AdSense hesabınızda bir görüntülü reklam birimi oluşturun ve "Reklam boyutu" bölümünde Duyarlı boyutunu seçili olarak bıraktığınızdan emin olun. Duyarlı reklam kodunuzdaki şu bilgileri not edin:
    • Yayıncı kimliğiniz, örneğin, ca-pub-1234567891234567
    • Reklam biriminizin kimliği (data-ad-slot), örneğin 1234567890.
  2. Örnek kodda:
    • Tüm example_responsive_1 örneklerini benzersiz bir adla (ör. Home_Page, front_page_123 vb.) değiştirin.
      Notlar:
      • Benzersiz ad yalnızca İngilizce harfler (A-Z), sayılar ve alt çizgiden oluşmalı ve ilk karakteri bir İngilizce harf olmalıdır.
      • Bu örnek kodu uyarladığınız her zaman farklı bir benzersiz ad kullanmanız gerekir.
    • ca-pub-XXXXXXX11XXX9 yerine kendi yayıncı kimliğinizi yazın.
    • 8XXXXX1 yerine kendi reklam biriminizin kimliğini yazın.
  3. Reklam biriminizin, her bir ekran genişliği için almasını istediğiniz boyutlara karar verin:
    • Örnek koddaki reklam birimi boyutlarından memnunsanız başka değişiklik yapmanıza gerek yoktur.
    • Her bir ekran genişliği için farklı reklam birimi boyutları belirlemek istiyorsanız, örnek kodda:
      • 320px ve 100px değerlerini, 500 piksel boyuta kadar olan ekran genişlikleri için kullanmak istediğiniz reklam birimi genişliği ve yüksekliği değerleri ile değiştirin.
      • 468px ve 60px değerlerini, 500 piksel ile 799 piksel arası ekran genişlikleri için kullanmak istediğiniz reklam birimi genişliği ve yüksekliği değerleri ile değiştirin.
      • 728px ve 90px değerlerini, 800 piksel ve daha büyük ekran genişlikleri için kullanmak istediğiniz reklam birimi genişliği ve yüksekliği değerleriyle değiştirin.
  4. Değiştirdiğiniz reklam kodunu kopyalayıp reklamlarınızın gösterilmesini istediğiniz sayfanın HTML kaynak koduna yapıştırın.
    Not: Reklam kodunu yerleştirdikten sonra, duyarlılık işlevinin doğru çalıştığından emin olmak için reklamları farklı cihazlarda ve ekranlarda test etmenizi öneririz.

Gelişmiş duyarlı reklam kodu özelliklerine örnekler

Duyarlı reklam kodumuz tüm ihtiyaçlarınızı karşılamıyorsa reklam biriminiz için kesin bir boyut belirlemek amacıyla reklam kodunuzu CSS aracılığıyla değiştirebilirsiniz.

Not: Reklam kodunuzda değişiklik yapma konusunda kendinize güvenmiyorsanız bu gelişmiş özellikleri kullanmanızı önermiyoruz.

Sabit yükseklik ve genişletilebilen genişlik belirleme

Duyarlı reklam kodunda değişiklik yaparak CSS aracılığıyla reklam birimi için genişletilebilir bir genişlik ve sabit bir yükseklik belirleyebilirsiniz. Bu değişiklikleri nasıl yapacağınız aşağıdaki örnekte gösterilmiştir:

Sabit yükseklikle genişletilebilen genişlik örneği
Bu örnekte, sabit yüksekliği 90 piksel değerine, genişlik değişkenini ise minimum 400 piksel ile maksimum 970 piksel aralığına ayarlamak üzere duyarlı reklam kodunu nasıl değiştirebileceğiniz gösterilmektedir.
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Her ekran genişliği için kesin bir boyut belirleme

Duyarlı reklam kodunda değişiklik yaparak, CSS aracılığıyla reklam birimi için kesin bir boyut belirleyebilirsiniz. Bu değişiklikleri nasıl yapacağınız aşağıdaki örnekte gösterilmiştir:

Ekran genişliği için kesin boyut örneği
Cihaza göre duyarlı siteniz için en uygun ve kesin reklam birimi boyutlarını biliyorsanız, duyarlı reklam biriminin boyutunu belirlemek için CSS3 medya sorgularını kullanabilirsiniz. Aşağıdaki örnekte, CSS3 medya sorgularını kullanmak üzere reklam kodunu nasıl değiştireceğiniz gösterilmiştir:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media kuralları bir CSS3 söz dizimidir ve tüm modern tarayıcılarda desteklenir. Internet Explorer 7 veya önceki sürümleri gibi daha eski tarayıcıları desteklemek istiyorsanız öncelikle varsayılan bir boyutunuz olmasını öneririz. Bu sayede, medya sorguları desteklenmese bile reklam görüntülenir. Harici stil sayfalarında CSS aracılığıyla reklam kodu boyutunun ayarlanması resmi olarak desteklenmemektedir.

Bir reklam birimini gizleme

Bir reklamı belirli durumlarda, özellikle küçük mobil cihazlarda göstermek istemeyebilirsiniz. Bir reklam birimini gizlemek istiyorsanız, CSS medya sorguları içeren bir parametre ayarlayarak hiçbir reklam isteğinde bulunulmamasını ve reklam gösterilmemesini sağlayabilirsiniz. Bu değişiklikleri nasıl yapacağınız aşağıdaki örnekte açıklanmıştır:

Reklamları belirli ekran boyutları için gizlemeye ilişkin örnek
Yalnızca belirli ekran boyutları için reklam göstermek istiyorsanız bunun için CSS kullanabilirsiniz. Aşağıdaki örnekte, reklamları belirli ekran boyutları için gizlemek amacıyla CSS3 medya sorguları kullanmak üzere reklam kodunuzu nasıl değiştirebileceğiniz gösterilmektedir:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Bu örnekte, 400 pikselin altındaki ekran genişliklerinde reklam gösterilmez.

Böyle bir esneklik sağlanmış olsa da reklam yerleşimi politikalarına her zaman uymaya lütfen dikkat edin. Program politikalarının, kodda yalnızca sınırlı değişiklikler yapılmasına izin verdiğini unutmayın.
Bu size yardımcı oldu mu?
Bunu nasıl iyileştirebiliriz?