विज्ञापन के नियम

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

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

  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 ऑब्जेक्ट का इस्तेमाल करना होगा. इस्तेमाल के इस उदाहरण के लिए, The Content with Seeking देखें.

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

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

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

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

इस तरीके का इस्तेमाल करने पर, वीडियो के बीच में 0:10 की जगह 0:10 का समय नहीं चलेगा और सिर्फ़ 0:20 के बीच वाली लाइव स्ट्रीम ही चलेगी. ऐसा कस्टम प्लेहेड ट्रैकर का इस्तेमाल करके किया जाता है, जैसा कि यहां दिखाया गया है. नीचे दिए गए कोड में, बेहतर HTML5 में 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 प्रॉपर्टी.