আমাদের পণ্যগুলির বিষয়ে আলোচনা করতে এবং প্রতিক্রিয়া জানাতে, Google Advertising and Measurement Community সার্ভারে অফিসিয়াল অ্যাড ম্যানেজার ডিসকর্ড চ্যানেলে যোগ দিন৷

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

IMA SDK সেট আপ করুন৷

প্ল্যাটফর্ম নির্বাচন করুন: HTML5 Android iOS tvOS

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

এই নির্দেশিকাটি একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA SDK কীভাবে ইন্টিগ্রেট করতে হয় তা দেখায়। আপনি যদি একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন দেখতে বা অনুসরণ করতে চান, তাহলে GitHub থেকে সহজ উদাহরণটি ডাউনলোড করুন। আপনি যদি SDK আগে থেকেই ইন্টিগ্রেট করা একটি HTML5 প্লেয়ারে আগ্রহী হন, তাহলে Video.js-এর জন্য IMA SDK প্লাগইনটি দেখুন।

আইএমএ ক্লায়েন্ট-সাইড ওভারভিউ

ক্লায়েন্ট-সাইডে IMA বাস্তবায়নে চারটি প্রধান SDK উপাদান জড়িত, যা এই নির্দেশিকায় দেখানো হয়েছে:

AdDisplayContainer : একটি কন্টেইনার অবজেক্ট যা নির্দিষ্ট করে দেয় IMA কোথায় বিজ্ঞাপনের UI উপাদানগুলো রেন্ডার করবে এবং দৃশ্যমানতা পরিমাপ করে, যার মধ্যে Active View ও Open Measurement অন্তর্ভুক্ত।
AdsLoader : এমন একটি অবজেক্ট যা বিজ্ঞাপনের জন্য অনুরোধ করে এবং অনুরোধের প্রতিক্রিয়া থেকে উদ্ভূত ইভেন্টগুলি পরিচালনা করে। আপনার কেবল একটিই অ্যাডস লোডার ইনস্ট্যানশিয়েট করা উচিত, যা অ্যাপ্লিকেশনটির জীবনচক্র জুড়ে পুনরায় ব্যবহার করা যেতে পারে।
AdsRequest : একটি অবজেক্ট যা একটি বিজ্ঞাপন অনুরোধ নির্ধারণ করে। বিজ্ঞাপন অনুরোধে VAST বিজ্ঞাপন ট্যাগের জন্য URL এবং বিজ্ঞাপনের ডাইমেনশনের মতো অতিরিক্ত প্যারামিটার নির্দিষ্ট করা থাকে।
AdsManager : একটি অবজেক্ট যা বিজ্ঞাপনের অনুরোধের প্রতিক্রিয়া ধারণ করে, বিজ্ঞাপনের প্লেব্যাক নিয়ন্ত্রণ করে এবং SDK দ্বারা প্রেরিত বিজ্ঞাপন ইভেন্টগুলো শোনে।

পূর্বশর্ত

শুরু করার আগে, আপনার নিম্নলিখিত জিনিসগুলির প্রয়োজন হবে:

তিনটি খালি ফাইল:
- index.html
- স্টাইল.সিএসএস
- ads.js
আপনার কম্পিউটারে পাইথন ইনস্টল করা থাকতে হবে, অথবা পরীক্ষার জন্য একটি ওয়েব সার্ভার ব্যবহার করতে হবে।

১. একটি ডেভেলপমেন্ট সার্ভার চালু করুন

যেহেতু IMA SDK যে পৃষ্ঠা থেকে লোড করা হয়, সেই পৃষ্ঠার প্রোটোকল ব্যবহার করেই ডিপেন্ডেন্সিগুলো লোড করে, তাই আপনার অ্যাপ পরীক্ষা করার জন্য একটি ওয়েব সার্ভার ব্যবহার করতে হবে। একটি লোকাল ডেভেলপমেন্ট সার্ভার চালু করার সবচেয়ে সহজ উপায় হলো পাইথনের বিল্ট-ইন সার্ভার ব্যবহার করা।

আপনার index.html ফাইলটি যে ডিরেক্টরিতে রয়েছে, সেখান থেকে কমান্ড লাইন ব্যবহার করে নিম্নলিখিত কমান্ডটি চালান:
```
  python -m http.server 8000
```
দ্রষ্টব্য: http.server শুধুমাত্র পাইথন 3.x-এ উপলব্ধ।
ওয়েব ব্রাউজারে http://localhost:8000/ এ যান।

