Reguły reklam

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

  • Podczas tworzenia AdsManager obiekt contentPlayback jest przekazywany przez wywołanie getAdsManager. Ten obiekt musi mieć właściwość currentTime, która zwraca bieżącą pozycję suwaka odtwarzania filmu. Jeśli do wyświetlania treści używasz elementu video HTML5, możesz go po prostu przekazać do SDK. Ten obiekt służy do śledzenia postępu odtwarzania treści, dzięki czemu przerwy na reklamy są automatycznie wstawiane w czasie określonym w usłudze Ad Manager. Musisz też poinformować pakiet SDK, że chcesz, aby obsługiwał 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 powiadamiać pakiet SDK o zakończeniu treści. To trochę skomplikowane, ponieważ w niektórych przypadkach pakiet SDK wyświetla reklamy za pomocą odtwarzacza wideo. Pamiętaj więc, by informować pakiet SDK tylko o zakończeniu treści, a nie zakończeniu reklamy. Aby to zrobić, użyj tego kodu:
    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);
  ...
}
  • Zdarzenia CONTENT_PAUSE_REQUESTED i CONTENT_RESUME_REQUESTED służą do wstrzymywania i wznawiania treści podczas odtwarzania przerw na reklamę.
  • Jeśli Twój odtwarzacz wideo obsługuje przeciąganie, aby przewijać, a bieżąca właściwość czasu odtwarzacza jest aktualizowana podczas przeciągania przez użytkownika, pakiet SDK nie odróżnia filmu od początku od tego, który użytkownik przewija treści. Musisz użyć niestandardowego obiektu contentPlayback jako parametru getAdsManager. Przykład tego zastosowania znajdziesz w artykule Problemy z szukaniem.

Uwaga: po zakończeniu odtwarzania treści lub zatrzymaniu odtwarzania przez użytkownika należy wywołać metodę AdsLoader.contentComplete, aby zasygnalizować pakietowi SDK, że treść została zakończona. Następnie pakiet SDK odtwarza przerwę na reklamę po filmie, jeśli została ona zaplanowana. Zdarzenie ALL_ADS_COMPLETED jest wywoływane po odtworzeniu WSZYSTKICH przerw na reklamę. Pamiętaj też, że śledzenie treści rozpoczyna się po wywołaniu elementu init() i zawsze należy wywołać metodę init() przed odtworzeniem treści.

Wyłączanie automatycznego odtwarzania przerw na reklamy

W niektórych przypadkach możesz chcieć uniemożliwić pakietowi SDK odtwarzanie przerw na reklamę, dopóki nie będziesz mieć na to czasu. W takiej sytuacji możesz wyłączyć automatyczne odtwarzanie przerw na reklamę, a pakiet SDK poinformował pakiet SDK o tym, kiedy przerwa na reklamę jest gotowa do odtwarzania. W przypadku tej konfiguracji po załadowaniu przez pakiet SDK przerwy na reklamę wywołuje ono zdarzenie AD_BREAK_READY. Gdy odtwarzacz jest gotowy do rozpoczęcia przerwy na reklamę, możesz wywołać funkcję 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 znajdziesz działającą implementację.

Problem z przewijaniem

Jeśli używasz reguł reklamowych, możesz mieć problem z przewijaniem metodą „kliknij i przeciągnij”. W szczególności, gdy użytkownik kliknie i przeciągnie film, aby przewinąć film poza bloki reklamowe w trakcie filmu, może zobaczyć, że co najmniej 2 z nich zostaną odtworzone, zanim treści zostaną wznowione. Jest to spowodowane tym, że czas odtwarzania filmu jest aktualizowany podczas wyszukiwania treści przez użytkownika. Jeśli pakiet SDK przeprowadzi ankietę w czasie, gdy użytkownik przegląda reklamę, może uznać, że reklama powinna być odtworzona. Po wznowieniu treści odtwarzana jest reklama, a następnie wyświetlana jako ostatnia. Ten problem możesz zobaczyć na tej ilustracji:

Najprostszym sposobem rozwiązania tego problemu jest zaoszczędzenie czasu, który użytkownik zacznie wyszukiwać, i zgłoszenie tego czasu, gdy pakiet SDK poprosi o to do czasu wznowienia normalnego odtwarzania. Działanie tego rozwiązania znajdziesz na diagramie poniżej:

Dzięki temu rozwiązaniu możesz prawidłowo pominąć reklamę 0:10 w trakcie filmu i odtworzyć tylko 0:20. Użyjesz do tego niestandardowego suwaka odtwarzania, jak pokazano poniżej. Poniższy kod zawiera zmiany (wyróżnione pogrubieniem) elementu ads.js w zaawansowanym przykładowym kodzie HTML5 dostępnym na naszej stronie 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 wszystkich platformach z wyjątkiem mobilnej wersji Safari. W przeglądarce mobilnej Safari właściwość „lookup” w tagu wideo nie jest prawidłowo zaimplementowana (zawsze zwraca wartość „false”). Aby obejść ten problem, sprawdź, czy użytkownik przewija film. Poniżej znajduje się przykładowy kod tej metody. Poniższe pogrubione wiersze stanowią modyfikacje dotychczasowego 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_);
};

Po wprowadzeniu tych zmian pakiet SDK używa teraz właściwości currentTime obiektu Ads, a nie właściwości currentTime odtwarzacza treści wideo, do określania, kiedy mają być odtwarzane przerwy na reklamę.