आरंभ करें

IMA SDK आपकी वेबसाइटों और ऐप्लिकेशन में मल्टीमीडिया विज्ञापनों को इंटिग्रेट करना आसान बनाते हैं. IMA SDK ये काम कर सकते हैं किसी भी वेबसाइट या ऐप्लिकेशन से विज्ञापनों का अनुरोध करें वीएएसटी का पालन करने वाला विज्ञापन सर्वर और अपने ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज करना. IMA क्लाइंट-साइड SDK टूल की मदद से, कॉन्टेंट वाले वीडियो के प्लेबैक पर आपका कंट्रोल रहता है, जबकि SDK टूल विज्ञापन के प्लेबैक को मैनेज करता है. विज्ञापन इसमें चलते हैं ऐप्लिकेशन के कॉन्टेंट वीडियो प्लेयर के ऊपर अलग से एक वीडियो प्लेयर रखा होगा.

इस गाइड में IMA SDK को एक आसान वीडियो प्लेयर ऐप्लिकेशन में जोड़ने का तरीका बताया गया है. अगर आपको इंटिग्रेशन के पूरे हो चुके सैंपल को देखना या उसके बारे में जानना है, तो GitHub से लिया गया आसान उदाहरण. अगर आप: अगर आपको SDK टूल के साथ-साथ पहले से इंटिग्रेट किए गए HTML5 प्लेयर में दिलचस्पी है, तो ज़्यादा जानकारी के लिए, Video.js के लिए IMA SDK प्लगिन.

IMA क्लाइंट-साइड की खास जानकारी

IMA क्लाइंट-साइड को लागू करने के लिए, SDK टूल के चार मुख्य कॉम्पोनेंट शामिल किए गए हैं. इनकी जानकारी इसमें दी गई है गाइड:

  • AdDisplayContainer: एक कंटेनर ऑब्जेक्ट, जहां विज्ञापन दिखाए जाते हैं.
  • AdsLoader: एक ऑब्जेक्ट जो विज्ञापनों का अनुरोध करता है और विज्ञापनों के अनुरोध के जवाबों के इवेंट मैनेज करता है. आपको सिर्फ़ एक विज्ञापन लोडर इंस्टैंशिएट करना चाहिए, जिसे ऐप्लिकेशन की पूरी अवधि के दौरान फिर से इस्तेमाल किया जा सकता है.
  • AdsRequest: विज्ञापन के अनुरोध के बारे में बताने वाला ऑब्जेक्ट. विज्ञापन अनुरोध, वीएएसटी विज्ञापन टैग के यूआरएल के साथ-साथ उस यूआरएल के बारे में भी बताते हैं अतिरिक्त पैरामीटर, जैसे विज्ञापन डाइमेंशन.
  • AdsManager: एक ऐसा ऑब्जेक्ट जो विज्ञापन के अनुरोध का जवाब देता है, विज्ञापन प्लेबैक को कंट्रोल करता है, और विज्ञापन को सुनता है SDK टूल से ट्रिगर होने वाले इवेंट.

ज़रूरी शर्तें

शुरू करने से पहले, आपको इन चीज़ों की ज़रूरत होगी:

  • तीन खाली फ़ाइलें:
    • index.html
    • style.css
    • ads.js
  • आपके कंप्यूटर पर Python इंस्टॉल किया गया हो या जांच के लिए वेब सर्वर का इस्तेमाल किया जा रहा हो

1. डेवलपमेंट सर्वर शुरू करना

IMA SDK, उसी प्रोटोकॉल के ज़रिए डिपेंडेंसी लोड करता है जिससे पेज लोड होता है. इसलिए, आपको ऐप्लिकेशन की जांच करने के लिए वेब सर्वर का इस्तेमाल करना होगा. लोकल डेवलपमेंट शुरू करने का सबसे आसान तरीका सर्वर, Python के पहले से मौजूद सर्वर का इस्तेमाल करने के लिए है.

  1. उस डायरेक्ट्री से कमांड लाइन का इस्तेमाल करना जिसमें आपकी index.html फ़ाइल चलती है: 
      python -m http.server 8000
    अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  2. वेब ब्राउज़र में, http://localhost:8000/ पर जाएं

आप किसी अन्य वेब सर्वर का भी उपयोग कर सकते हैं, जैसे कि Apache एचटीटीपी सर्वर.

2. वीडियो प्लेयर बनाना

