Sayfa içi HTML reklam alanlarınızı video veya yer paylaşımı 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 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
Yardımcı reklamları kullanmak için aşağıdaki adımları uygulayın:
1. Tamamlayıcı reklamlarınızı ayırtın
Öncelikle ana reklamlarınızla birlikte göstermek istediğiniz tamamlayıcı reklamları ayırtmanız gerekir. Yardımcı 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 (GPT) kullanılarak.
Tamamlayıcı reklamlarınızı uygulamak için GPT kullanıyorsanız HTML sayfasında tamamlayıcı reklam alanları bildirildiği ve bu reklamlar API'ye kaydedildiği sürece (JavaScript ve HTML'deki div ID'nin eşleşmesi gerekir) otomatik olarak gösterilir. GPT kullanmanın bazı avantajları şunlardır:
- Tamamlayıcı alan farkındalığı.
- VAST yanıtı, HTML sayfasında tanımlı alanlardan daha az tamamlayıcı reklam içeriyorsa yayıncı ağından tamamlayıcı dolgu.
- Video reklam eksikse tamamlayıcı reklamı otomatik doldurma
- Tıkla oynat video oynatıcıları için önceden yüklenmiş tamamlayıcı reklam alanları.
HTMLResourceveiFrameResourcedahil olmak üzere otomatik eşlik eden öğe oluşturma.
Reklam API'sini kullanarak manuel olarak.
Google Yayıncı Etiketi ile tamamlayıcı reklamları kullanma
Google Yayıncı Etiketi (GPT), sitenizde HTML eşlikçi reklamların gösterilmesini otomatikleştirir. Çoğu yayıncının GPT'yi kullanmasını öneririz. HTML5 SDK, GPT ana web sayfasına (IFrame'de değil) yüklendiyse GPT yuvaları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ıyorsanız
Aşağıdaki ölçütlerin her ikisini de karşılıyorsanız GPT yardımcı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'in dışında) yükleyin.
Bu senaryoda yardımcılarınızın 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'in içinde GPT yüklenmemelidir.
- GPT, başka bir iFrame'de 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 kodlar verilmektedir. HTML5 SDK'sında, HTML sayfanıza biraz JavaScript eklemeniz ve tamamlayıcı reklam alanlarını bildirmeniz gerekir.
- 1. örnek: Temel reklam alanı uygulaması
- 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 dahil edileceği ve bir reklam alanının nasıl bildirileceği gösterilmektedir. Bildirilen reklam alanı 728x90 pikseldir. GPT, VAST yanıtında döndürülen ve bu boyuta uyan tamamlayıcı reklamlarla alanı doldurmaya çalışır. Reklam alanları bildirildikten sonra googletag.display()
işlevi, sayfada çağrıldığı her yerde bunları oluşturabilir. Alanlar tamamlayıcı alanlar olduğundan reklamlar hemen gösterilmez. Bunun yerine ana video reklamla birlikte gösterilirler.
Uygulama ö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'e bakabilirsiniz.
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 kodda, sayfa oluşturulurken reklam alanlarının nasıl tanımlanacağı gösterilmektedir. Bu örnek, reklam alanlarının gerçekte gösterildiği yerleri kaydetmesi dışında 1. Örnek ile aynıdır.
<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 inceleyebilirsiniz.
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 gerçekleşebilir. Örneğin, tamamlayıcı reklam yalnızca kullanıcı bir 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 yardımcı reklam alanında standart web reklamları gösterebilirsiniz. Web reklamlarının tamamlayıcı alanları hedeflediğinden emin olun. Yardımcı alanları, standart web reklam alanlarını hedeflediğiniz şekilde hedefleyebilirsiniz.
Az önce açıklanan uygulamanın bir örneğini aşağıda görebilirsiniz:
<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 inceleyebilirsiniz.
Reklam API'si ile eşlik eden reklamları kullanma
Bu bölümde, Ad API'yi kullanarak tamamlayıcı reklamların nasıl görüntüleneceği açıklanmaktadır.
Tamamlayıcı görüntülü reklamlar
Arkadaş reklamları göstermek için önce Ad nesnesine AdsManager öğesinden gönderilen AdEvent etkinliklerinden herhangi biri aracılığıyla referans alın. Tamamlayıcı reklamların gösterilmesi, ana reklamın gösterilmesiyle aynı zamana denk gelmelidir. Bu nedenle AdEvent.STARTED etkinliğinin kullanılmasını öneririz.
Ardından, Ad nesnesini kullanarak getCompanionAds() işlevini çağırıp CompanionAd nesnelerinden oluşan bir dizi alın. Burada CompanionAdSelectionSettings seçeneğini belirtebilirsiniz. Bu seçenek, reklam öğesi türü, yakın eşleşme yüzdesi, kaynak türü ve boyut ölçütleri için eşlik eden reklamlara filtreler uygulamanıza olanak tanır.
Bu ayarlar hakkında daha fazla bilgi için IMA CompanionAdSelectionSettings API belgelerine bakın.
CompanionAd tarafından döndürülen getCompanionAds nesneleri artık aşağıdaki kurallar kullanılarak sayfada eşlik eden reklamları göstermek için kullanılabilir:
- Sayfada gerekli boyutta bir tamamlayıcı reklam alanı
<div>oluşturun. STARTEDetkinliğine yönelik etkinlik işleyicinizde,getAd()işlevini çağırarakAdnesnesini alın.- Hem tamamlayıcı reklam alanı boyutuyla hem de
getCompanionAds()ile eşleşen ve ana reklam öğesiyle aynı sıra numarasına sahip tamamlayıcı reklamların listesini almak içinCompanionAdSelectionSettingskullanın. Sıra özelliği eksik olan reklam öğeleri, sıra numarası 0 olarak kabul edilir. - İçeriği bir
CompanionAdörneğinden alın ve bu reklam alanının<div>öğesinin 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>
Akışkan tamamlayıcı görüntülü reklamlar yayınlama
IMA artık değişken tamamlayıcı reklamları destekliyor. Bu yardımcı reklamlar, reklam alanının boyutuna uyacak şekilde yeniden boyutlandırılabilir. Üst div'in genişliğinin% 100'ünü doldurur, ardından yüksekliğini eşlik eden reklamın içeriğine uyacak şekilde yeniden boyutlandırır. Bu boyutlar, Ad Manager'da Fluid tamamlayıcı boyutu kullanılarak ayarlanır. Bu değeri nerede ayarlayacağınızı görmek için aşağıdaki resme bakın.
GPT akışkan eşleri
GPT tamamlayıcılarını kullanırken defineSlot() yönteminin ikinci parametresini güncelleyerek akışkan 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 akışkan eşlik eden reklamları
Arkadaş reklamları için Ad API'yi kullanırken google.ima.CompanionAdSelectionSettings.SizeCriteria değerini SELECT_FLUID değeriyle güncelleyerek akışkan bir arkadaş reklamı 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>