ऑडियो विज्ञापनों के पोस्टर की इमेज

इस गाइड में बताया गया है कि ऑडियो विज्ञापन चलने पर, वीडियो प्लेयर पर पोस्टर इमेज लगाने के लिए, IMA HTML5 SDK टूल का इस्तेमाल कैसे किया जाता है. इसका इस्तेमाल तब किया जाना चाहिए, जब ad_type=audio_video को आपके VAST यूआरएल के अनुरोध में सेट किया गया हो. ऐसा करने से विज्ञापनों से बेहतर कमाई की जा सकती है, क्योंकि ऑडियो और वीडियो, दोनों तरह के विज्ञापन दिखाए जा सकते हैं. ज़्यादा जानकारी के लिए, ad_type दस्तावेज़ और वीडियो कॉन्टेंट में ऑडियो देखें.

IMA के बुनियादी इंटिग्रेशन में बदलाव करके, इस गाइड का पालन करें या इस सुविधा के साथ पूरी तरह से इंटिग्रेट करने के लिए, वीडियो सैंपल ऐप्लिकेशन में ऑडियो देखें.

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

  • वीडियो विज्ञापनों के लिए IMA HTML5 SDK को लागू करने वाला ऐप्लिकेशन. ज़्यादा जानकारी के लिए, IMA HTML5 के शुरुआती निर्देश देखें.
  • यह एक डिफ़ॉल्ट पोस्टर इमेज होती है, जो किसी ऑडियो विज्ञापन को प्रासंगिक ओवरले इमेज के बिना पेश किए जाने पर वीडियो प्लेयर को ओवरले करती है. वीडियो प्लेयर में इमेज फ़िट होने के लिए, इसकी चौड़ाई वीडियो प्लेयर की चौड़ाई से कम या उसके बराबर होनी चाहिए. साथ ही, इसकी ऊंचाई वीडियो प्लेयर की ऊंचाई से कम से कम 75 पिक्सल कम होनी चाहिए.

पोस्टर इमेज की सुविधा चालू करें

ऑडियो और वीडियो विज्ञापन का अनुरोध करने से पहले, पोस्टर इमेज के डिफ़ॉल्ट यूआरएल पर audioPosterImageEnabled फ़ीचर फ़्लैग को true और audioPosterImageDefaultUrl फ़ीचर फ़्लैग को सेट करें. AdDisplayContainer बनाने से पहले, ImaSdkSettings.setFeatureFlags() एपीआई का इस्तेमाल करके ऐसा करें. जब यह सेट हो और कोई ऑडियो विज्ञापन चल रहा हो, तो IMA अपने-आप विज्ञापन से जुड़ी इमेज को वीडियो प्लेयर के ऊपर लगा देता है. IMA, वीडियो प्लेयर में फ़िट होने वाली सबसे बड़ी सहयोगी विज्ञापन इमेज चुनता है और वीडियो प्लेयर से कम से कम 75 पिक्सल छोटी होती है. अगर विज्ञापन के VAST (वीडियो विज्ञापन देने के लिए टेंप्लेट) में कोई ऐसी इमेज शामिल नहीं है जिसका इस्तेमाल IMA, ओवरले के रूप में कर सकता है, तो IMA आपकी बताई गई डिफ़ॉल्ट इमेज का इस्तेमाल ओवरले के रूप में करता है.

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  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 = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}