सबसे पहले, रैपिंग में शामिल आसान HTML5 वीडियो एलिमेंट बनाने के लिए, index.html में बदलाव करें एलिमेंट, और प्लेबैक ट्रिगर करने के लिए एक बटन. साथ ही, आपके विज्ञापनों को लोड करने के लिए आवश्यक टैग style.css और ads.js फ़ाइलें होनी चाहिए. इसके बाद, वीडियो प्लेयर बनाने के लिए styles.css में बदलाव करें मोबाइल डिवाइस के लिए रिस्पॉन्सिव. आखिर में, ads.js में, वीडियो चलने पर वीडियो चलाना ट्रिगर करें बटन पर क्लिक किया जाता है.

index.html 

<!doctype html>
<html lang="en">
  <head>
    <title>IMA HTML5 Simple Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="page-content">
      <div id="video-container">
        <video id="video-element">
          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
        </video>
      </div>
      <button id="play-button">Play</button>
    </div>
    <script src="ads.js"></script>
  </body>
</html>
style.css 
#page-content {
  position: relative;
  /* this element's width controls the effective height */
  /* of the video container's padding-bottom */
  max-width: 640px;
  margin: 10px auto;
}

#video-container {
  position: relative;
  /* forces the container to match a 16x9 aspect ratio */
  /* replace with 75% for a 4:3 aspect ratio, if needed */
  padding-bottom: 56.25%;
}

