Aşağıdaki kılavuz, test reklamı görüntüleme ile ilgili daha ayrıntılı bilgiler vermekte ve Google Yayıncı Etiketi (GPT) kitaplığından en iyi şekilde yararlanmanızı sağlayacak daha temel kavramlar sunmaktadır. Bu kavramlardan bazıları şunlardır:
- Reklam boyutlandırma
- Anahtar/değer çifti hedefleme
- Tekli istek mimarisi
GPT kitaplığını yükleme
GPT kitaplığını yükleyip başlatarak başlayın. HTML belgesinin <head> bölümüne aşağıdakileri ekleyin:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
});
</script>
Bu, GPT kitaplığını yükler ve hem googletag hem de CommandArray nesnelerini başlatır. Bu nesnelerin başlatılması GPT komut dizisini kullanmaya hemen başlamanıza olanak tanır. Bu snippet'te tanımlanan boş işlevin gövdesine aşağıdaki JavaScript kodunu ekleyin.
Reklam alanlarını tanımlama
GPT'yi yükledikten sonra reklam alanlarını tanımlayabilirsiniz. Aşağıdaki örnekte farklı reklam biçimleri, boyutlandırma ve hedefleme seçenekleri olan üç 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 yolu, boyutu ve kapsayıcı <div> kimliğine ek olarak bir dizi hedefleme seçeneği de belirtir. Bu seçenekler, bu alanda yayınlanmaya uygun olan reklamları kısıtlar ve farklılaştırır. Anahtar/değer çifti hedefleme hakkında daha fazla bilgi edinin.
Sabit reklam alanı
Görüntü alanının alt kısmına bir sabit reklam alanı eklenir:
// 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, 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 oldukları sayfa ve cihaz türleriyle ilgili kısıtlamalara sahiptir. Bu kısıtlamalar nedeniyle, alanla etkileşim kurulmadan ö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 yerel reklamlar için değişken bir 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 kullanılabilir boyutlandırma seçenekleri hakkında daha fazla bilgi edinin.
Sayfa düzeyinde ayarları yapılandırma
Belirli GPT yapılandırma seçenekleri, belirli reklam alanları yerine genel olarak geçerlidir. Bunlar, sayfa düzeyinde ayarlar olarak adlandırılır.
Aşağıda, sayfa düzeyinde ayarların nasıl yapılandırılacağına ilişkin bir örnek 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ı için yapılan istekleri tek bir reklam isteğinde toplayan Tek İstek Mimarisi (SRA) modunu etkinleştirir. SRA, performansı artırır ve rekabet eden hariç tutmaların ve birlikte gösterimlerin dikkate alınmasını sağlamak için gereklidir. Bu nedenle, SRA'yı her zaman etkinleştirmenizi öneririz. SRA'yı doğru şekilde kullanma hakkında daha fazla bilgi
- Reklam alanlarımıza eklenmiş olan ve reklam isteği oluşturulmasına izin veren hizmetlerin etkinleştirilmesini sağlar.
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(function() {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display('banner-ad');
});
</script>
Bu, iki reklam alanı kapsayıcısı tanımlar: banner-ad ve native-ad. Bu kapsayıcı id değerleri, bu örneğin 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ı çağrılır ve bu noktaya kadar tanımlanan tüm reklam alanlarını oluşturur. Gerekirse SRA etkin bir şekilde reklam yüklemeyi ve yenilemeyi ve toplu işlem davranışını kontrol edebilirsiniz.
Tam örnek
Aşağıda, bu kılavuzun temel aldığı örnek sayfa için tam kaynak kodu verilmiştir. Ayrıca bu sayfanın etkileşimli bir demosunu da görüntüleyebilirsiniz.