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-eş ilişkisi denir.
Video ve yer paylaşımı 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
Ana reklamlarınızla birlikte göstermek istediğiniz tamamlayıcı reklamları öncelikle ayırtmanız gerekir. Tamamlayıcı reklamlar Ad Manager'da trafiğe eklenebilir. Ana reklam başına en fazla altı eşlik eden 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. Görüntülü tamamlayıcı reklamlar
Arkadaş reklamları iki şekilde oluşturulabilir:
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 (yani JavaScript ve HTML'deki div ID'si eşleşmelidir) otomatik olarak gösterilir. GPT kullanmanın bazı avantajları şunlardır:
- Tamamlayıcı slot 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 olarak 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.
Ad API'yi kullanarak manuel olarak.
Google Yayıncı Etiketi ile tamamlayıcı reklamları kullanma
Google Yayıncı Etiketi (GPT), sitenizde HTML eşlik eden reklamların gösterimini 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 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ı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çine GPT yüklenmemelidir.
- GPT, başka bir iFrame'de değil, üst sayfada yüklenmelidir.
- Proxy komut dosyası, GPT ile aynı çerçeveye (yani ana sayfaya) yüklenmelidir.
HTML'de tamamlayıcı reklam alanları 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ı için HTML sayfanıza biraz JavaScript eklemeniz ve tamamlayıcı reklam alanlarını tanımlamanız 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 ekleneceği ve bir reklam alanının nasıl beyan edileceği gösterilmektedir. Bildirilen reklam alanı 728x90 pikseldir. GPT, VAST yanıtında döndürülen ve bu boyuta uygun tüm tamamlayıcı reklamlarla alanı doldurmaya çalışır. Reklam alanları bildirildikten sonra googletag.display()
işlevi, sayfada çağrıldığı her yerde bu alanları oluşturabilir. Alanlar tamamlayıcı alanlar olduğundan reklamlar hemen gösterilmez. Bunun yerine ana video reklamın yanında görünürler.
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ı gerçekten gösterildikleri yerde kaydetmesi dışında 1. örnekle 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 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 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, eşlik eden yuvaları hedeflediğinden emin olun. Yardımcı alanları, standart web reklam alanlarını hedeflediğiniz şekilde hedefleyebilirsiniz.
Yukarıda açıklanan uygulamanın bir örneğini aşağıda bulabilirsiniz:
<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.
Ad API ile yardımcı reklamları kullanma
Bu bölümde, Ad API kullanılarak tamamlayıcı reklamların nasıl görüntüleneceği açıklanmaktadır.
Görüntülü tamamlayıcı reklamlar
Arkadaş reklamları göstermek için öncelikle AdsManager öğesinden 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 gelmelidir. Bu nedenle AdEvent.STARTED etkinliğini kullanmanızı öneririz.
Ardından, CompanionAd nesnelerinin dizisini almak için Ad nesnesini kullanarak getCompanionAds() işlevini çağırın. Burada CompanionAdSelectionSettings seçeneğini belirleyebilirsiniz. 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 filtre uygulamanıza olanak tanır.
Bu ayarlar hakkında daha fazla bilgi için IMA CompanionAdSelectionSettings API belgelerine bakın.
getCompanionAds tarafından döndürülen CompanionAd 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ğinin etkinlik işleyicisinde,AdnesnesinigetAd()işlevini çağırarak alın.- Hem tamamlayıcı reklam alanı boyutuna 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. - Bir
CompanionAdörneğinden içeriği 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 gösterme
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. Ad Manager'da Fluid tamamlayıcı boyutu kullanılarak ayarlanır. Bu değeri nerede ayarlayacağınızla ilgili olarak aşağıdaki resme bakın.
GPT esnek 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ı
Tamamlayıcı reklamlar için Ad API'yi kullanırken google.ima.CompanionAdSelectionSettings.SizeCriteria değerini SELECT_FLUID olarak güncelleyerek akışkan 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>