Sayfa içi HTML reklam alanlarınızı video veya yer paylaşımlı reklam alanlarıyla ilişkilendirmek isteyebilirsiniz. İlişkilendirilmiş reklam alanları arasındaki bu ilişkiye ana-tamamlayıcı ilişkisi denir.
Video ve yer paylaşımlı ana reklamlar istemeye ek olarak, IMA SDK'yı tamamlayıcı HTML reklamları göstermek için de kullanabilirsiniz. Bu reklamlar, bir HTML ortamı içinde görüntülenir.
Tamamlayıcı reklamlar kullanma
Tamamlayıcı reklamlar kullanmak için aşağıdaki adımları uygulayın:
1. Tamamlayıcı reklamlarınızı ayırın
Öncelikle, ana reklamlarınızla birlikte görüntülemek istediğiniz tamamlayıcı reklamları ayırtmanız gerekir. Tamamlayıcı reklamlar Ad Manager'da trafiğe eklenebilir. Ana reklam başına en fazla altı tamamlayıcı reklam yayınlayabilirsiniz. Tek bir alıcı sayfadaki tüm reklamları kontrol ettiğinde bu teknik, birlikte gösterim olarak da bilinir.
2. Tamamlayıcı reklamlarınızı isteme
Varsayılan olarak, tamamlayıcı reklamlar her reklam isteği için etkinleştirilir.
3. Görüntülü Reklam Ağı tamamlayıcı reklamları
Tamamlayıcı reklamlar oluşturmanın iki yolu vardır:
- Otomatik olarak Google Yayıncı Etiketi'ni (GPT) kullanarak
Tamamlayıcı reklamlarınızı uygulamak için GPT kullanıyorsanız, HTML sayfasında tamamlayıcı reklam alanları olduğu ve bu reklamlar API'ye kayıtlı olduğu (diğer bir deyişle, JavaScript ve HTML'deki div kimliklerinin eşleşmesi) koşuluyla, reklamlar otomatik olarak görüntülenir. GPT kullanmanın bazı avantajları şunlardır:- Tamamlayıcı alan bilinirliği
- VAST yanıtı, HTML sayfasındaki tanımlı alanlardan daha az tamamlayıcı reklam içeriyorsa yayıncı ağından gelen tamamlayıcı dolgu
- Video reklam eksik olduğunda tamamlayıcıyı otomatik doldurma
- Tıkla oynat video oynatıcılar için önceden yüklenmiş tamamlayıcı reklam alanları
HTMLResource
veiFrameResource
dahil olmak üzere otomatik tamamlayıcı oluşturma
- Reklam API'sini manuel olarak kullanarak.
Google Yayıncı Etiketi ile tamamlayıcı reklamları kullanma
Google Yayıncı Etiketi (GPT), HTML tamamlayıcı reklamların sitenizde gösterilmesini otomatik hale getirir. Çoğu yayıncının GPT'yi kullanmasını öneririz. HTML5 SDK, GPT ana web sayfasında yüklendiyse (iFrame'de değil) GPT alanlarını tanır. GPT'yi IMA SDK ile kullanma hakkında daha ayrıntılı bilgiyi GPT belgelerinde bulabilirsiniz.
HTML5 SDK'sını bir IFrame içinde barındırırsanız
Aşağıdaki ölçütlerin her ikisini de karşılıyorsanız GPT tamamlayıcılarınızın doğru şekilde görüntülenmesi için fazladan bir proxy komut dosyası eklemeniz gerekir:
- HTML5 SDK'sını bir IFrame içine yükleyin.
- Ana web sayfasında (IFrame'in dışında) GPT'yi yükleyin.
Tamamlayıcılarınızın bu senaryoda görüntülenmesini sağlamak 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 içine yüklenmiş bir GPT olmamalıdır.
- GPT, başka bir iFrame'e değil, üst sayfada yüklenmelidir.
- Proxy komut dosyası, GPT ile aynı çerçevede (yani ana sayfada) yüklenmelidir.
HTML'de tamamlayıcı reklam alanlarını bildirme
Bu bölümde, GPT kullanarak HTML'de tamamlayıcı reklamların nasıl bildirileceği açıklanmakta ve farklı senaryolar için örnek kod sağlanmaktadır. HTML5 SDK'sı için HTML sayfanıza bazı JavaScript kodları eklemeniz ve tamamlayıcı reklam alanlarını bildirmeniz 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ı uygulaması
- 2. Örnek: Dinamik reklam alanı uygulaması
- 3. Örnek: Önceden yüklenmiş reklam alanları
1. Örnek: Temel reklam alanı uygulaması
Aşağıdaki örnek kod, gpt.js
dosyasının HTML sayfanıza nasıl ekleneceğini ve bir reklam alanının nasıl bildirileceğini gösterir. Bildirilen reklam alanı 728x90 pikseldir. GPT, alanı bu boyutla eşleşen VAST yanıtında döndürülen tamamlayıcı reklamlarla doldurmaya çalışır. Reklam alanları bildirildikten sonra, googletag.display()
işlevi bunları sayfada çağrıldıkları herhangi bir yerde oluşturabilir. Alanlar, tamamlayıcı alanlar oldukları için reklamlar hemen gösterilmez. Bunun yerine ana video reklamın yanında gösterilir.
Uygulama örneğini aşağıda bulabilirsiniz:
<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 kod kalemini görebilirsiniz.
2. Örnek: Dinamik reklam alanı uygulaması
Bazen, sayfa içeriği oluşturulana kadar bir sayfada kaç reklam alanı olduğunu bilemeyebilirsiniz. Aşağıdaki örnek kod, sayfa oluşturulurken reklam alanlarının nasıl tanımlanacağını gösterir. Bu örnek, gerçekte gösterildikleri reklam alanlarını kaydetmesi dışında 1. Örnek ile aynıdır.
Not: Video oynatıcı, reklamları göstermek üzereyken slot alanlarının doldurulmasını ister. Alanların, oynatıcı reklamları görüntülemeden önce 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örüntülemeniz gerekebilir. Tamamlayıcı reklamlar genellikle bir video reklamla birlikte istenir. Bu istek, sayfa yüklendikten sonra gerçekleşebilir. Örneğin, tamamlayıcı reklam, yalnızca kullanıcı bir tıkla oynat videoyu tıkladıktan sonra yüklenebilir. Böyle bir durumda, tamamlayıcı reklam istenmeden önce reklam alanını doldurmak için normal bir reklam isteyebilmeniz gerekir. Bu kullanım alanını desteklemek için tamamlayıcı alanda standart web reklamları gösterebilirsiniz. Web reklamlarının tamamlayıcı alanlara hedeflendiğinden emin olun. Tamamlayıcı alanları, standart web reklam alanlarını hedeflediğiniz şekilde hedefleyebilirsiniz.
Not: Aşağıdaki örnek kod, kalın olarak yazılmış bölüm hariç 1. Örnek için sağlanan kodla bire bir aynıdır. Bu durumda, video reklam biriminiz yerine önceden yüklenen reklamınızın reklam ağını ve birim yolunu sağlarsınız.
Aşağıda, az önce açıklanan uygulamaya ilişkin bir örnek 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.
Ad API ile tamamlayıcı reklamlar kullanma
Bu bölümde, Ad
API'si kullanılarak tamamlayıcı reklamları nasıl göstereceğiniz açıklanmaktadır.
Görüntülü Reklam Ağı tamamlayıcı reklamları
Tamamlayıcı reklamları göstermek için önce AdsManager
ürününden gönderilen AdEvent
etkinliklerinden herhangi biri aracılığıyla bir Ad
nesnesine referans alın.
Tamamlayıcı reklamlar görüntülemenin ana reklamın görüntülenmesiyle aynı zamana denk gelmesi gerektiğinden AdEvent.STARTED
etkinliğini kullanmanızı öneririz.
Ardından, CompanionAd
nesne dizisi almak amacıyla getCompanionAds()
yöntemini çağırmak için bu Ad
nesnesini kullanın. Burada, tamamlayıcı reklamlarda reklam öğesi türü, yakın uyum yüzdesi, kaynak türü ve boyut ölçütleri için filtre ayarlamanızı sağlayan CompanionAdSelectionSettings
öğesini belirtme seçeneğiniz vardır. Bu ayarlar hakkında daha fazla bilgi için
HTML5 API belgelerine bakın.
getCompanionAds
tarafından döndürülen CompanionAd
nesneleri artık aşağıdaki yönergeler ile sayfada tamamlayıcı reklamları görüntülemek için kullanılabilir:
- Sayfada gerekli boyutta bir tamamlayıcı reklam alanı
<div>
oluşturun. -
STARTED etkinliği için etkinlik işleyicinizde
getAd()
çağrısı yaparakAd
nesnesini alın. - Hem tamamlayıcı reklam alanı boyutu hem de
CompanionAdSelectionSettings
ile eşleşen ve ana reklam öğesiyle aynı sıra numarasına sahip olan tamamlayıcı reklamların listesini almak içingetCompanionAds()
aracını kullanın. Dizi özelliği eksik olan reklam öğeleri, sıra numarası 0 olarak değerlendirilir. - İçeriği bir
CompanionAd
örneğinden alın ve bu reklam alanının<div>
iç HTML'si olarak ayarlayın.
Ö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>
Değişken tamamlayıcı reklamlar görüntüleyin
IMA, artık değişken tamamlayıcı reklamları destekliyor. Bu tamamlayıcı reklamlar, reklam alanının
boyutuyla eşleşecek şekilde yeniden boyutlandırılabilir. Üst div öğesinin genişliğinin% 100'ünü doldurur, ardından yüksekliğini tamamlayıcının içeriğine sığacak şekilde yeniden boyutlandırırlar. Bunlar, Ad Manager'da Fluid
tamamlayıcı boyutu kullanılarak ayarlanır. Bu değerin nereye ayarlanacağını görmek için aşağıdaki resme bakın.
GPT değişken tamamlayıcıları
GPT tamamlayıcılarını kullanırken defineSlot()
yönteminin ikinci parametresini güncelleyerek değişken bir tamamlayıcı alan bildirebilirsiniz.
<!-- 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 değişken tamamlayıcıları
Tamamlayıcı reklamlar için Ad API kullanırken google.ima.CompanionAdSelectionSettings.sizeCriteria
öğesini SELECT_FLUID
değerine güncelleyerek değişken bir tamamlayıcı alan bildirebilirsiniz.
<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>