Aşağıdaki kılavuzda, test reklamı görüntüleme hakkında bilgi vermek ve Google Yayıncı Etiketi (GPT) kitaplığından en iyi şekilde yararlanmaya yönelik daha temel kavramlar açıklanmaktadır. Bu kavramlar şunlardır:
- Reklam boyutlandırma
- Anahtar/değer çifti hedefleme
- Tek istekli yapı
GPT kitaplığını yükleme
GPT kitaplığını yükleyip başlatarak başlayın. HTML dokümanının <head> kısmına aşağıdakini ekleyin:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Bu işlem, GPT kitaplığını yükler ve hem googletag hem de CommandArray nesnelerini başlatır. Bu nesneleri başlatmak, GPT komut dizisini kullanmaya hemen başlayabilmenizi sağlar. İzleyen JavaScript kodunu, bu snippet'te tanımlanan boş işlevin gövdesine ekleyin.
Reklam alanlarını tanımlama
GPT'yi yükledikten sonra reklam alanlarını tanımlayabilirsiniz. Aşağıdaki örnekte farklı reklam biçimleri, boyutları ve hedefleme seçeneklerine sahip üç reklam alanı tanımlanmaktadır.
Sabit boyutlu reklam alanı
Aşağıda basit ve sabit boyutlu bir reklam alanı gösterilmektedir:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Bu snippet, reklam birimi yolu, boyutu ve kapsayıcı <div> kimliğine ek olarak çeşitli hedefleme seçenekleri de belirtir. Bu seçenekler, bu alana sunulmaya uygun olan reklamları kısıtlar ve farklı kılar. Anahtar/değer çifti hedefleme hakkında daha fazla bilgi
Sabit reklam alanı
Görüntü alanının alt kısmına eklenmiş bir sabit reklam alanını burada görebilirsiniz:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Sabit alanlar, her zamanki defineSlot yöntemi yerine defineOutOfPageSlot yöntemi kullanılarak tanımlanan bir sayfa dışı biçim türüdür. Sayfa dışı reklam öğeleri hakkında daha fazla bilgi
Sayfa dışı biçimler, genellikle yayınlanmaya uygun oldukları sayfa ve cihaz türleriyle ilgili kısıtlamalara sahiptir. Bu kısıtlamalar nedeniyle, alanla etkileşimde bulunmadan önce alanın başarıyla tanımlandığını doğrulamanız gerekir. Ayrıntılar için Sabit reklam görüntüleme örneğine bakın.
Değişken reklam alanı
Aşağıda, doğal bir reklam için değişken reklam alanı verilmiştir:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Değişken reklam alanlarının sabit bir boyutu yoktur. Değişken reklam alanları, reklamdaki reklam
öğesi içeriğine sığacak şekilde ayarlanır. Değişken reklam alanlarını fluid boyut seçeneğiyle tanımlarsınız. Reklam boyutlandırma ve mevcut boyutlandırma seçenekleri hakkında daha fazla bilgi edinin.
Sayfa düzeyindeki ayarları yapılandırma
Belirli GPT yapılandırma seçenekleri, belirli reklam alanları yerine genel olarak geçerlidir. Bunlara sayfa düzeyinde ayarlar denir.
Aşağıda, sayfa düzeyinde ayarların nasıl yapılandırılacağına dair bir örnek verilmiştir:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Bu snippet'in işlevi şudur:
- Sayfadaki her reklam alanına uygulanan sayfa düzeyinde hedefleme seçeneklerini yapılandırır.
- Birden fazla reklam alanı isteklerini tek bir reklam isteği olarak gruplandıran Tekli İstek Mimarisi (SRA) modunu etkinleştirir. SRA, performansı artırır ve rakip hariç tutmaların ve birlikte gösterimlerin dikkate alınmasını garanti etmek için gereklidir. Bu nedenle, her zaman SRA'yı etkinleştirmenizi öneririz. SRA'yı doğru şekilde kullanma hakkında daha fazla bilgi edinin.
- Reklam alanlarımıza eklenmiş olan ve reklam istekleri yapılmasına olanak tanıyan hizmetleri etkinleştirir.
Görüntülü reklamlar
Son olarak, aşağıdaki snippet'i sayfanın <body> bölümüne ekleyin:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Bu özellik, banner-ad ve native-ad olmak üzere iki reklam alanı kapsayıcısı tanımlar. Bu kapsayıcı id değerleri, bu örnekte daha önce reklam alanlarını tanımladığınızda sağladığınız değerlere karşılık gelir.
Tüm reklam alanları tanımlandıktan sonra banner-ad öğesini göstermesi için bir çağrı yapılır. SRA etkinleştirildiğinden, bu tekli görüntüleme çağrısı istekleri ve bu noktaya kadar tanımlanan tüm reklam alanlarını görüntüler. Gerekirse SRA etkin bir şekilde reklam yüklemeyi ve yenilemeyi ve toplu işlem davranışını daha hassas bir şekilde kontrol edebilirsiniz.
Eksiksiz örnek
Aşağıda, bu kılavuzun temel aldığı örnek sayfanın tam kaynak kodunu bulabilirsiniz. Bu sayfanın etkileşimli bir demosunu da görüntüleyebilirsiniz.