#video-element {
  /* forces the contents to fill the container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
ads.js 
var videoElement;

// On window load, attach an event to the play button click
// that triggers playback on the video element
window.addEventListener('load', function(event) {
  videoElement = document.getElementById('video-element');
  var playButton = document.getElementById('play-button');
  playButton.addEventListener('click', function(event) {
    videoElement.play();
  });
});

यह चरण पूरा करने के बाद, जब आप अपने ब्राउज़र में (अपने डेवलपमेंट के ज़रिए) index.html खोलते हैं सर्वर) आपको वीडियो एलिमेंट दिखाई देना चाहिए और वीडियो क्लिप को क्लिक करने पर 'चलाएं' बटन.

3. IMA SDK इंपोर्ट करें

इसके बाद, index.html में एक स्क्रिप्ट टैग का इस्तेमाल करके IMA फ़्रेमवर्क जोड़ें, ads.js.

index.html 
...

        </video>
      </div>
      <button id="play-button">Play</button>
    </div>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="ads.js"></script>
  </body>
</html>

4. पेज और वीडियो प्लेयर हैंडलर अटैच करें

JavaScript वाले वीडियो प्लेयर के व्यवहार में बदलाव करने के लिए, ये कार्रवाइयां की जा सकती हैं:

  • पेज लोड होने के बाद, IMA SDK शुरू करें.
  • वीडियो प्ले बटन पर क्लिक करने पर, विज्ञापनों को लोड करें (जब तक कि पहले से विज्ञापन लोड न हों).
  • ब्राउज़र विंडो का साइज़ बदलने पर, वीडियो एलिमेंट और adsManager को अपडेट करें पेज को मोबाइल डिवाइस के लिए रिस्पॉन्सिव बनाने के लिए डाइमेंशन
ads.js 
var videoElement;
// Define a variable to track whether there are ads loaded and initially set it to false
var adsLoaded = false;

window.addEventListener('load', function(event) {
  videoElement = document.getElementById('video-element');
  initializeIMA();
  videoElement.addEventListener('play', function(event) {
    loadAds(event);
  });
  var playButton = document.getElementById('play-button');
  playButton.addEventListener('click', function(event) {
    videoElement.play();
  });
});

window.addEventListener('resize', function(event) {
  console.log("window resized");
});

function initializeIMA() {
  console.log("initializing IMA");
}

function loadAds(event) {
  // Prevent this function from running on if there are already ads loaded
  if(adsLoaded) {
    return;
  }
  adsLoaded = true;

  // Prevent triggering immediate playback when ads are loading
  event.preventDefault();

  console.log("loading ads");
}

5. विज्ञापन कंटेनर बनाना

ज़्यादातर ब्राउज़र में, IMA SDK, विज्ञापन और कंटेनर, दोनों को दिखाने के लिए एक खास विज्ञापन कंटेनर एलिमेंट का इस्तेमाल करता है विज्ञापन से जुड़े यूज़र इंटरफ़ेस (यूआई) एलिमेंट. इस कंटेनर का साइज़ इस तरह होना चाहिए कि चैनल के वीडियो एलिमेंट के स्क्रीन पर सबसे ऊपर बाईं ओर. इस कंटेनर में रखे गए विज्ञापनों की ऊंचाई और चौड़ाई को adsManager ऑब्जेक्ट है, इसलिए आपको इन वैल्यू को मैन्युअल तौर पर सेट करने की ज़रूरत नहीं है.

इस विज्ञापन कंटेनर एलिमेंट को लागू करने के लिए, पहले एक नया div बनाएं video-container एलिमेंट. इसके बाद, एलिमेंट को ऊपर बाईं ओर रखने के लिए, सीएसएस को अपडेट करें video-element के कोने में मौजूद है. आखिर में, कंटेनर के लिए एक वैरिएबल तय करें initializeIMA() फ़ंक्शन, जो पेज के लोड होने पर चलता है.

index.html 
...

  <div id="video-container">
    <video id="video-element" controls>
      <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
      <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
    </video>
    <div id="ad-container"></div>
  </div>

...
style.css 
...

#ad-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
}

6. AdsLoader को शुरू करने की प्रोसेस शुरू करें और विज्ञापन का अनुरोध करें

विज्ञापनों के किसी सेट का अनुरोध करने के लिए, ima.AdsLoader इंस्टेंस बनाएं. यह इंस्टेंस यह इनपुट के तौर पर AdDisplayContainer ऑब्जेक्ट को लेता है. इसका इस्तेमाल, प्रोसेस करने के लिए किया जा सकता है किसी विज्ञापन टैग के यूआरएल से जुड़े ima.AdsRequest ऑब्जेक्ट. इसमें उपयोग किया गया विज्ञापन टैग इस उदाहरण में 10 सेकंड का प्री-रोल विज्ञापन है. इसका या किसी भी विज्ञापन टैग यूआरएल की जांच करने के लिए, IMA वीडियो सुइट इंस्पेक्टर.

सबसे सही तरीका यह है कि पूरे डेटा के लिए, ima.AdsLoader का सिर्फ़ एक इंस्टेंस बनाए रखें पेज का लाइफ़साइकल. अन्य विज्ञापन अनुरोध करने के लिए, एक नया ima.AdsRequest बनाएं ऑब्जेक्ट है, लेकिन उसी ima.AdsLoader का फिर से इस्तेमाल करें. ज़्यादा जानकारी के लिए, देखें IMA SDK के बारे में अक्सर पूछे जाने वाले सवाल.

ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var 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 = videoElement.clientWidth;
  adsRequest.linearAdSlotHeight = videoElement.clientHeight;
  adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;
  adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;

  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}

7. AdsLoader इवेंट के बारे में सुनें

जब विज्ञापन लोड हो जाते हैं, तो ima.AdsLoader ADS_MANAGER_LOADED इवेंट. कॉलबैक को पास किए गए इवेंट को पार्स करें, ताकि AdsManager ऑब्जेक्ट. AdsManager, विज्ञापन के रिस्पॉन्स के हिसाब से अलग-अलग विज्ञापन लोड करता है टैग यूआरएल.

इसके अलावा, लोड होने की प्रोसेस के दौरान होने वाली किसी भी गड़बड़ी को ठीक करें. अगर विज्ञापन नहीं दिखते लोड करते समय, सुनिश्चित करें कि मीडिया प्लेबैक विज्ञापनों के बिना जारी रहे, ताकि उपयोगकर्ता अनुभव को बेहतर बनाना.

ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;
var adsManager;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerLoaded,
      false);
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError,
      false);

...

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Instantiate the AdsManager from the adsLoader response and pass it the video element
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
}

function onAdError(adErrorEvent) {
  // Handle the error logging.
  console.log(adErrorEvent.getError());
  if(adsManager) {
    adsManager.destroy();
  }
}

8. AdsManager शुरू करें

विज्ञापन चलाना शुरू करने के लिए, आपको AdsManager शुरू करना होगा. मोबाइल पर पूरी तरह से काम करने के लिए यह किसी उपयोगकर्ता के इंटरैक्शन से ट्रिगर होना चाहिए.

ads.js 
...

function loadAds(event) {
  // prevent this function from running on every play event
  if(adsLoaded) {
    return;
  }
  adsLoaded = true;

  // prevent triggering immediate playback when ads are loading
  event.preventDefault();

  console.log("loading ads");

  // Initialize the container. Must be done via a user action on mobile devices.
  videoElement.load();
  adDisplayContainer.initialize();

  var width = videoElement.clientWidth;
  var height = videoElement.clientHeight;
  try {
    adsManager.init(width, height, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    // Play the video without ads, if an error occurs
    console.log("AdsManager could not be started");
    videoElement.play();
  }
}

...

9. AdsManager को रिस्पॉन्सिव बनाना

यह पक्का करने के लिए कि विज्ञापनों का साइज़, वीडियो प्लेयर के साइज़ के हिसाब से डाइनैमिक तौर पर साइज़ के हिसाब से बदला जाए. ऐसा तब होगा, जब स्क्रीन पर अगर स्क्रीन का साइज़ या ओरिएंटेशन बदला जाता है, तो विंडो का साइज़ बदलने वाला इवेंट, adsManager.resize() को कॉल करेगा.

ads.js 
...

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

...

10. AdsManager के इवेंट के बारे में जानें

AdsManager ऐसे कई इवेंट भी ट्रिगर करता है जिन्हें हैंडल करना ज़रूरी होता है. इन इवेंट का इस्तेमाल किया जा चुका है का इस्तेमाल किया जा सकता है.

गड़बड़ियों को ठीक करना

AdsLoader के लिए बनाया गया गड़बड़ी हैंडलर, AdsManager. इसके लिए, उसी कॉलबैक फ़ंक्शन के साथ एक नया इवेंट हैंडलर जोड़ा जा सकता है.

ads.js 
...

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);

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

...

इवेंट चलाने और रोकने की सुविधा ट्रिगर करना

जब AdsManager, डिसप्ले के लिए विज्ञापन दिखाने के लिए तैयार होता है, तो यह CONTENT_PAUSE_REQUESTED इवेंट. इस इवेंट को रोकने के लिए, पहले से मौजूद वीडियो प्लेयर. इसी तरह, जब कोई विज्ञापन पूरा होता है, तो AdsManager CONTENT_RESUME_REQUESTED इवेंट. इस इवेंट को फिर से शुरू करके, इस इवेंट को मैनेज करें: पहले से मौजूद वीडियो विज्ञापन के मकसद से बनाया गया है.

ads.js 
...

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);

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

...

function onContentPauseRequested() {
  videoElement.pause();
}

function onContentResumeRequested() {
  videoElement.play();
}

मोबाइल डिवाइस पर क्लिक-टू-पॉज़ ट्रिगर करना

AdContainer, वीडियो एलिमेंट को ओवरले करता है. इसलिए, लोग इसके साथ सीधे इंटरैक्ट नहीं कर सकते पहले से मौजूद प्लेयर. इससे मोबाइल डिवाइसों का इस्तेमाल करने वाले वे लोग भ्रमित हो सकते हैं जो प्लेबैक को रोकने के लिए, वीडियो प्लेयर. इस समस्या को ठीक करने के लिए, IMA SDK ऐसे सभी क्लिक को पास कर देता है जो IMA, विज्ञापन ओवरले से AdContainer एलिमेंट तक मैनेज करता है, जहां ये हैंडल किया गया. यह गैर-मोबाइल ब्राउज़र पर लीनियर विज्ञापनों पर लागू नहीं होता, क्योंकि विज्ञापन पर क्लिक करने से क्लिक होने का लिंक.

क्लिक-टू-पॉज़ लागू करने के लिए, AdContainer में क्लिक हैंडलर जोड़ें और प्ले ट्रिगर करें या वीडियो में मौजूद इवेंट को रोकें.

ads.js 
...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adContainer.addEventListener('click', adContainerClick);
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

...

function adContainerClick(event) {
  console.log("ad container clicked");
  if(videoElement.paused) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
}

...

नॉन-लीनियर विज्ञापनों पर प्ले ट्रिगर करना

जब विज्ञापन चलाए जाने के लिए तैयार होता है, तब AdsManager वीडियो को रोक देता है, लेकिन व्यवहार, नॉन-लीनियर विज्ञापनों के लिए ज़िम्मेदार नहीं होता है. इस वजह से, कॉन्टेंट को विज्ञापन दिखाया जाता है. नॉन-लीनियर विज्ञापनों का इस्तेमाल करने के लिए, AdsManager से सुनें LOADED इवेंट. इसके बाद, देखें कि विज्ञापन लीनियर है या नहीं. अगर नहीं है, तो वीडियो एलिमेंट.

ads.js 
...

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);

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

...

function onAdLoaded(adEvent) {
  var ad = adEvent.getAd();
  if (!ad.isLinear()) {
    videoElement.play();
  }
}

हो गया! अब आप IMA SDK से विज्ञापन दिखाने का अनुरोध कर रहे हैं और उन्हें दिखा रहे हैं. इस बारे में ज़्यादा जानने के लिए SDK टूल की बेहतर सुविधाओं के बारे में जानने के लिए, अन्य गाइड देखें या GitHub पर सैंपल.