আপনি অ্যাপাচি এইচটিটিপি সার্ভারের মতো অন্য যেকোনো ওয়েব সার্ভারও ব্যবহার করতে পারেন।

২. একটি সহজ ভিডিও প্লেয়ার তৈরি করুন

প্রথমে, index.html ফাইলটি পরিবর্তন করে একটি র‍্যাপিং এলিমেন্টের মধ্যে একটি সাধারণ HTML5 ভিডিও এলিমেন্ট এবং প্লেব্যাক চালু করার জন্য একটি বাটন তৈরি করুন। নিচের উদাহরণটিতে IMA SDK ইম্পোর্ট করা হয়েছে এবং AdDisplayContainer কন্টেইনার এলিমেন্টটি সেট আপ করা হয়েছে। আরও বিস্তারিত জানতে, যথাক্রমে "IMA SDK ইম্পোর্ট করুন" এবং "অ্যাড কন্টেইনার তৈরি করুন" ধাপগুলো দেখুন।

<html>
  <head>
    <title>IMA HTML5 Simple Demo</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>
      <div id="adContainer"></div>
    </div>
    <button id="playButton">Play</button>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="ads.js"></script>
  </body>
</html>
index.html

#mainContainer {
  position: relative;
  width: 640px;
  height: 360px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 360px;
}

#contentElement {
  width: 640px;
  height: 360px;
  overflow: hidden;
}

#playButton {
  margin-top:10px;
  vertical-align: top;
  width: 350px;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2c3e50;
  border: 0;
  border-bottom: 2px solid #22303f;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #22303f;
  box-shadow: inset 0 -2px #22303f;
}style.css

let adsManager;
let adsLoader;
let adDisplayContainer;
let isAdPlaying;
let isContentFinished;
let playButton;
let videoContent;
let adContainer;

// On window load, attach an event to the play button click
// that triggers playback of the video element.
window.addEventListener('load', function(event) {
  videoContent = document.getElementById('contentElement');
  adContainer = document.getElementById('adContainer');
  adContainer.addEventListener('click', adContainerClick);
  playButton = document.getElementById('playButton');
  playButton.addEventListener('click', playAds);
  setUpIMA();
});ads.js

style.css এবং ads.js ফাইল লোড করার জন্য প্রয়োজনীয় ট্যাগগুলো যোগ করুন। এরপর, মোবাইল ডিভাইসের জন্য ভিডিও প্লেয়ারটিকে রেসপন্সিভ করতে styles.css ফাইলটি পরিবর্তন করুন। সবশেষে, ads.js ফাইলে আপনার ভেরিয়েবলগুলো ডিক্লেয়ার করুন এবং প্লে বাটনে ক্লিক করলে ভিডিও প্লেব্যাক চালু করুন।

লক্ষ্য করুন যে ads.js কোড স্নিপেটটিতে setUpIMA() এর একটি কল রয়েছে, যা "Initialize the AdsLoader and make an ads request" বিভাগে সংজ্ঞায়িত করা হয়েছে।

৩. IMA SDK আমদানি করুন

এরপরে, index.html- এ ads.js ট্যাগের আগে একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করে IMA ফ্রেমওয়ার্কটি যুক্ত করুন।

দ্রষ্টব্য: বিস্তারিত কনসোল লগ পেতে, আপনি ima3.js ima3_debug.js দিয়ে প্রতিস্থাপন করতে পারেন। তবে, প্রোডাকশন অ্যাপে ima3_debug.js ব্যবহার করা উচিত নয়।

<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>index.html

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

এই অ্যাড কন্টেইনার এলিমেন্টটি প্রয়োগ করতে, প্রথমে video-container এলিমেন্টের ভিতরে একটি নতুন div তৈরি করুন। তারপর, এলিমেন্টটিকে video-element উপরের-বাম কোণায় স্থাপন করার জন্য CSS আপডেট করুন। সবশেষে, নতুন অ্যাড কন্টেইনার div ব্যবহার করে AdDisplayContainer অবজেক্টটি তৈরি করতে createAdDisplayContainer() ফাংশনটি যোগ করুন।

