विज्ञापन प्लेलिस्ट को ऑटोमेट करना

IMA HTML5 SDK टूल, अपने-आप चलने वाली विज्ञापन प्लेलिस्ट के साथ काम करता है. यह सुविधा, आपके विज्ञापनों को ट्रैफ़िक करते समय, कॉन्टेंट में विज्ञापन के लिए ब्रेक डालती है. यह ब्रेक, Google Ad Manager में बताए गए तरीके के हिसाब से डाला जाता है. इससे, वीडियो प्लेयर कोड को भी आसान बना दिया जाता है, जो विज्ञापन के लिए ब्रेक के साथ काम करता है. इसमें, वीडियो शुरू होने से पहले, बीच में, और वीडियो खत्म होने के बाद दिखने वाले विज्ञापन शामिल हैं.

• AdsManager बनाते समय, getAdsManager कॉल का इस्तेमाल करके, contentPlayback ऑब्जेक्ट पास किया जाता है. इस ऑब्जेक्ट में currentTime प्रॉपर्टी होनी चाहिए, जो वीडियो के मौजूदा प्लेलिस्ट का पता लगाती है. अगर कॉन्टेंट दिखाने के लिए, एचटीएमएल5 video एलिमेंट का इस्तेमाल किया जा रहा है, तो उस एलिमेंट को SDK टूल में पास किया जा सकता है. इस ऑब्जेक्ट का इस्तेमाल, कॉन्टेंट के चलने की प्रोग्रेस को ट्रैक करने के लिए किया जाता है, ताकि Ad Manager में तय किए गए समय पर विज्ञापन के लिए ब्रेक अपने-आप डाले जा सकें. आपको एसडीके टूल को यह भी बताना होगा कि आपको अपनी ओर से कॉन्टेंट की स्थिति मैनेज करने के लिए, उसे क्या करना है.

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

• पोस्ट-रोल चलने की पुष्टि करने के लिए, आपको SDK टूल को यह बताना होगा कि आपका कॉन्टेंट कब खत्म हो गया. यह थोड़ा मुश्किल है, क्योंकि कुछ मामलों में SDK टूल, विज्ञापन दिखाने के लिए आपके वीडियो प्लेयर का इस्तेमाल करता है. इसलिए, आपको यह पक्का करना होगा कि आपने SDK टूल को सिर्फ़ यह जानकारी दी हो कि आपका कॉन्टेंट कब खत्म हो गया है, न कि विज्ञापन कब खत्म हो गया है. ऐसा करने के लिए, यहां दिए गए कोड का इस्तेमाल करें:

  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 और CONTENT_RESUME_REQUESTED इवेंट का इस्तेमाल, विज्ञापन के लिए ब्रेक के दौरान कॉन्टेंट को रोकने और फिर से चलाने के लिए किया जाता है.
• अगर आपका वीडियो प्लेयर, वीडियो पर कर्सर घुमाकर आगे-पीछे जाने की सुविधा देता है और उपयोगकर्ता वीडियो पर कर्सर घुमाते समय, वीडियो प्लेयर की मौजूदा समय प्रॉपर्टी अपडेट होती है, तो SDK टूल, वीडियो के सामान्य तरीके से आगे बढ़ने और उपयोगकर्ता के वीडियो पर कर्सर घुमाने के बीच का अंतर नहीं कर सकता. आपको getAdsManager के पैरामीटर के तौर पर, कस्टम contentPlayback ऑब्जेक्ट का इस्तेमाल करना होगा. इस्तेमाल के इस उदाहरण का उदाहरण देखने के लिए, वीडियो पर आगे-पीछे जाने की समस्या देखें.

ध्यान दें: जब कॉन्टेंट चलना बंद हो जाए या उपयोगकर्ता ने कॉन्टेंट चलाना बंद कर दिया हो, तो SDK टूल को यह सिग्नल देने के लिए, AdsLoader.contentComplete को कॉल करना न भूलें कि कॉन्टेंट चलना बंद हो गया है. इसके बाद, अगर कोई विज्ञापन ब्रेक शेड्यूल किया गया है, तो SDK टूल उसे चलाता है. विज्ञापन के लिए सभी ब्रेक चलने के बाद, ALL_ADS_COMPLETED इवेंट ट्रिगर होता है. इसके अलावा, ध्यान रखें कि init() को कॉल करने पर कॉन्टेंट ट्रैकिंग शुरू होती है. इसलिए, कॉन्टेंट चलाने से पहले, आपको हमेशा init() को कॉल करना चाहिए.

विज्ञापन के लिए ब्रेक अपने-आप चलने की सुविधा बंद करना

