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

প্ল্যাটফর্ম নির্বাচন করুন: HTML5 অ্যান্ড্রয়েড iOS টিভিওএস

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

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

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

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

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

পূর্বশর্ত

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

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

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

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

  1. আপনার index.html ফাইল ধারণকারী ডিরেক্টরি থেকে একটি কমান্ড লাইন ব্যবহার করে রান করুন:
      python -m http.server 8000
  2. একটি ওয়েব ব্রাউজারে, http://localhost:8000/ এ যান।

আপনি অন্য যেকোনো ওয়েব সার্ভারও ব্যবহার করতে পারেন, যেমন Apache HTTP Server

2. একটি সাধারণ ভিডিও প্লেয়ার তৈরি করুন

প্রথমে, 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>
#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;
}
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();
});

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

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

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

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

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

৪. বিজ্ঞাপনের কন্টেইনার তৈরি করুন

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

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

<div id="adContainer"></div>
#adContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 360px;
}
/**
 * Sets the 'adContainer' div as the IMA ad display container.
 */
function createAdDisplayContainer() {
  adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), videoContent);
}

৫. AdsLoader আরম্ভ করুন এবং একটি বিজ্ঞাপন অনুরোধ করুন

বিজ্ঞাপনের অনুরোধ করার জন্য, একটি AdsLoader ইনস্ট্যান্স তৈরি করুন। AdsLoader কনস্ট্রাক্টর একটি AdDisplayContainer অবজেক্টকে ইনপুট হিসেবে নেয় এবং একটি নির্দিষ্ট বিজ্ঞাপন ট্যাগ URL-এর সাথে সম্পর্কিত AdsRequest অবজেক্টগুলি প্রক্রিয়া করতে ব্যবহার করা যেতে পারে। এই উদাহরণে ব্যবহৃত বিজ্ঞাপন ট্যাগে একটি 10-সেকেন্ডের প্রি-রোল বিজ্ঞাপন রয়েছে। আপনি IMA ভিডিও স্যুট ইন্সপেক্টর ব্যবহার করে এটি বা যেকোনো বিজ্ঞাপন ট্যাগ 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);
}

৬. 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();
}

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

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

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

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

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

যখন AdsManager প্রদর্শনের জন্য একটি বিজ্ঞাপন সন্নিবেশ করার জন্য প্রস্তুত হয়, তখন এটি CONTENT_PAUSE_REQUESTED ইভেন্টটি চালু করে। অন্তর্নিহিত ভিডিও প্লেয়ারে একটি বিরতি ট্রিগার করে এই ইভেন্টটি পরিচালনা করে। একইভাবে, যখন একটি বিজ্ঞাপন সম্পূর্ণ হয়, তখন AdsManager CONTENT_RESUME_REQUESTED ইভেন্টটি চালু করে। অন্তর্নিহিত ভিডিওতে প্লেব্যাক পুনরায় চালু করে এই ইভেন্টটি পরিচালনা করে।

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

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

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

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

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

নন-লিনিয়ার বিজ্ঞাপন সমর্থন করার জন্য, 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();
  }
}

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

যেহেতু 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();
  }
}

৮. 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();
  }
}

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

ভিডিও প্লেয়ারের আকার পরিবর্তন করে বিজ্ঞাপনের আকার পরিবর্তন করতে অথবা স্ক্রিন ওরিয়েন্টেশনের পরিবর্তনের সাথে মেলাতে, উইন্ডো রিসাইজ ইভেন্টের প্রতিক্রিয়ায় 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);
  }
});

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