Reklam oynatma listelerini otomatikleştirme

IMA HTML5 SDK, tamamen otomatik reklam oynatma listelerini destekler. Bu özellik, reklamlarınızı trafiğe eklerken Google Ad Manager'da belirtildiği şekilde reklam aralarını içeriğe ekler. Ayrıca videodan önce, videonun ortasında ve videodan sonra gösterilen reklamlar da 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ı kullanılarak bir contentPlayback nesnesi aktarılır. Bu nesnenin, videonun mevcut oynatma çubuğu konumunu döndüren bir currentTime mülkü olmalıdır. İçeriğinizi görüntülemek için 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, SDK'ya içerik durumunu sizin adınıza yönetmesini istediğinizi de bildirmeniz gerekir.

  var adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; adsManager = adsManagerLoadedEvent.getAdsManager(     videoContent, adsRenderingSettings); // See API reference for contentPlayback.

• Sonraki reklamların oynatılmasını sağlamak için içeriğinizin ne zaman bittiğini SDK'ya bildirmeniz gerekir. Bu işlem biraz karmaşıktır çünkü SDK, bazı durumlarda reklam oynatmak için video oynatıcınızı kullanır. Bu nedenle, SDK'ya yalnızca içeriğinizin sona erdiğini bildirdiğinizden emin olmanız gerekir, reklamın sona erdiğini değil. Bunu yapmak için aşağıdaki kodu kullanabilirsiniz:

  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ükleyerek ilerlemeyi destekliyorsa ve kullanıcı sürüklerken video oynatıcının mevcut zaman özelliği güncelleniyorsa SDK, içeriğin normal şekilde ilerlemesini ve kullanıcının içeriği ilerletmesini ayırt edemez. getAdsManager parametreniz olarak özel bir contentPlayback nesnesi kullanmanız gerekir. Bu kullanım alanına örnek olarak Arama Sorunları başlıklı makaleyi inceleyebilirsiniz.

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

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

Bazı durumlarda, SDK'nın reklam aralarını oynatmasını, hazır olana kadar engellemek isteyebilirsiniz. Bu senaryoda, reklam aralarının otomatik oynatılmasını devre dışı bırakarak SDK'ya reklam arasının oynatılmaya hazır olduğunuzu bildirebilirsiniz. Bu yapılandırmayla 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

Çalışan bir uygulama için aşağıdaki koda bakın.

Aramayla ilgili sorun

Reklam kurallarını kullanıyorsanız tıklayıp sürükleyerek aramayla ilgili bir sorunla karşılaşabilirsiniz. Daha açık belirtmek gerekirse, kullanıcı videoda birden fazla reklam kapsülü geçerek ilerlemek için tıklayıp sürükledikten sonra, içerik devam etmeden önce bu kapsüllerden 2 veya daha fazlasının arka arkaya oynatıldığını görebilir. Bu durum, kullanıcı ilerleme çubuğuyla videoyu ilerletirken video oynatma çubuğu zamanının güncellenmesinden kaynaklanır. SDK, kullanıcı bir reklamı geçerken mevcut zamanı sorguladığı takdirde reklamın oynatılması gerektiğini düşünebilir. İçerik devam ettiğinde, bu reklam ve ardından sarma işleminden sonraki en son reklam oynatılır. Bu sorunun görsel bir temsili için aşağıdaki şemaya bakın:

Kullanıcı aramaya başladığında mevcut zamanı kaydedin ve SDK'nın istediğinde bu zamanı raporlayın. Kullanıcı normal oynatmaya devam edene kadar bu işlemi yapın. Bu çözümün görsel bir temsili için aşağıdaki şemaya bakın:

Bu çözümle, 0:10'luk video içi reklamı uygun şekilde atlar ve yalnızca 0:20'lik video içi reklamı oynatırsınız. Bu işlem, aşağıdaki kod snippet'inde özel bir oynatma çubuğu izleyicisi kullanılarak yapılır. Bu kod, indirme sayfamızda bulunan gelişmiş HTML5 örneğindeki ads.js'te yapılan değişiklikleri (kalın olarak gösterilir) içerir.

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 hariç tüm platformlarda çalışır. Mobil Safari'de video etiketinin seeking özelliği doğru şekilde uygulanmamıştır (her zaman false değerini döndürür). Bu sorunun önüne geçmek için kullanıcının videoda ileri sarıp sarmadığını kontrol etmeniz gerekir. Bu yöntemin örnek kodu aşağıda verilmiştir. Yine de kalın çizgiler, mevcut kodda yapılan değişiklikleri gösterir.

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 birlikte SDK, reklam aralarının ne zaman oynatılacağını belirlemek için içerik video oynatıcının currentTime özelliğini değil, Ads nesnenizin currentTime özelliğini kullanıyor.