कुछ मामलों में, हो सकता है कि आप SDK टूल को विज्ञापन के लिए ब्रेक चलाने से रोकना चाहें, जब तक कि आप इसके लिए तैयार न हों. इस स्थिति में, विज्ञापन के लिए ब्रेक अपने-आप चलने की सुविधा बंद की जा सकती है. इसके बजाय, एसडीके टूल को यह बताया जा सकता है कि विज्ञापन के लिए ब्रेक कब चलाया जाए. इस कॉन्फ़िगरेशन के साथ, SDK टूल के विज्ञापन के लिए ब्रेक लोड करने के बाद, यह एक AD_BREAK_READY इवेंट ट्रिगर करता है. जब आपका प्लेयर विज्ञापन के लिए ब्रेक शुरू करने के लिए तैयार हो, तो आपके पास 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();
}

इसे आज़माएं

इसे लागू करने के लिए, यहां दिया गया कोड देखें.

वीडियो पर आगे-पीछे जाने में समस्या आना

विज्ञापन नियमों का इस्तेमाल करने पर, क्लिक करके खींचने और छोड़ने की सुविधा में समस्या आ सकती है. खास तौर पर, जब कोई उपयोगकर्ता वीडियो में आगे बढ़ने के लिए, क्लिक करके और खींचकर, वीडियो के बीच में दिखने वाले कई पॉड को पीछे छोड़ देता है, तो वीडियो फिर से शुरू होने से पहले उसे उनमें से दो या उससे ज़्यादा पॉड एक के बाद एक चलते हुए दिख सकते हैं. ऐसा इसलिए होता है, क्योंकि उपयोगकर्ता वीडियो में आगे या पीछे जाने के दौरान, वीडियो प्लेलिस्ट के टाइम बार में बदलाव होता रहता है. अगर उपयोगकर्ता किसी विज्ञापन को स्किप करके आगे बढ़ता है और SDK टूल मौजूदा समय के लिए पोल करता है, तो हो सकता है कि वह विज्ञापन चलाने की कोशिश करे. वीडियो फिर से शुरू होने पर, वह विज्ञापन चलता है. इसके बाद, वीडियो में आगे बढ़ने के बाद दिखने वाला सबसे नया विज्ञापन चलता है. इस समस्या को विज़ुअल तौर पर समझने के लिए, नीचे दिया गया डायग्राम देखें:

जब उपयोगकर्ता वीडियो में आगे या पीछे जाने की सुविधा का इस्तेमाल शुरू करता है, तो मौजूदा समय सेव करें. साथ ही, SDK के पूछने पर उस समय की जानकारी दें. ऐसा तब तक करें, जब तक उपयोगकर्ता सामान्य तरीके से वीडियो चलाना शुरू नहीं कर देता. इस समस्या को विज़ुअल तरीके से समझने के लिए, यह डायग्राम देखें:

इस तरीके से, 0:10 के बीच में दिखने वाले विज्ञापन को स्किप किया जा सकता है और सिर्फ़ 0:20 के बीच में दिखने वाले विज्ञापन को चलाया जा सकता है. ऐसा करने के लिए, नीचे दिए गए कोड स्निपेट में कस्टम प्लेलिस्ट ट्रैकर का इस्तेमाल किया जाता है. इस कोड में, एडवांस एचटीएमएल5 के सैंपल में ads.js में किए गए बदलाव (बोल्ड में दिखाए गए) शामिल हैं. यह सैंपल, हमारे डाउनलोड पेज पर उपलब्ध है.

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

मोबाइल Safari से जुड़ी सामान्य समस्याएं

यह तरीका, मोबाइल Safari को छोड़कर हर प्लैटफ़ॉर्म पर काम करना चाहिए. मोबाइल पर Safari में, वीडियो टैग की 'वीडियो पर जाएं' प्रॉपर्टी सही तरीके से लागू नहीं की गई है. यह हमेशा गलत वैल्यू दिखाती है. इस समस्या से बचने के लिए, आपको यह देखना होगा कि उपयोगकर्ता वीडियो में आगे-पीछे जा रहा है या नहीं. इस तरीके का सैंपल कोड यहां दिया गया है. फिर से, बोल्ड की गई लाइनें, मौजूदा कोड में किए गए बदलाव हैं.

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

इन बदलावों के बाद, SDK टूल अब आपके Ads ऑब्जेक्ट की currentTime प्रॉपर्टी का इस्तेमाल करके यह तय करेगा कि विज्ञापन के ब्रेक कब चलाए जाएं. इसके लिए, वह कॉन्टेंट वीडियो प्लेयर की currentTime प्रॉपर्टी का इस्तेमाल नहीं करेगा.