<div id="adContainer"></div>index.html

#adContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 360px;
}style.css

/**
 * Sets the 'adContainer' div as the IMA ad display container.
 */
function createAdDisplayContainer() {
  adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), videoContent);
}ads.js

৫. AdsLoader চালু করুন এবং বিজ্ঞাপনের জন্য অনুরোধ করুন।

বিজ্ঞাপনের অনুরোধ করার জন্য, একটি AdsLoader ইনস্ট্যান্স তৈরি করুন। AdsLoader কনস্ট্রাক্টরটি ইনপুট হিসেবে একটি AdDisplayContainer অবজেক্ট গ্রহণ করে এবং এটি একটি নির্দিষ্ট অ্যাড ট্যাগ URL-এর সাথে যুক্ত AdsRequest অবজেক্টগুলো প্রসেস করতে ব্যবহৃত হয়। এই উদাহরণে ব্যবহৃত অ্যাড ট্যাগটিতে একটি ১০-সেকেন্ডের প্রি-রোল বিজ্ঞাপন রয়েছে। আপনি IMA Video Suite Inspector ব্যবহার করে এটি বা যেকোনো অ্যাড ট্যাগ URL পরীক্ষা করতে পারেন।

সর্বোত্তম অনুশীলন হিসেবে, একটি পেজের সম্পূর্ণ জীবনচক্রের জন্য AdsLoader এর কেবল একটি ইনস্ট্যান্সই বজায় রাখুন। অতিরিক্ত বিজ্ঞাপনের অনুরোধ করার জন্য, একটি নতুন AdsRequest অবজেক্ট তৈরি করুন, কিন্তু একই AdsLoader পুনরায় ব্যবহার করুন। আরও তথ্যের জন্য, IMA SDK FAQ দেখুন।

AdsLoader.addEventListener ব্যবহার করে বিজ্ঞাপন লোড হওয়া এবং ত্রুটির ইভেন্টগুলো শুনুন ও সে অনুযায়ী সাড়া দিন। নিম্নলিখিত ইভেন্টগুলো শুনুন:

ADS_MANAGER_LOADED
AD_ERROR

onAdsManagerLoaded() এবং onAdError() লিসেনার তৈরি করতে, নিম্নলিখিত উদাহরণটি দেখুন:

/**
 * Sets up IMA ad display container, ads loader, and makes an ad request.
 */
function setUpIMA() {
  // Create the ad display container.
  createAdDisplayContainer();
  // Create ads loader.
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  // Listen and respond to ads loaded and error events.
  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerLoaded, false);
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false);

  // An event listener to tell the SDK that our content video
  // is completed so the SDK can play any post-roll ads.
  const contentEndedListener = function() {
    // An ad might have been playing in the content element, in which case the
    // content has not actually ended.
    if (isAdPlaying) return;
    isContentFinished = true;
    adsLoader.contentComplete();
  };
  videoContent.onended = contentEndedListener;

  // Request video ads.
  const adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
      'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&' +
      'output=vast&unviewed_position_start=1&env=vp&correlator=';

  // Specify the linear and nonlinear slot sizes. This helps the SDK to
  // select the correct creative if multiple are returned.
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;

  adsRequest.nonLinearAdSlotWidth = 640;
  adsRequest.nonLinearAdSlotHeight = 150;

  adsLoader.requestAds(adsRequest);
}ads.js

৬. AdsLoader ইভেন্টগুলিতে সাড়া দিন

যখন AdsLoader সফলভাবে বিজ্ঞাপন লোড করে, তখন এটি একটি ADS_MANAGER_LOADED ইভেন্ট নির্গত করে। AdsManager অবজেক্টটি ইনিশিয়ালাইজ করার জন্য কলব্যাকে পাঠানো ইভেন্টটি পার্স করুন। AdsManager অ্যাড ট্যাগ URL-এর রেসপন্স অনুযায়ী স্বতন্ত্র বিজ্ঞাপনগুলো লোড করে।

লোডিং প্রক্রিয়ার সময় ঘটা যেকোনো ত্রুটি সমাধান করা নিশ্চিত করুন। যদি বিজ্ঞাপন লোড না হয়, তবে ব্যবহারকারীর বিষয়বস্তু দেখার ক্ষেত্রে যাতে কোনো ব্যাঘাত না ঘটে, সেজন্য বিজ্ঞাপন ছাড়াই মিডিয়া প্লেব্যাক চালু রাখুন।

