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 bircontentPlayback
nesnesi aktarılır. Bu nesne, videonun mevcut video yer imleci konumunu döndüren bircurrentTime
özelliğine sahip olmalıdır. İçeriğinizi görüntülemek için bir HTML5video
öğ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
veCONTENT_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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=7&hl=tr)
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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=7&hl=tr)
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.