IMA HTML5 SDK, tam otomatik reklam oynatma listelerini destekler. Bu özellik belirtildiği gibi içeriğe reklam araları ekler. Google Ad Manager göz önünde bulundurmanız gerekir. Ayrıca video oynatıcı kodunu büyük ölçüde basitleştiriyor, Videodan önce, videonun ortasında ve videodan sonra gösterilen reklamlar dahil olmak üzere reklam aralarını desteklemek için gereklidir.
AdsManager
oluşturulurken bircontentPlayback
nesne, getAdsManager aracılığıyla geçirilir. çağrısına bir tıklama URL'si eklemeniz gerekir. Bu nesne geçerli video yer imlecini döndüren bircurrentTime
özelliğine sahip videonun konumu. Aşağıdaki işlemler için HTML5video
öğesi kullanıyorsanız: ilgili öğeyi SDK'ya iletmeniz yeterlidir. Bu nesne İçeriğin oynatılmasının ilerlemesini izlemek için kullanılır. Böylece reklam araları Ad Manager'da belirtilen zamanlarda otomatik olarak eklenir. Ayrıca, SDK, içerik durumunu sizin adınıza yönetmesini istediğinizi bilir.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ılmasını sağlamak için içeriğiniz ne zaman oynatıldığından SDK'ya bunu bildirmeniz gerekir.
sona ermiştir. Bu biraz karmaşıktır çünkü bazı durumlarda SDK videonuzu kullanır.
oynatır. Bu nedenle, SDK'nın yalnızca bu video oynatıcıya
reklam tamamlandığında değil, içeriğinizin tamamı bitmiştir. Bu işlemi,
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
veCONTENT_RESUME_REQUESTED
etkinlikler, reklam araları oynatıldığında içeriği duraklatmak ve devam ettirmek için kullanılır.- Video oynatıcınız sürükle ve ara özelliğini destekliyorsa ve
kullanıcı sürüklerken video oynatıcı güncellenirse, SDK
arasında geçiş yapın.
getAdsManager
parametresi olarak bir özel contentPlayback nesnesi kullanmanız gerekir. Bu kullanım alanının bir örneği için Arama Yapma Sorunu başlıklı makaleyi inceleyin.
Not: İçeriğin oynatılması bittiğinde veya
kullanıcı oynatmayı durdurduysa, AdsLoader.contentComplete öğesini çağırdığınızdan emin olun
kullanarak SDK'ya içeriğin yapıldığını bildirir. SDK, daha sonra
videodan sonra gösterilen reklam arası (zamanlanmışsa) ALL_ADS_COMPLETED
etkinlik, TÜM reklam araları oynatıldığında oluşturulur. Ayrıca,
init()
çağrıldığında içerik izlemenin başladığını ve
her zaman içerik oynatmadan önce init()
adlı kişiyi ara.
Reklam aralarının otomatik olarak oynatılmasını devre dışı bırakma
Bazı durumlarda, SDK'nın reklam aralarını oynatmasını önlemek için
artık onlar için hazırsınız. Bu senaryoda, reklam aralarının otomatik olarak oynatılmasını devre dışı bırakabilirsiniz.
hazır olduğunuzda SDK'ya bunu bildirir. Bununla
yapılandırmaya çalışın. SDK bir reklam arası yükledikten sonra,
AD_BREAK_READY
etkinliği. 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 uygulamayı aşağıda görebilirsiniz.
Aramada sorun
Reklam kurallarını kullanırsanız tıklama ve sürükleme sarmayla ilgili bir sorunla karşılaşabilirsiniz. Özellikle, bir kullanıcı videoyu tıklayıp sürükledikten sonra birkaç saat geçtikten sonra videonun ortasında gösterilen reklam kapsüllerinde, bu kapsüllerden 2 veya daha fazlasının reklamdan önce devam eder. Bu durum, kullanıcının aradığı; SDK'nın, kullanıcı arama sırasında araması yapıldığında reklamın oynatılması gerektiğini düşünebilir. İçerik ne zaman devam ettirildiğinde, ilgili reklamı ve ardından, aramadan bu yana en son yayınlanan reklamı oynatır. Örneğin, aşağıdaki diyagrama bakın:
Bunu çözmenin basit yolu, kullanıcı uygulamayı kullanmaya başladığında SDK'nın kullanıcı bunu isteyene kadar istediği zamanı raporlayın normal oynatmaya devam eder. Bu çözümün görsel temsili için aşağıdaki diyagramda yer alır:
Bu çözüm sayesinde 0:10'luk videonun ortasında gösterilen reklamı doğru şekilde atlayıp yalnızca 0:20'lik videonun ortasında gösterilen reklamı oynatabilirsiniz.
Bu işlem, aşağıda gösterildiği gibi özel bir video yer imleci izleyicisi kullanılarak yapılır. Aşağıdaki kod
gelişmiş HTML5ads.js
şurada bulunan örnek:
indirme sayfasını ziyaret edin.
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ç her platformda çalışır. Mobil cihazda kullanıyorsanız, video etiketinin sarma özelliği doğru bir şekilde uygulanmamıştır ( her zaman yanlış döndürür). Bunu engellemek için kendi kontrolünüzü yapmanız gerekir Kullanıcının video arasında arama yapıp yapmadığına bakmak. Bu yöntem için örnek kod anlatacağım. Aşağıdaki kalın olarak yazılmış satırlar da 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 birlikte SDK artık Ads
cihazınızın currentTime özelliğini kullanıyor
reklam aralarının ne zaman oynatılacağını belirleyecek nesne değil, currentTime
içerik video oynatıcısı.