/**
 * Handles the ad manager loading and sets ad event listeners.
 * @param {!google.ima.AdsManagerLoadedEvent} adsManagerLoadedEvent
 */
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Get the ads manager.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
  // videoContent should be set to the content video element.
  adsManager =
      adsManagerLoadedEvent.getAdsManager(videoContent, adsRenderingSettings);

  // Add listeners to the required events.
  adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, onContentPauseRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdLoaded);
}

/**
 * Handles ad errors.
 * @param {!google.ima.AdErrorEvent} adErrorEvent
 */
function onAdError(adErrorEvent) {
  // Handle the error logging.
  console.log(adErrorEvent.getError());
  adsManager.destroy();
}ads.js

onAdsManagerLoaded() ফাংশনে সেট করা লিসেনারগুলো সম্পর্কে আরও বিস্তারিত জানতে, নিম্নলিখিত উপ-বিভাগগুলো দেখুন:

`AdsManager` ত্রুটিগুলি পরিচালনা করুন

AdsLoader এর জন্য তৈরি করা এরর হ্যান্ডলারটি AdsManager এর এরর হ্যান্ডলার হিসেবেও কাজ করতে পারে। onAdError() ফাংশনটি পুনরায় ব্যবহার করে ইভেন্ট হ্যান্ডলারটি দেখুন।

adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);ads.js

প্লে এবং পজ ইভেন্টগুলি পরিচালনা করুন

যখন AdsManager প্রদর্শনের জন্য একটি বিজ্ঞাপন যুক্ত করতে প্রস্তুত হয়, তখন এটি CONTENT_PAUSE_REQUESTED ইভেন্টটি ট্রিগার করে। এই ইভেন্টটি হ্যান্ডেল করতে, সংশ্লিষ্ট ভিডিও প্লেয়ারে একটি পজ (pause) ট্রিগার করুন। একইভাবে, যখন একটি বিজ্ঞাপন শেষ হয়, AdsManager CONTENT_RESUME_REQUESTED ইভেন্টটি ট্রিগার করে। এই ইভেন্টটি হ্যান্ডেল করতে, সংশ্লিষ্ট কন্টেন্ট ভিডিওর প্লেব্যাক পুনরায় চালু করুন।

adsManager.addEventListener(
    google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, onContentPauseRequested);
adsManager.addEventListener(
    google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
    onContentResumeRequested);ads.js

onContentPauseRequested() এবং onContentResumeRequested() ফাংশনগুলোর সংজ্ঞার জন্য, নিম্নলিখিত উদাহরণটি দেখুন:

/**
 * Pauses video content and sets up ad UI.
 */
function onContentPauseRequested() {
  isAdPlaying = true;
  videoContent.pause();
  // This function is where you should setup UI for showing ads (for example,
  // display ad timer countdown, disable seeking and more.)
  // setupUIForAds();
}

/**
 * Resumes video content and removes ad UI.
 */
function onContentResumeRequested() {
  isAdPlaying = false;
  if (!isContentFinished) {
    videoContent.play();
  }
  // This function is where you should ensure that your UI is ready
  // to play content. It is the responsibility of the Publisher to
  // implement this function when necessary.
  // setupUIForContent();
}ads.js

নন-লিনিয়ার বিজ্ঞাপন চলাকালীন কন্টেন্ট প্লেব্যাক পরিচালনা করুন

যখন কোনো বিজ্ঞাপন চালানোর জন্য প্রস্তুত হয়, তখন AdsManager কন্টেন্ট ভিডিওটি থামিয়ে দেয়, কিন্তু এই আচরণটি নন-লিনিয়ার বিজ্ঞাপনের ক্ষেত্রে প্রযোজ্য নয়, যেখানে বিজ্ঞাপন প্রদর্শিত হওয়ার সময়েও কন্টেন্ট চলতে থাকে।

adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdLoaded);ads.js

