सिर्फ़ ऑडियो वाले कॉन्टेंट पर विज्ञापन दिखाने का अनुरोध करना

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

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

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

• pause()
• resume()
• setVolume()

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

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

• AdsManager.getAdSkippableState()
• AdEvent.getAdData()
• Ad.getSkipTimeOffset()

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

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/interface/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 क्लास, <button> में display: none; जोड़ती है.

/**
 * 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 सेट अप करने के लिए, ये मुख्य बदलाव करने ज़रूरी हैं. लागू करने से जुड़ी समस्याओं के लिए, Ad Manager सहायता केंद्र से संपर्क करें.