ऑडियो विज्ञापन

IMA HTML5 SDK टूल, ऑडियो विज्ञापनों के साथ काम करता है. हालांकि, उनका सेटअप वीडियो विज्ञापनों जैसे ही होता है, लेकिन उनमें कुछ खास अंतर होते हैं. IMA सेटअप के जिन हिस्सों के बारे में इस गाइड में जानकारी नहीं दी गई है, उनके लिए HTML5 सेटअप शुरू करने की गाइड देखें.

कॉन्टेंट चलाने के लिए, <audio> टैग का इस्तेमाल करना

AdDisplayContainer का कंस्ट्रक्टर, videoElement नाम का दूसरा तर्क लेता है. IMA, इसे कॉन्टेंट प्लेयर के तौर पर ट्रैक करता है. यह आर्ग्युमेंट <video> या <audio>, दोनों टैग को स्वीकार करता है. ऑडियो कॉन्टेंट और विज्ञापनों के लिए, इस गाइड में AdDisplayContainer बनाने के लिए, <audio> टैग इस्तेमाल करने का सुझाव दिया गया है. अगर आपके पास वीडियो कॉन्टेंट है, तो ऑडियो और वीडियो, दोनों तरह के विज्ञापनों को दिखाने के लिए <video> टैग का इस्तेमाल किया जा सकता है:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

AdDisplayContainer को छिपाना

IMA HTML5 SDK टूल के लिए अब भी AdDisplayContainer की ज़रूरत होती है, भले ही विज्ञापन या कॉन्टेंट में डिसप्ले वाला हिस्सा न हो. इस वजह से, हमारा सुझाव है कि आप AdDisplayContainer को छिपाएं. नीचे उदाहरण में बताया गया है कि एलिमेंट को कैसे छिपाया जा सकता है:

style.css

.ad-container {
  display: none;
}

कस्टम कंट्रोल

AdDisplayContainer छिपा हुआ है. इसलिए, विज्ञापन के लिए ब्रेक के दौरान वीडियो चलाने की सुविधा को मैनेज करने के लिए, कस्टम कंट्रोल की ज़रूरत होती है. AdsManager में ऐसे तरीके हैं जिनका इस्तेमाल इन कस्टम कंट्रोल को लागू करने के लिए किया जा सकता है:

स्किप किए जा सकने वाले विज्ञापनों को मैनेज करना

कोई AdDisplayContainer नहीं दिख रहा है, इसलिए IMA SDK विज्ञापन छोड़ें बटन नहीं दिखा सकता. स्किप किए जा सकने वाले विज्ञापनों को मैनेज करने के लिए, IMA के इन तरीकों का इस्तेमाल करें:

नीचे दिए गए सैंपल कोड में इसका तरीका बताया गया है.

ads.js

updateSkippable फ़ंक्शन को सेट अप करके यह तय किया जा सकता है कि किसी विज्ञापन को स्किप किया जा सकता है या नहीं. साथ ही, यह भी पता लगाया जा सकता है कि उस विज्ञापन को कब स्किप किया जा सकता है. इस फ़ंक्शन को हर AD_PROGRESS IMA इवेंट के लिए कॉल किया जाना चाहिए. IMA इवेंट के लिए ऑडियंस सेट अप करने के तरीके के बारे में निर्देश पाने के लिए, शुरुआती निर्देश देखें.

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

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

वीडियो विज्ञापनों के उलट, IMA ऑडियो विज्ञापनों के लिए स्किप बटन नहीं देता. डेवलपर को स्किप किए जा सकने वाले विज्ञापनों के लिए, पसंद के मुताबिक यूज़र इंटरफ़ेस (यूआई) जोड़ना चाहिए. ऐसा करने के लिए, आसान <button> टैग का इस्तेमाल करें. यह updateSkipUI फ़ंक्शन, 'स्किप करें' बटन को इन चीज़ों के आधार पर अपडेट करता है: क्या विज्ञापन स्किप किया जा सकता है, फ़िलहाल स्किप किया जा सकता है या नहीं, और विज्ञापन के स्किप होने में कितना समय बचा है. यह '.hidden' क्लास का इस्तेमाल करता है, जो IMA से उपलब्ध नहीं है. .hidden क्लास, display: none; को <button> में जोड़ती है.

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

आखिर में, उपयोगकर्ता के आपके कस्टम स्किप बटन पर क्लिक करने के लिए, लिसनर सेट करें. विज्ञापनों को स्किप करने के लिए, adsManager.skip() फ़ंक्शन को कॉल करें.

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

IMA SDK को ऑडियो विज्ञापनों के साथ सेट अप करने के लिए, ये मुख्य बदलाव करने होंगे. लागू करने से जुड़ी समस्याओं के जवाब पाने के लिए, IMA SDK तकनीकी फ़ोरम पर जाएं.