Aşağıdaki kılavuzda, test reklamı gösterme hakkında daha fazla bilgi verilmektedir ve Google Yayıncı Etiketi (GPT) kitaplığından en iyi şekilde yararlanmak için daha fazla temel kavram tanıtılmaktadır. Bu kavramlar arasında şunlar yer alır:
- Reklam boyutlandırması
- Anahtar/değer çifti hedeflemesi
- Tekli istek mimarisi
GPT kitaplığını yükleme
GPT kitaplığını yükleyerek ve başlatarak başlayın. Aşağıdakileri HTML dokümanındaki <head> bölümüne ekleyin:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>Bu, GPT kitaplığını yükler ve hem googletag hem de CommandArray nesnelerini başlatır. Bu nesneleri başlattığınızda GPT komut dizisini hemen kullanmaya başlayabilirsiniz. Aşağıdaki 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ı tanımlayabilirsiniz. Aşağıdaki örnekte farklı reklam biçimleri, boyutlandırma ve hedefleme seçeneklerine sahip üç reklam alanı tanımlanmaktadır.
Sabit boyutlu reklam alanı
Aşağıda basit, sabit boyutlu bir reklam alanı verilmiştir:
// 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 yoluna, boyutuna ve kapsayıcı <div> kimliğine ek olarak çeşitli hedefleme seçenekleri de belirtir. Bu seçenekler, bu alanda yayınlanmaya uygun olan reklamları kısıtlar ve farklılaştırır. Anahtar/değer hedefleme hakkında daha fazla bilgi edinin.
Sabit reklam alanı
Burada, görüntü alanının alt kısmına ekli bir sabit reklam alanını 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 reklam alanları, normal 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 sunulmaya uygun sayfa ve cihaz türlerinde kısıtlamalara sahiptir. Bu kısıtlamalar nedeniyle, slotla etkileşime geçmeden önce slotun 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.
Sıvı reklam alanı
Aşağıda, doğal reklam için değişken reklam alanı verilmiştir:
// Define a fluid ad slot that fills the width of the enclosing column and // adjusts the height as defined by the native creative delivered. googletag .defineSlot("/6355419/Travel", ["fluid"], "native-ad") .addService(googletag.pubads());
Değişken reklam alanlarının sabit bir boyutu yoktur. Akıcı reklam alanları, reklamdaki reklam öğesi içeriğine uyacak şekilde ayarlanır. Değişken reklam alanlarını fluid boyut seçeneğiyle tanımlarsınız. Reklam boyutları 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.
Sayfa düzeyindeki ayarların nasıl yapılandıracağına dair bir örnek aşağıda verilmiştir:
// Configure page-level targeting. googletag.pubads().setTargeting("interests", "basketball"); // Enable SRA and services. googletag.pubads().enableSingleRequest(); googletag.enableServices();
Bu snippet üç şey yapar:
- Sayfadaki her reklam alanına uygulanan sayfa düzeyinde hedefleme seçeneklerini yapılandırır.
- Birden fazla reklam alanı isteğini tek bir reklam isteği altında 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, SRA'yı her zaman etkinleştirmenizi öneririz. SRA'yı doğru şekilde kullanma hakkında daha fazla bilgi edinin.
- Reklam isteklerinde bulunulmasına izin veren reklam alanlarımıza ekli hizmetleri etkinleştirir.
Görüntülü reklamlar
Son olarak, sayfanın <body> bölümüne aşağıdaki snippet'i 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, iki reklam alanı kapsayıcısını (banner-ad ve native-ad) tanımlar. Bu kapsayıcı id değerleri, bu örnekte daha önce reklam alanlarını tanımlarken sağladığınız değerlere karşılık gelir.
Tüm reklam alanları tanımlandıktan sonra banner-ad öğesinin gösterilmesi için bir çağrı yapılır. SRA etkin olduğundan bu tek görüntüleme çağrısı, bu noktaya kadar tanımlanan tüm reklam alanlarını ister ve oluşturur. Gerekirse SRA etkinken reklam yükleme ve yenilemeyi ve gruplandırma davranışını daha hassas bir şekilde kontrol edebilirsiniz.
Tam örnek
Aşağıda, bu kılavuzun temel aldığı örnek sayfanın tam kaynak kodu verilmiştir. Ayrıca bu sayfanın etkileşimli demosunu da görüntüleyebilirsiniz.