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

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 में ऐसे तरीके हैं जिनका इस्तेमाल इन कामों के लिए किया जा सकता है ये कस्टम नियंत्रण लागू करें:

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

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

नीचे दिया गया उदाहरण कोड इसे करने का तरीका दिखाता है.

ads.js

आपके पास updateSkippable फ़ंक्शन सेट अप करके यह तय करने का विकल्प है कि कोई विज्ञापन कब है और क्या नहीं को छोड़ा जा सकता है. यह फ़ंक्शन हर AD_PROGRESS 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 के लिए तकनीकी फ़ोरम.