Reklam kuralları

IMA HTML5 SDK, tamamen otomatik reklam oynatma listelerini destekler. Bu özellik, reklamlarınız trafiğe eklenirken Google Ad Manager'da belirtildiği gibi içeriğe reklam araları ekler. Ayrıca videodan önce, videonun ortasında ve videodan sonra gösterilen reklamlar dahil olmak üzere reklam aralarını desteklemek için gereken video oynatıcı kodunu büyük ölçüde basitleştirir.

  • AdsManager oluşturulurken, getAdsManager çağrısıyla bir contentPlayback nesnesi aktarılır. Bu nesne, videonun mevcut video yer imleci konumunu döndüren bir currentTime özelliğine sahip olmalıdır. İçeriğinizi görüntülemek için bir HTML5 video öğesi kullanıyorsanız bu öğeyi SDK'ya iletmeniz yeterlidir. Bu nesne, içerik oynatmanın ilerleme durumunu izlemek için kullanılır. Böylece reklam araları Ad Manager'da belirtilen zamanlarda otomatik olarak eklenir. Ayrıca, içerik durumunu sizin adınıza işlemesini istediğinizi SDK'ya bildirmeniz gerekir. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
  • Videodan sonra gösterilen reklamların oynatıldığından emin olmak için içeriğiniz bittiğinde SDK'yı bilgilendirmeniz gerekir. Bu, biraz zordur. Bunun nedeni, bazı durumlarda SDK'nın reklamları oynatmak için video oynatıcınızı kullanmasıdır. Bu yüzden, SDK'ya bir reklam bittiğinde değil, yalnızca içeriğinizin bittiğinde bilgi verdiğinizden emin olmanız gerekir. Bu işlemi, aşağıdaki kodu kullanarak yapabilirsiniz: 
    var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}
  • CONTENT_PAUSE_REQUESTED ve CONTENT_RESUME_REQUESTED etkinlikleri, reklam araları oynatıldığında içeriği duraklatmak ve devam ettirmek için kullanılır.
  • Video oynatıcınız, sürüklemek için sürüklemeyi destekliyorsa ve kullanıcı sürüklerken video oynatıcının geçerli zaman özelliği güncellenirse SDK, içeriğin normal bir şekilde ilerleme durumu ile içeriği inceleyen bir kullanıcı arasında ayrım yapamaz. getAdsManager için parametreniz olarak özel bir contentPlayback nesnesi kullanmanız gerekir. Bu kullanım alanının bir örneği için Arama Sorunu bölümüne bakın.

Not: İçeriğin oynatılması sona erdiğinde veya kullanıcı oynatmayı durdurduğunda, SDK'ya içeriğin bittiğini bildirmek için AdsLoader.contentComplete'ı çağırdığınızdan emin olun. Daha sonra SDK, planlanmışsa videodan sonra gösterilen reklam arasını oynatır. TÜM reklam araları oynatıldığında ALL_ADS_COMPLETED etkinliği yükseltilir. Ayrıca, içerik izlemenin init() çağrıldığında başladığını ve içeriği oynatmadan önce her zaman init() yöntemini çağırmanız gerektiğini unutmayın.

Reklam aralarının otomatik olarak oynatılmasını devre dışı bırakma

Bazı durumlarda, siz hazır olana kadar SDK'nın reklam aralarını oynatmasını engelleyebilirsiniz. Bu senaryoda, reklam arasını oynatmaya hazır olduğunuzda SDK'ya bildirmek için reklam aralarının otomatik oynatılmasını devre dışı bırakabilirsiniz. Bu yapılandırmada, SDK bir reklam arası yükledikten sonra bir AD_BREAK_READY etkinliği tetikler. Oynatıcınız reklam arasının başlamasına hazır olduğunda adsManager.start() işlevini çağırabilirsiniz:

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Deneyin

Aşağıda çalışan bir uygulama görebilirsiniz.

Projedeki görevleri

Reklam kurallarını kullanırsanız tıkla ve sürükleyerek sarma özelliğiyle ilgili bir sorunla karşılaşabilirsiniz. Özellikle, bir kullanıcı reklamı tıklayıp videonun ortasında gösterilen birden fazla kapsülün ardından video içinde arama yapmak için sürükledikten sonra, içerik devam ettirilmeden önce bu kapsüllerden 2 veya daha fazlasının arka arkaya oynatıldığını görebilir. Bu durum, kullanıcı arama yaparken video yer imleci zamanının güncellenmesinden kaynaklanır. SDK, kullanıcı bir reklamı geçerken geçerli zamana ait anket yaparsa o reklamın oynatılması gerektiğini düşünebilir. İçerik devam ettiğinde önce bu reklamı ve ardından aramadan sonraki en yeni reklamı oynatır. Bu sorunun görsel bir temsili için aşağıdaki şemaya bakın:

Bu sorunu çözmenin basit yolu, kullanıcının aramaya başladığı geçerli zamanı kaydetmek ve SDK'nın istediği zamanı, kullanıcı normal oynatmaya devam edene kadar bildirmektir. Bu çözümün görsel temsilini görmek için aşağıdaki şemaya bakın:

Bu çözümle uygun şekilde, videonun ortasında gösterilen 0:10'luk reklamı atlar ve yalnızca 0:20'lik dilimde gösterilen reklamı oynatabilirsiniz. Bu işlem, aşağıda gösterildiği gibi özel bir video yer imleci izleyici kullanılarak yapılır. Aşağıdaki kod, indirme sayfamızda bulunan gelişmiş HTML5 örneğindeki ads.js değişikliklerini (kalın karakterlerle gösterilmiştir) içermektedir.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Mobil Safari ile ilgili bilinen sorunlar

Bu yöntem, mobil Safari dışındaki her platformda çalışır. Mobil Safari'de, video etiketinin arama özelliği düzgün bir şekilde uygulanmaz (her zaman yanlış döndürür). Bunu engellemek için kullanıcının videoyu arayıp istemediğini kontrol etmek üzere kendi kontrolünüzü yapmanız gerekir. Bu yöntemin örnek kodu aşağıda verilmiştir. Aşağıdaki kalın olarak yazılmış satırlar mevcut kodda yapılan değişikliklerdir.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Bu değişikliklerle SDK, reklam aralarının ne zaman oynatılacağını belirlemek için artık içerik video oynatıcısının currentTime özelliğini değil, Ads nesnenizin currentTime özelliğini kullanır.