Reguły reklam

Pakiet IMA HTML5 SDK obsługuje w pełni automatyczne playlisty reklam. Ta funkcja wstawia przerwy na reklamy w treści zgodnie z Google Ad Manager podczas trafikowania reklam. Znacznie upraszcza też kod odtwarzacza. konieczne do obsługi przerw na reklamy, w tym reklam przed filmem, w jego trakcie i po nim.

  • Podczas tworzenia elementu AdsManager contentPlayback obiekt jest przekazywany za pomocą funkcji getAdsManager . Ten obiekt musi mają właściwość currentTime, która zwraca bieżący suwak odtwarzania; pozycji filmu. Jeśli używasz elementu video HTML5 do wyświetlanie Twoich treści, wystarczy przekazać ten element do SDK. Ten obiekt jest wykorzystywana do śledzenia postępów odtwarzania treści, dzięki czemu przerwy na reklamę automatycznie wstawiane w godzinach określonych w usłudze Ad Manager. Musisz też zezwolić Pakiet SDK wie, że chcesz, aby sam przetwarzał stan treści w Twoim imieniu. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
  • Aby mieć pewność, że reklamy po filmie będą odtwarzane, musisz powiadomić pakiet SDK, gdy Twoje treści na koniec. To trochę podchwytliwe, bo czasami pakiet SDK wykorzystuje Twój film do wyświetlania reklam, więc musisz upewnić się, że pakiet SDK jest informowany tylko wtedy, gdy reklama skończy się oglądać, a nie reklama. Aby to zrobić, użyj poniżej: 
    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 i CONTENT_RESUME_REQUESTED służą do wstrzymywania i wznawiania odtwarzania treści podczas odtwarzania przerw na reklamę.
  • Jeśli Twój odtwarzacz obsługuje funkcję „przeciągnij, by przewinąć”, a bieżąca właściwość czasu to Odtwarzacz aktualizuje się podczas przeciągania przez użytkownika, pakiet SDK nie rozróżnia między normalnym postępem a użytkownikiem przeglądającym je. Musisz użyć niestandardowego obiektu contentOdtwarzanie jako parametru w: getAdsManager. Przykład tego zastosowania znajdziesz w artykule The issues with Seeking (Problem z wyszukiwaniem).

Uwaga: po zakończeniu odtwarzania treści lub użytkownik zatrzymał odtwarzanie, wywołaj AdsLoader.contentComplete , aby zasygnalizować pakiet SDK, że treści są gotowe. Następnie pakiet SDK odtwarza przerwę na reklamę po filmie, jeśli została zaplanowana. ALL_ADS_COMPLETED zdarzenie jest wywoływane po odtworzeniu WSZYSTKICH przerw na reklamę. Ponadto pamiętaj, śledzenie treści rozpoczyna się po wywołaniu usługi init(). zawsze wywołaj init() przed odtworzeniem treści.

Wyłączanie automatycznego odtwarzania przerw na reklamę

W pewnych okolicznościach możesz zdecydować, aby pakiet SDK nie odtwarzał przerw na reklamy do czasu na pewno Ci się uda. W takiej sytuacji możesz wyłączyć automatyczne odtwarzanie przerw na reklamę. zamiast informować pakiet SDK o gotowości do rozpoczęcia przerwy na reklamę. W związku z tym Gdy pakiet SDK załaduje przerwę na reklamę, uruchomi tag AD_BREAK_READY zdarzenie. Gdy odtwarzacz będzie gotowy do rozpoczęcia przerwy na reklamę, można wywołać metodę adsManager.start():

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();
}

Wypróbuj

Poniżej możesz zobaczyć działającą implementację.

Problem z przewijaniem

Jeśli korzystasz z reguł reklamowych, możesz napotkać problem z przewijaniem przez kliknięcie i przeciągnięcie. Konkretnie: gdy użytkownik kliknie i przeciągnie, by przewinąć film, bloków reklamowych w trakcie filmu, mogą zauważyć, że co najmniej 2 takie bloki odtwarzają się jedna po drugiej, wznowienie treści. Przyczyną jest to, że czas odtwarzania suwaka jest aktualizowany, gdy użytkownik wyszukuje; jeśli pakiet SDK przeprowadza ankietę w bieżącym momencie, przeszukuje reklamę, może uznać, że powinna zostać odtworzona. Gdy treść wznowiona, reklama zostanie odtworzona, a potem ostatnia od wyszukiwania. Dla wizualne przedstawienie tego problemu, patrz poniższy schemat:

Prostym sposobem rozwiązania tego problemu jest zapisanie aktualnej godziny, w której użytkownik zaczyna i zgłaszać, gdy pakiet SDK o nie poprosi, dopóki użytkownik wznowi normalne odtwarzanie. Wizualną prezentację tego rozwiązania znajdziesz w ten schemat:

Dzięki temu rozwiązaniu właściwie pomijasz reklamę w trakcie filmu 0:10 i odtwarzasz tylko reklamę 0:20. Robi się to za pomocą niestandardowego trackera odtwarzania, jak pokazano poniżej. Kod poniżej zawiera modyfikacje (pogrubione) elementu ads.js w zaawansowanym formacie HTML5 próbka jest dostępna na stronę pobierania.

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_);
};

Znane problemy z mobilną przeglądarką Safari

Ta metoda powinna działać na każdej platformie oprócz mobilnej Safari. Na telefonie w przeglądarce Safari, właściwość wyszukiwania w tagu wideo nie jest poprawnie zaimplementowana (np. zawsze zwraca wartość fałsz). Aby to obejść, musisz samodzielnie sprawdzić czy użytkownik przewija film. Przykładowy kod tej metody co dalej. Również poniższe pogrubione wiersze oznaczają modyfikacje istniejącego kodu.

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_);
};

W związku z tymi zmianami pakiet SDK używa teraz właściwości currentTime obiektu Ads obiektu, aby określić, kiedy mają być odtwarzane przerwy na reklamę, a nie właściwości currentTime funkcji w odtwarzaczu wideo.