Doğrusal görüntülü reklamları etkinleştirme

HTML5 için IMA SDK, doğrusal video reklamların yanı sıra doğrusal görüntülü reklamları da destekler. Doğrusal video reklamlar hakkında ayrıntılı bilgi için Video Çözümleri reklamcılığına genel bakış bölümünü inceleyin.

Doğrusal görüntülü reklamları etkinleştirmek, reklam alanınız için ek talep oluşturabilir. Bunun nedeni, doğrusal görüntülü reklamların reklam alanınız için doğrusal video reklamlarla rekabet etmesidir. IMA, doğrusal görüntülü reklamların oluşturulmasını işler ancak video İçerik Tespit'i ayarlamanızı gerektirir. IMA içerik tespitinin uygulanması, içerik oynatıcınızı reklam oynatıcınızla aynı kaynak çerçevede mi yoksa reklam oynatıcınızı çapraz kaynak çerçevede mi oluşturduğunuza bağlı olarak farklılık gösterir.

Bu kılavuzda, doğrusal görüntülü reklamları etkinleştirmek için İçerik Tespit'i ayarlama, içerik video oynatıcısını değiştirme ve içerik sinyallerini toplamayı durdurma konuları ele alınmaktadır.

İçerik Tespit'i ayarlama

Reklam istekleri için doğrusal görüntülü reklamları etkinleştirmek üzere aşağıdakileri yapın:

Aynı kaynak

IMA SDK, içerik oynatıcınızla aynı kaynağı paylaşıyorsa aşağıdakilerden birini yapın:

  • Tercih edilen Video oynatıcıyı AdsManagerLoadedEvent.getAdsManager() çağrısına iletin. getAdsManager(), currentTime özelliği içeren bir nesne iletmenize olanak tanısa da İçerik Tespit özelliğini desteklemek için getAdsManager() yöntemine bir HTMLVideoElement örneği iletmeniz gerekir.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • AdsManagerLoadedEvent.getAdsManager() çağrısı sırasında içerik oynatıcıyı sağlayamıyorsanız video oynatıcıyla AdsManager.configureAdsManager() yöntemini çağırın. İçerik Tespitinin çalışması için HTMLVideoElement olması gerekir.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

İçerik Tespit'i ayarlamazsanız Google reklam sunucuları, doğrusal görüntülü reklam yayınlamayı durdurabilir.

İçerik oynatıcınız, IMA SDK'yı yüklediğiniz kaynakla aynı kaynaktaysa içerik oynatıcıyı değiştirme veya içerik sinyali toplamayı durdurma işlemlerini gerçekleştirmek için IMA uygulamanızda herhangi bir değişiklik yapmanız gerekmez.

Çapraz kaynak

IMA SDK, içerik oynatıcınızla çapraz kaynaklıysa IMA, CrossOriginProxy sınıfı aracılığıyla içerik algılama sinyalleri toplayabilir. Bu sınıf, IMA SDK'nın doğru doğrusal görüntülü reklam yerleşimini doğrulamasını ve video içeriğinin konusuyla ilgili sinyalleri toplamasını sağlar. IMA SDK'yı alanlar arası bir iFrame'e yerleştirirseniz CrossOriginProxy sınıfını uygulamanız gerekir.

CrossOriginProxy sınıfını uygulamadan içerik oynatıcınızı IMA SDK'ya çapraz kaynak olarak yerleştirmeye devam ederseniz Google reklam sunucuları doğrusal görüntülü reklam yayınlamayı durdurabilir.

CrossOriginProxy sınıfını uygulamanıza yüklemek için aşağıdakileri yapın:

  1. HTML dosyanızda ima_proxy.js dosyasını içe aktarın:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. main.js dosyasında CrossOriginProxy örneğini alın.

  3. Sayfanızda veya uygulamanızda reklam gösteren tüm video oynatıcıların dizisiyle setVideoElements() yöntemini çağırın.

Reklam isteği göndermeden önce video öğelerini setVideoElements() çağrısıyla CrossOriginProxy örneğine iletmeniz gerekir. Aşağıdaki örnekte, tek bir içerik video oynatıcısı içeren bir dizi iletilmektedir:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

İçerik video oynatıcısını değiştirme

Başka bir içerik video oynatıcısına geçerseniz veya başka bir içerik video oynatıcısı eklerseniz setVideoElements() yöntemine yeni bir dizi iletmeniz gerekir. Yeni setVideoElements() çağrısını yaptığınızda IMA, yeni içerik oynatıcı için sinyal toplamaya başlar ve önceki çağrılarda iletilen içerik oynatıcılar için sinyal toplamayı durdurur.

Aşağıdaki örnekte, yeni video öğesi CrossOriginProxy sınıfına iletilmektedir:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Reklamlar tamamlandığında sinyal toplamayı durdurma

Reklamları oynatmayı bitirip AdsLoader.destroy() yöntemini çağırdığınızda, boş bir diziyle setVideoElements() yöntemini de çağırmanız gerekir. setVideoElements() çağrısını boş bir diziyle yapmak, IMA'nın tuttuğu içerik oynatıcılarına yapılan referansı kaldırır ve bellek sızıntısı sorunlarını önler.