Sayfa içi HTML reklam alanlarınızı video veya yer paylaşımlı reklam alanlarıyla ilişkilendirmek isteyebilirsiniz. İlişkili reklam alanları arasındaki bu ilişkiye ana-tamamlayıcı ilişkisi denir.
Video ve yer paylaşımlı ana reklamlar istemenin yanı sıra tamamlayıcı HTML reklamlar görüntülemek için IMA SDK'yı kullanabilirsiniz. Bu reklamlar bir HTML ortamında gösterilir.
Tamamlayıcı reklamları kullanma
Arkadaş reklamları kullanmak için aşağıdaki adımları uygulayın:
1. Tamamlayıcı reklamlarınızı ayırma
Öncelikle ana reklamlarınızla birlikte göstermek istediğiniz tamamlayıcı reklamları ayırmanız gerekir. Arkadaş reklamlar Ad Manager'da trafiğe eklenebilir. Ana reklam başına en fazla altı tamamlayıcı reklam yayınlayabilirsiniz. Tek bir alıcının sayfadaki tüm reklamları kontrol ettiği bu teknik, birlikte gösterim olarak da bilinir.
2. Tamamlayıcı reklamlarınızı isteme
Varsayılan olarak, her reklam isteği için tamamlayıcı reklamlar etkindir.
3. Tamamlayıcı görüntülü reklamlar
Arkadaş reklamları oluşturmanın iki yolu vardır:
- Google Yayıncı Etiketi'ni (GPT) kullanarak otomatik olarak
Tamamlayıcı reklamlarınızı uygulamak için GPT kullanıyorsanız HTML sayfasında tanımlanmış tamamlayıcı reklam alanları olduğu ve bu reklamlar API'ye kaydedilmiş olduğu sürece (yani JavaScript ve HTML'deki div kimliği eşleşmesi gerekir) tamamlayıcı reklamlar otomatik olarak gösterilir. GPT kullanmanın bazı avantajları şunlardır:- Tamamlayıcı alan farkındalığı
- VAST yanıtının, HTML sayfasında tanımlı alanlardan daha az tamamlayıcı reklam içermesi durumunda yayıncı ağının tamamlayıcı reklam dolgusu
- Video reklam eksikse tamamlayıcı otomatik doldurma
- Tıkla ve oynat video oynatıcıları için önceden yüklenmiş tamamlayıcı reklam alanları
HTMLResource
veiFrameResource
dahil olmak üzere otomatik tamamlayıcı oluşturma
- Ad API'yi manuel olarak kullanarak.
Google Yayıncı Etiketi ile tamamlayıcı reklamları kullanma
Google Yayıncı Etiketi (GPT), sitenizde HTML tamamlayıcı reklamların gösterilmesini otomatikleştirir. Çoğu yayıncının GPT'yi kullanmasını öneririz. GPT ana web sayfasına yüklenirse (IFrame'e değil) HTML5 SDK'sı GPT alanlarını tanır. GPT'yi IMA SDK'sıyla kullanma hakkında daha ayrıntılı bilgi için GPT belgelerine göz atın.
HTML5 SDK'sını bir iFrame içinde barındırıyorsanız
Aşağıdaki ölçütlerin her ikisini de karşılıyorsanız GPT tamamlayıcılarınızın doğru şekilde gösterilmesi için ek bir proxy komut dosyası eklemeniz gerekir:
- HTML5 SDK'sını bir IFrame'e yükleyin.
- GPT'yi ana web sayfasına (iFrame dışında) yükleyin.
Arkadaşlarınızın bu senaryoda gösterilmesi için SDK'yı yüklemeden önce GPT proxy komut dosyasını yüklemeniz gerekir:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
Unutulmaması gereken önemli noktalar:
- SDK'yı yükleyen IFrame'de yüklü GPT olmamalıdır.
- GPT başka bir iFrame'de değil, üst sayfaya yüklenmelidir.
- Proxy komut dosyası, GPT ile aynı çerçeveye (yani ana sayfaya) yüklenmelidir.
HTML'de tamamlayıcı reklam alanlarını bildirme
Bu bölümde, GPT'yi kullanarak tamamlayıcı reklamların HTML'de nasıl tanımlanacağı açıklanmakta ve farklı senaryolar için örnek kod sağlanmaktadır. HTML5 SDK'sı için HTML sayfanıza biraz JavaScript eklemeniz ve tamamlayıcı reklam alanlarını belirtmeniz gerekir.
Not: Aşağıdaki örneklerin her birinde, googletag.defineSlot
yöntem çağrısında (kullandığınız asıl örneğe bağlı olarak <head> veya <body> etiketinde bulunur) geçerli bir network
ve unit-path
sağladığınızdan emin olun.
- 1. örnek: Temel reklam alanı uygulama
- 2. örnek: Dinamik reklam alanı uygulama
- 3. örnek: Önceden yüklenmiş reklam alanları
1. örnek: Temel reklam alanı uygulaması
Aşağıdaki örnek kodda, gpt.js
dosyasının HTML sayfanıza nasıl ekleneceği ve reklam alanı nasıl tanımlanacağı gösterilmektedir. Beyan edilen reklam alanı 728x90 pikseldir. GPT, alanı VAST yanıtında döndürülen ve bu boyutla eşleşen tüm tamamlayıcı reklamlarla doldurmaya çalışır. Reklam alanları tanımlandıktan sonra googletag.display()
işlevi, sayfadaki her yerde çağrıldığında bunları oluşturabilir. Alanlar tamamlayıcı alanlar olduğu için reklamlar hemen gösterilmez. Bunun yerine, ana video reklamın yanında gösterilir.
Uygulamanın bir örneğini aşağıda görebilirsiniz:
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>--> <!-- HEAD part --> <!-- Initialize the tagging library --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { googletag.display('companionDiv'); }); </script> </div> <body> </html>
Deneyin
Çalışan bir uygulama için aşağıdaki codepen'i inceleyebilirsiniz.
2. Örnek: Dinamik reklam alanı uygulaması
Bazen sayfa içeriği oluşturulana kadar bir sayfada kaç reklam alanı olduğunu bilemezsiniz. Aşağıdaki örnek kodda, sayfa oluşturulurken reklam alanlarının nasıl tanımlanacağı gösterilmektedir. Bu örnek, reklam alanlarını gerçekte gösterildikleri yerde kaydettiği dışında 1. Örnek ile aynıdır.
Not: Video oynatıcı, reklamları göstermek üzereyken reklam alanları için istekte bulunur. Oynatıcı reklamları göstermeden önce alanların tanımlandığından emin olun.
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- HEAD part --> <!-- Initialize the tagging library --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.display('companionDiv'); }); </script> </div> <body> </html>
Deneyin
Çalışan bir uygulama için aşağıdaki kodu görebilirsiniz.
3. örnek: Önceden yüklenmiş reklam alanları
Bazı durumlarda, tamamlayıcı reklam istenmeden önce reklam alanında bir şey göstermeniz gerekebilir. Tamamlayıcı reklamlar genellikle bir video reklamla birlikte istenir. Bu istek, sayfa yüklendikten sonra da gerçekleşebilir. Örneğin, tamamlayıcı reklam yalnızca kullanıcı tıkla oynat videosunu tıkladıktan sonra yüklenebilir. Böyle bir durumda, tamamlayıcı reklam istenmeden önce reklam alanını doldurmak için normal bir reklam isteğinde bulunabilmeniz gerekir. Bu kullanım alanını desteklemek için tamamlayıcı yuvada standart web reklamları gösterebilirsiniz. Web reklamlarının tamamlayıcı alanları hedeflediğinden emin olun. Arkadaş reklam alanlarını, standart web reklam alanlarını hedeflediğiniz şekilde hedefleyebilirsiniz.
Not: Aşağıdaki örnek kod, kalın yazılmış bölüm hariç 1. örnekte sağlanan kodla bire bir aynıdır. Bu durumda, video reklam biriminiz yerine önyükleme reklamınızın reklam ağını ve birim yolunu sağlarsınız.
Az önce açıklanan uygulamaya dair bir örnek aşağıda verilmiştir:
<html> <head> ... <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH. googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> ... </html>
Deneyin
Çalışan bir uygulama için aşağıdaki kod kalemini görebilirsiniz.
Reklam API'si ile tamamlayıcı reklamları kullanma
Bu bölümde, Ad
API kullanılarak tamamlayıcı reklamların nasıl görüntüleneceği açıklanmaktadır.
Tamamlayıcı görüntülü reklamlar
Arkadaş reklamlar görüntülemek için önce AdsManager
'den gönderilen AdEvent
etkinliklerinden herhangi biri aracılığıyla bir Ad
nesnesine referans alın.
Tamamlayıcı reklamların gösterilmesi ana reklamın gösterilmesiyle aynı zamana denk gelmesi gerektiğinden AdEvent.STARTED
etkinliğini kullanmanızı öneririz.
Ardından, CompanionAd
nesnesi dizisi almak için getCompanionAds()
'yi çağırmak üzere bu Ad
nesnesini kullanın. Burada, tamamlayıcı reklamlarda reklam öğesi türü, yakın eşleşme yüzdesi, kaynak türü ve boyut ölçütleri için filtreler ayarlamanıza olanak tanıyan CompanionAdSelectionSettings
seçeneğini belirleyebilirsiniz. Bu ayarlar hakkında daha fazla bilgi için
HTML5 API belgelerini inceleyin.
getCompanionAds
tarafından döndürülen CompanionAd
nesneleri artık şu yönergeleri kullanarak sayfadaki tamamlayıcı reklamları görüntülemek için kullanılabilir:
- Sayfada gerekli boyuttaki bir tamamlayıcı reklam alanı
<div>
oluşturun. -
STARTED etkinliği için etkinlik işleyicinizde
getAd()
çağrısını yaparakAd
nesnesini alın. - Hem tamamlayıcı reklam alanı boyutuyla hem de
CompanionAdSelectionSettings
eşleşen ve ana reklam öğesiyle aynı sıra numarasına sahip tamamlayıcı reklamların listesini almak içingetCompanionAds()
seçeneğini kullanın. Sıralı özellik eksik olan reklam öğeleri, sıra numarası 0 olarak kabul edilir. - İçeriği bir
CompanionAd
örneğinden alın ve söz konusu reklam yuvasının iç HTML'si olarak ayarlayın<div>
.
Örnek kod
<!--Set a companion ad div in html page. --> <div id="companion-ad-300-250" width="300" height="250"></div> <script> // Listen to the STARTED event. adsManager.addEventListener( google.ima.AdEvent.Type.STARTED, onAdEvent); function onAdEvent(adEvent) { switch (adEvent.type) { case google.ima.AdEvent.Type.STARTED: // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings var companionAds = ad.getCompanionAds(300, 250, selectionCriteria); var companionAd = companionAds[0]; // Get HTML content from the companion ad. var content = companionAd.getContent(); // Write the content to the companion ad slot. var div = document.getElementById('companion-ad-300-250'); div.innerHTML = content; break; } } </script>
Akıcı tamamlayıcı reklamlar gösterin
IMA artık değişken tamamlayıcı reklamları destekliyor. Bu tamamlayıcı reklamlar, reklam alanının boyutuna uyacak şekilde yeniden boyutlandırılabilir. Bunlar, üst div'in genişliğinin% 100'ünü doldurur ve ardından yüksekliklerini tamamlayıcının içeriğine sığacak şekilde yeniden boyutlandırır. Ad Manager'da Fluid
tamamlayıcı boyutu kullanılarak ayarlanır. Bu değerin nerede ayarlanacağını öğrenmek için aşağıdaki resme bakın.

GPT sıvı eşleri
GPT tamamlayıcılarını kullanırken defineSlot()
yönteminin ikinci parametresini güncelleyerek akıcı bir tamamlayıcı alanı tanımlayabilirsiniz.
<!-- Register your companion slots --> <script> googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script>
Ad API akışkan iş ortakları
Tamamlayıcı reklamlar için Ad API'yi kullanırken google.ima.CompanionAdSelectionSettings.SizeCriteria
değerini SELECT_FLUID
değerine güncelleyerek akıcı bir tamamlayıcı reklam alanı tanımlayabilirsiniz.
<script> ... // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings // Note: Companion width and height are irrelevant when fluid size is used. var companionAds = ad.getCompanionAds(0, 0, selectionCriteria); var companionAd = companionAds[0]; ... } } </script>