Aşağıda, masaüstü ve mobil uygulamalar için Google Yayıncı Etiketi (GPT) oluşturmaya yönelik tam koda bir örnek verilmiştir. Etiketi otomatik olarak oluşturmak için Google Etiket Oluşturucu'yu kullanın.
Geliştiriciler ve gelişmiş GPT uygulamalarına ihtiyaç duyanlar, API referansı ve örnek uygulamaları (geç yükleme gibi) inceleyin.
Gelişmiş GPT örneklerini görüntüleme
Google Yayıncı Etiketi örnek kodu
GPT için uygulanan iki kod bölümü vardır:
- GPT yapılandırması web sayfasının
<head>
bölümüne gider. - Her bir belirli reklam alanı için yapılan çağrılar,
<body>
öğesinin ilgili bölümüne eklenir.
Bu örnek bilgilendirme amaçlıdır. Kodu bir geliştiricinin web sitenize uygulamasını sağlamanızı öneririz.
GPT yapılandırması
Aşağıdaki kod örneğinde GPT JavaScript kitaplığının çağrılması, reklam alanlarının tanımlanması ve anahtar/değer çifti hedefleme gibi işlemler yer alır.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
3-6 arasındaki satırlar: Ad Manager tarafından kullanılan GPT kitaplığını, SSL/HTTPS kullanarak eşzamansız olarak yükler. Eşzamansız olarak işlenecek işlevlerin listesini (genellikle, reklam çağrıları) işleyen komut sırası burada oluşturulur. Kodun bu bölümünü düzenlemeniz gerekmez. |
|
7 | <script> |
8 | googletag.cmd.push(function() { |
9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
9. satır:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
15 | .setTargeting("age", "20-30"); |
11, 14 ve 15. satırlar: GPT ile hedeflemeyi ve boyutları ayarlama hakkında daha fazla bilgi |
|
16 | googletag.pubads().setTargeting("topic","basketball"); |
16. satır: Hedefleme, sayfa düzeyinde anahtar/değer çiftleri kullanılarak yapılandırıldığında tüm reklam alanları bu hedeflemeyi devralır. Alan düzeyinde anahtar/değer çiftlerinde olduğu gibi, tek bir anahtarla birden çok değeri ilişkilendirebilirsiniz: ( |
|
17 | googletag.pubads().enableSingleRequest(); |
17. satır: |
|
18 | googletag.enableServices(); |
19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
23. satır (isteğe bağlı): Çok boyutlu etiketler kullanılıyorsa bunun atlanmasını (bu durumda öğenin boyutu, oluşturulduktan sonra seçilen reklam öğesinin boyutunu alır) veya her iki boyutun da uygun olan en büyük reklam öğesini içerecek kadar büyük olmasını öneririz. Tek boyutlu reklam etiketlerinde, reklam öğesi oluşturulduğunda diğer sayfa öğelerinin kaymaması için reklam öğesi yükleninceye kadar kapsayıcı öğeyi genişletmek üzere bu parametreyi kullanın. |
|
24 | <script> |
25 | googletag.cmd.push(function() { |
26 | googletag.display("div-gpt-ad-123456789-0"); |
27 | }); |
28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
8, 25 ve 32. satırlar: Sayfa yüklendiğinde işlev çağrıları, eşzamansız olarak işlenmek üzere komut sırasına eklenir. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
9, 12, 23, 26, 30 ve 33. satırlar: " Burada rastgele sayılar kullanılsa da GPT bir reklam isteğini benzersiz bir şekilde tanımlarken böyle yapmaz. Bu işlem, GPT kitaplığıyla arka planda yapılır. Bu adlar, bir sayfada aynı div adının birden çok örneği bulunmadıkça sayfalar arasında da aynı şekilde kullanılabilir. Envantere genel bakışta Ad Manager envanter yapısı, reklam birimi hiyerarşisi ve reklam birimlerinin hedeflemeyi nasıl devraldığı konusunda daha fazla bilgi edinin. |
|
34 | }); |
35 | </script> |
36 | </div> |
37 | </body> |
38 | </html> |
Gelişmiş GPT örneklerini görüntüleme
Web sayfalarınızın başlığını düzenleyemiyorsanız
GPT'yi web sitenizin <header>
öğesini değiştirmeden kullanabilirsiniz.
1. Seçenek: satır içi GPT
Sayfa başlığını kullanmak yerine reklam biriminin sayfada nerede gösterildiğini tanımlamak üzere satır içi etiket kullanın. Satır içi etiket ile, GPT kitaplığının yüklenmesi de dahil olmak üzere, GPT reklam alanı tanımının ve isteğinin tamamı tek bir <script>
etiketi içinde bulunur.
Reklam etiketi GPT JavaScript kitaplığını kullandığından, kitaplığı yükleyen kodu reklam etiketi kodundan önce eklemeniz gerekir.
Bu satır içi GPT örnekleri SRA'yı desteklemez.
GPT JavaScript kitaplığını çağırma
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Örnek satır içi reklam etiketi
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
2. Seçenek: Tüm kodu web sayfası gövdesine yerleştirin
Geleneksel GPT uygulama yöntemini kullanın. Ancak reklam alanı tanımlarını HTML'nizin head bölümü yerine body bölümüne yerleştirin.
Kitaplığı yükleyen ve reklam alanlarını tanımlayan kodun, bu alanlar için reklam istemenizden önce çağrılması gerekir. Kod, sayfanızın head ve body bölümlerinde segmentlere ayrılmadığından ve dizisini yönetmeniz gerektiğinden, bu yaklaşım daha karmaşıktır. Ancak SRA'nın esnek olmasını sağlar.
JavaScript olmadan Etiketsiz İstek oluşturma
Ad Manager'da trafiğe eklenen ham reklam öğesi kodunu istemek için reklam etiketi yerine Etiketsiz İstek kullanılabilir. Etiketsiz İstekler, genellikle Google etiketleme veya SDK desteği olmayan set üstü kutularda ya da diğer ortamlarda özel ayrıştırma ve görüntülü reklam gerektiğinde kullanılır.