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

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

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

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

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

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

পূর্বশর্ত

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

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

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

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

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

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

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

প্রথমে, একটি সাধারণ HTML5 ভিডিও উপাদান তৈরি করতে index.html সংশোধন করুন, একটি মোড়ানো উপাদানে রয়েছে, এবং প্লেব্যাক ট্রিগার করার জন্য একটি বোতাম৷ নিম্নলিখিত উদাহরণটি 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() তে একটি কল রয়েছে, যেটি বিজ্ঞাপন লোডার শুরু করুন এবং একটি বিজ্ঞাপন অনুরোধ করুন বিভাগে সংজ্ঞায়িত করা হয়েছে।

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

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

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

4. বিজ্ঞাপন ধারক তৈরি করুন

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

এই বিজ্ঞাপন কন্টেইনার উপাদান বাস্তবায়ন করতে, প্রথমে video-container উপাদানের মধ্যে একটি নতুন div তৈরি করুন। তারপরে, video-element উপরের-বাম কোণে উপাদানটিকে অবস্থান করতে CSS আপডেট করুন। সবশেষে, নতুন অ্যাড কন্টেইনার 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);
}

5. অ্যাডসলোডার শুরু করুন এবং একটি বিজ্ঞাপনের অনুরোধ করুন৷

বিজ্ঞাপনের অনুরোধ করার জন্য, একটি 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&impl=s&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);
}

6. 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);

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

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

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

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

8. অ্যাডস ম্যানেজার শুরু করুন

বিজ্ঞাপন প্লেব্যাক শুরু করতে, শুরু করুন এবং শুরু করুন 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-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।