Bu sayfa, Cloud Translation API ile çevrilmiştir.

Tamamlayıcı reklamlar

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 ve iFrameResource 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ı yaparak Ad 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çin getCompanionAds() 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.

Ad Manager'ın tamamlayıcı reklam ayarlarını gösteren resim. Tamamlayıcı boyutları seçeneğini vurgular.

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>