বিজ্ঞাপনের প্লেলিস্ট অটোমেট করুন

প্ল্যাটফর্ম বেছে নিন: HTML5 Android iOS tvOS

IMA HTML5 SDK সম্পূর্ণ অটোমেটিক বিজ্ঞাপন প্লেলিস্টে কাজ করে। এই ফিচারটি আপনার বিজ্ঞাপন ট্রাফিক করার সময় Google Ad Manager-এ উল্লেখ করা কন্টেন্টে বিজ্ঞাপন বিরতি যোগ করে। এছাড়াও, এটি প্রি-রোল, মিড-রোল এবং পোস্ট-রোল সহ বিজ্ঞাপন বিরতি দেখানোর জন্য প্রয়োজনীয় ভিডিও প্লেয়ার কোডকে অনেক সহজ করে তোলে।

• AdsManager তৈরি করার সময়, contentPlayback getAdsManager কল ব্যবহার করে একটি অবজেক্ট পাস করা হয়। এই অবজেক্টে অবশ্যই 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 Trouble 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();
}

এটি ব্যবহার করে দেখুন

কার্যকর প্রয়োগের জন্য নিম্নলিখিত কোড দেখুন।

The trouble with seeking

আপনি বিজ্ঞাপনের নিয়ম ব্যবহার করলে, ক্লিক-ও-টেনে-নিয়ে-যাওয়া সংক্রান্ত সমস্যা হতে পারে। বিশেষত, কোনও ব্যবহারকারী ক্লিক করে ড্র্যাগ করে একাধিক মিডরোল পড পেরিয়ে যাওয়ার পরে, কন্টেন্ট আবার শুরু হওয়ার আগে তিনি সেইসব পডের ২ বা তার বেশি পড পরপর চলতে দেখতে পেতে পারেন। ব্যবহারকারী যখন ভিডিওর কোনও অংশ খুঁজছেন, তখন ভিডিও প্লেহেড টাইম আপডেট হওয়ার কারণে এটি হয়। ব্যবহারকারী যখন কোনও বিজ্ঞাপন পেরিয়ে যাচ্ছেন, তখন SDK যদি বর্তমান সময় পোল করে, তাহলে এটি মনে করতে পারে যে বিজ্ঞাপনটি চালানো উচিত। কন্টেন্ট আবার চালু হলে, এটি সেই বিজ্ঞাপনটি চালায় এবং তারপরে সিক করার পর থেকে সাম্প্রতিকতম বিজ্ঞাপনটি চালায়। এই সমস্যার ভিজ্যুয়াল উপস্থাপনার জন্য, নিম্নলিখিত ডায়াগ্রাম দেখুন:

ব্যবহারকারী যখন সিক করা শুরু করেন, তখন বর্তমান সময় সেভ করুন এবং ব্যবহারকারী স্বাভাবিক প্লেব্যাক আবার চালু না করা পর্যন্ত SDK সেটি চাইলে সেই সময় রিপোর্ট করুন। এই সমাধানের ভিজ্যুয়াল উপস্থাপনার জন্য নিচের ডায়াগ্রাম দেখুন:

এই সমাধান ব্যবহার করে, আপনি 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-তে, ভিডিও ট্যাগের সিকিং প্রপার্টি সঠিকভাবে প্রয়োগ করা হয়নি (এটি সবসময় false রিটার্ন করে)। এটি এড়াতে, ব্যবহারকারী ভিডিওটি সিক করছেন কিনা তা আপনাকে নিজে চেক করতে হবে। এই পদ্ধতির জন্য স্যাম্পেল কোড নিচে দেওয়া হল। আবারও, বোল্ড করা লাইনগুলি হল আগে থেকে থাকা কোডে করা পরিবর্তন।

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 প্রপার্টি নয়।