Temel bilgileri örneklerle öğrenin

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 hedefleme
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 işlem, GPT kitaplığını yükler ve hem googletag hem de CommandArray nesnelerini başlatır. Bu nesneleri başlatmak, GPT komut dizisini hemen kullanmaya başlamanızı sağlar. 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ı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, 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 yuvada yayınlanmaya uygun reklamları kısıtlar ve farklılaştırır. Anahtar/değer hedefleme hakkında daha fazla bilgi edinin.

Sabit reklam alanı

Görüntü alanının alt kısmına eklenmiş bir sabit reklam alanı aşağıda verilmiştir:

// 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 yayınlanmaya uygun sayfa ve cihaz türleriyle ilgili 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.

Akışkan 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 dünya genelinde 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 alanlarımıza eklenmiş ve reklam isteklerinin yapılmasına izin veren 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.

JavaScript

TypeScript

Başlama

TypeScript kullan