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

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

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>