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

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