Reklam boyutları

Tanımladığınız her reklam alanı, o alanda yayınlanmaya uygun olan reklam boyutlarını belirtmelidir. Reklam boyutlarının belirtilme şekli, gösterilecek reklamların türüne ve ayrıca reklam alanlarının boyutu ve esnekliğine bağlı olarak değişir.

Bazı durumlarda, reklam boyutu Google Ad Manager içinde satır öğesi seviyesinde geçersiz kılınabilir. Daha fazla bilgi için Yardım Merkezi'ni ziyaret edin.

Bu kılavuzda yer alan örneklerin tam kodunu reklam boyutları örnek sayfasında bulabilirsiniz.

Sabit boyutlu reklamlar

Tek bir sabit boyuta sahip bir reklam alanı tanımlayabilirsiniz.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

Bu örnekte, yalnızca 300x250 boyutundaki reklam öğeleri sunulacaktır.

Önemli nokta: Sabit boyutlu reklamlarla çalışırken, reklam öğesinin oluşturulacağı <div> öğesinin boyutunu tanımlamanızı önemle tavsiye ederiz. Reklam öğeleri genellikle eşzamansız olarak oluşturulduğundan, kendileri için yeterli alan kalmazsa sayfadaki diğer öğelerin kaymasına neden olabilir.

Çok boyutlu reklamlar

Bir reklam birden fazla boyutu destekliyorsa reklam alanını tanımlarken desteklenen boyutların listesini sağlayın.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Bu örnekte, 300x250, 728x90 ve 750x200 boyutlarına sahip reklam öğeleri yayınlanabilir. Ad Manager, reklam seçim sürecinde yalnızca bu boyutlarla eşleşen reklam öğelerini dikkate alır.

CSS'de <div> reklam alanı için boyutlar belirtilmezse display() çağrıldığında, GPT otomatik olarak boyutları 1 pikselin üzerinde belirtilen en kısa ve beyan edilen genişliğe eşit olacak şekilde ayarlar. Bu durumda bu değer 750x90 olur. Ancak bu boyutlandırma, sayfadaki diğer içerikler yüklendikten sonra gerçekleşerek içeriğin kaymasına neden olabilir. Düzen kaymalarını önlemek için düzen kaymasını en aza indirme kılavuzunda gösterildiği gibi CSS kullanarak alan ayırın.

Çok boyutlu reklamlarla çalışırken, düzeninizin belirtilen en büyük boyuta sahip bir reklamı destekleyecek kadar esnek olduğundan emin olun. Bu, reklam öğelerinin yanlışlıkla kırılmasını önleyecektir.

Değişken reklamlar

Değişken reklamların sabit bir boyutu yoktur. Bu reklamlar, gösterdikleri reklam öğesi içeriğine uyacak şekilde uyarlanabilir. Yerel reklamlar, şu anda Ad Manager tarafından desteklenen tek değişken reklam türüdür.

Değişken reklamlarla çalışırken özel bir fluid boyutu belirtilebilir.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Bu örnekte, reklam alanı üst kapsayıcısının genişliğine sahip olacak ve yüksekliğini reklam öğesi içeriğine sığacak şekilde yeniden boyutlandıracaktır. GPT'nin reklam alanını yeniden boyutlandırmak için uyguladığı adımlar şu şekildedir:

  1. Reklam yanıtı alındı.
  2. Reklam öğesi içeriği, başlangıç yüksekliği 0px ve genişlik 100% olarak ayarlanarak bir iframe içine yazılır.
  3. iframe'deki tüm kaynakların yüklenmesi bittikten sonra, iframe'in yüksekliği iframe'in <body> öğesinin yüksekliğine eşit olacak şekilde ayarlanarak reklam öğesi görünür hale getirilir.

Duyarlı reklamlar

Duyarlı reklamlar, çok boyutlu reklamların kapsamını genişletir ve isteği yapan tarayıcının görüntü alanının boyutuna göre yayınlanacak reklam öğelerinin boyutunu belirtmenize olanak tanır. Bu işlev, farklı cihaz türlerine (masaüstü, tablet, cep telefonu vb.) sunulan reklam öğelerinin boyutunu kontrol etmek için kullanılabilir.

Bu, görüntü alanı boyutu ile reklam boyutu arasında bir eşleme tanımlanıp bu eşlemenin bir reklam alanıyla ilişkilendirilmesiyle gerçekleştirilir.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

Bu örnekte, eşleme şunu belirtir:

  • Görüntü alanı >= 1024x768 olduğunda, 750x200 veya 728x90 boyutundaki reklamlar sunulabilir.
  • 1024x768 > görüntü alanı >= 640x480 olduğunda 300x250 boyutundaki reklamlar yayınlanabilir.
  • Görüntü alanı < 640x480 olduğunda hiçbir reklam sunulamaz.

GPT, isteği yapan tarayıcının görüntü alanının boyutunu algılar ve uygun olan en büyük eşlemeyi kullanır. En büyük eşlemeyi belirlemek için GPT önce genişliği, ardından yüksekliği (yani [100, 10] > [10, 100]). Eşlemede bir hata olması durumunda veya görüntü alanı boyutu belirlenemezse defineSlot() içinde belirtilen boyutlar kullanılır.

Daha sonra eşleme, Slot.defineSizeMapping() yöntemi çağırarak reklam alanıyla ilişkilendirilir. Bu yöntem, aşağıdaki biçimdeki bir eşleme dizisini kabul eder:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

Bu dizideki görüntü alanı boyutlarının sırası, önceliklerini tanımlar. Yukarıdaki örnekte kullanılan SizeMappingBuilder, boyutlar otomatik olarak en büyükten en küçüğe doğru sıralanan bu biçimde bir dizi oluşturmanın kolay bir yoludur. Bu örnekte SizeMappingBuilder.build() çıktısı şu şekildedir:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]