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 ihtiyaçlarını daha iyi karşılayacak şekilde değiştirebilirsiniz. Bu makaledeki örnekler, değişiklikleri doğru bir şekilde nasıl yapabileceğinizi gösterir.

Başlamadan önce:

• CSS medya sorguları veya reklam kodu değiştirme konusunda deneyiminiz yoksa ekran genişliği için kesin reklam birimi boyutu örneği ile başlamanızı öneririz.
• CSS medya sorgularına ve reklam kodu değiştirme konusuna aşinaysanız doğrudan gelişmiş duyarlı reklam kodu özellikleriyle ilgili örnekler bölümüne ilerleyebilirsiniz.

Not: Bu makalede anlatılan örnekler, AdSense reklam kodunda yapılması 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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     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 aşağıdaki bilgileri not edin:
   • Yayıncı kimliğiniz, ör. ca-pub-1234567890123456
   • Reklam biriminizin kimliği (data-ad-slot), ör. 1234567890
2. Örnek kodda:
   • Tüm example_responsive_1 örneklerini benzersiz bir adla (ör. Home_Page, front_page_123) 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 her uyarlayışınızda farklı bir benzersiz ad kullanmanız gerekir.
   • ca-pub-1234567890123456 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.
   İpucu: 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 dair ö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üksekliğe sahip genişletilebilen genişlik örneği

Aşağıdaki örnekte, duyarlı reklam kodunuzda yüksekliğin 90 piksel değerine sabit, genişliğin ise minimum 400 piksel ile maksimum 970 piksel arasında değişken bir değere sahip olduğunu belirtecek şekilde nasıl değişiklik yapılabileceği gösterilmektedir:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></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 tam 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 için reklam kodunuzu nasıl değiştirebileceğiniz gösterilmektedir:
<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:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

@media kuralları bir CSS3 söz dizimidir ve tüm modern tarayıcılarda desteklenir. Harici stil sayfalarında CSS aracılığıyla reklam boyutunun ayarlanmasının resmi olarak desteklenmediğini unutmayın.

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 gizlemeyle ilgili ö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ında gizlemek amacıyla CSS3 medya sorguları kullanmak için reklam kodunuzu nasıl değiştirebileceğiniz gösterilmektedir:
<style type="text/css">
.adslot_1 { display: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-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Bu örnekte, ekran genişliği 400 pikselden az olduğunda reklam gösterilmez.

Not: 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.