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:
- Reklam yanıtı alındı.
- Reklam öğesi içeriği, başlangıç yüksekliği
0px
ve genişlik100%
olarak ayarlanarak bir iframe içine yazılır. - 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
veya728x90
boyutundaki reklamlar sunulabilir. 1024x768
> görüntü alanı >=640x480
olduğunda300x250
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], []]
]