নন-লিনিয়ার বিজ্ঞাপন সমর্থন করার জন্য, AdsManager এর LOADED ইভেন্টটি নির্গত হওয়ার জন্য অপেক্ষা করুন। বিজ্ঞাপনটি লিনিয়ার কিনা তা পরীক্ষা করুন, এবং যদি না হয়, তাহলে ভিডিও এলিমেন্টে প্লেব্যাক পুনরায় শুরু করুন।

onAdLoaded() ফাংশনের সংজ্ঞার জন্য নিচের উদাহরণটি দেখুন।

/**
 * Handles ad loaded event to support non-linear ads. Continues content playback
 * if the ad is not linear.
 * @param {!google.ima.AdEvent} adEvent
 */
function onAdLoaded(adEvent) {
  let ad = adEvent.getAd();
  if (!ad.isLinear()) {
    videoContent.play();
  }
}ads.js

৭. মোবাইল ডিভাইসে ক্লিক-টু-পজ ট্রিগার করুন

যেহেতু AdContainer ভিডিও এলিমেন্টের উপরে একটি স্তর তৈরি করে, তাই ব্যবহারকারীরা সরাসরি নিচের প্লেয়ারটির সাথে ইন্টারঅ্যাক্ট করতে পারেন না। এটি মোবাইল ডিভাইসের ব্যবহারকারীদের বিভ্রান্ত করতে পারে, কারণ তারা ভিডিও প্লেয়ারে ট্যাপ করে প্লেব্যাক পজ করার সুবিধা আশা করেন। এই সমস্যা সমাধানের জন্য, IMA SDK অ্যাড ওভারলে থেকে এমন সব ক্লিক, যা IMA দ্বারা হ্যান্ডেল করা হয় না, সেগুলোকে AdContainer এলিমেন্টে পাঠিয়ে দেয়, যেখানে সেগুলোকে হ্যান্ডেল করা যায়। এটি নন-মোবাইল ব্রাউজারের লিনিয়ার অ্যাডের ক্ষেত্রে প্রযোজ্য নয়, কারণ অ্যাডে ক্লিক করলে ক্লিকথ্রু লিঙ্কটি খুলে যায়।

ক্লিক-টু-পজ বাস্তবায়ন করতে, অন উইন্ডো লোড লিসেনারে adContainerClick() ক্লিক হ্যান্ডলার ফাংশনটি যোগ করুন।

/**
 * Handles clicks on the ad container to support expected play and pause
 * behavior on mobile devices.
 * @param {!Event} event
 */
function adContainerClick(event) {
  console.log("ad container clicked");
  if(videoContent.paused) {
    videoContent.play();
  } else {
    videoContent.pause();
  }
}ads.js

৮. বিজ্ঞাপন ব্যবস্থাপক (AdsManager) চালু করুন।

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

/**
 * Loads the video content and initializes IMA ad playback.
 */
function playAds() {
  // Initialize the container. Must be done through a user action on mobile
  // devices.
  videoContent.load();
  adDisplayContainer.initialize();

  try {
    // Initialize the ads manager. This call starts ad playback for VMAP ads.
    adsManager.init(640, 360);
    // Call play to start showing the ad. Single video and overlay ads will
    // start at this time; the call will be ignored for VMAP ads.
    adsManager.start();
  } catch (adError) {
    // An error may be thrown if there was a problem with the VAST response.
    videoContent.play();
  }
}ads.js

৯. প্লেয়ারের আকার পরিবর্তন সমর্থন করে

ভিডিও প্লেয়ারের আকারের সাথে বা স্ক্রিনের ওরিয়েন্টেশনের পরিবর্তনের সাথে বিজ্ঞাপনগুলিকে গতিশীলভাবে রিসাইজ করার জন্য, উইন্ডো রিসাইজ ইভেন্টের প্রতিক্রিয়ায় adsManager.resize() কল করুন।

window.addEventListener('resize', function(event) {
  console.log("window resized");
  if(adsManager) {
    let width = videoContent.clientWidth;
    let height = videoContent.clientHeight;
    adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
  }
});ads.js

ব্যাস! আপনি এখন IMA SDK ব্যবহার করে বিজ্ঞাপনের অনুরোধ ও প্রদর্শন করতে পারছেন। SDK-এর আরও উন্নত বৈশিষ্ট্য সম্পর্কে জানতে, অন্যান্য গাইড অথবা GitHub-এ থাকা নমুনাগুলো দেখুন।