लीनियर डिसप्ले विज्ञापन दिखाने की सुविधा चालू करना

HTML5 के लिए IMA SDK, लीनियर वीडियो विज्ञापनों के साथ-साथ लीनियर डिसप्ले विज्ञापनों के साथ भी काम करता है. लीनियर वीडियो विज्ञापनों के बारे में ज़्यादा जानने के लिए, वीडियो विज्ञापनों की खास जानकारी देखें.

लीनियर डिसप्ले विज्ञापनों को चालू करने से, आपके विज्ञापन स्पेस की मांग बढ़ सकती है. ऐसा इसलिए, क्योंकि लीनियर डिसप्ले विज्ञापन, आपके विज्ञापन स्पेस के लिए लीनियर वीडियो विज्ञापनों के साथ प्रतिस्पर्धा करते हैं. आईएमए, लीनियर डिसप्ले विज्ञापनों को रेंडर करता है. हालांकि, इसके लिए आपको वीडियो कॉन्टेंट की पहचान करने की सुविधा सेट अप करनी होगी. आईएमए कॉन्टेंट की पहचान करने की सुविधा को लागू करने का तरीका इस बात पर निर्भर करता है कि आपने कॉन्टेंट प्लेयर को विज्ञापन प्लेयर के समान ऑरिजिन फ़्रेम में बनाया है या विज्ञापन प्लेयर को क्रॉस-ऑरिजिन फ़्रेम में बनाया है.

इस गाइड में, लीनियर डिसप्ले विज्ञापन दिखाने के लिए कॉन्टेंट की पहचान करने की सुविधा सेट अप करने, कॉन्टेंट वीडियो प्लेयर बदलने, और कॉन्टेंट सिग्नल इकट्ठा करना बंद करने के बारे में बताया गया है.

कॉन्टेंट की पहचान करने वाली सुविधा सेट अप करना

विज्ञापन दिखाने के अनुरोधों के लिए लीनियर डिसप्ले विज्ञापन दिखाने की सुविधा चालू करने के लिए, यह तरीका अपनाएं:

एक ही ऑरिजिन

अगर IMA SDK और आपके कॉन्टेंट प्लेयर का ऑरिजिन एक ही है, तो इनमें से कोई एक काम करें:

  • सबसे सही तरीका वीडियो प्लेयर को AdsManagerLoadedEvent.getAdsManager() कॉल में पास करें. getAdsManager() की मदद से, currentTime प्रॉपर्टी वाला ऑब्जेक्ट पास किया जा सकता है. हालांकि, कॉन्टेंट की पहचान करने की सुविधा का इस्तेमाल करने के लिए, आपको getAdsManager() में HTMLVideoElement इंस्टेंस पास करना होगा.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • अगर AdsManagerLoadedEvent.getAdsManager() कॉल के दौरान कॉन्टेंट प्लेयर उपलब्ध नहीं कराया जा सकता, तो वीडियो प्लेयर के साथ AdsManager.configureAdsManager() मेथड को कॉल करें. कॉन्टेंट की पहचान करने वाली सुविधा का इस्तेमाल करने के लिए, यह ज़रूरी है कि वीडियो HTMLVideoElement हो.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

अगर आपने कॉन्टेंट की पहचान करने की सुविधा सेट अप नहीं की है, तो हो सकता है कि Google के विज्ञापन सर्वर, लीनियर डिसप्ले विज्ञापन दिखाना बंद कर दें.

अगर आपका कॉन्टेंट प्लेयर उसी ऑरिजिन में है जिसमें IMA SDK टूल लोड किया जाता है, तो आपको कॉन्टेंट प्लेयर को बदलने या कॉन्टेंट सिग्नल इकट्ठा करने की प्रोसेस को रोकने के लिए, IMA के लागू होने के तरीके में कोई बदलाव करने की ज़रूरत नहीं है.

क्रॉस ऑरिजिन

अगर IMA SDK आपके कॉन्टेंट प्लेयर के लिए क्रॉस ऑरिजिन है, तो IMA CrossOriginProxy क्लास के ज़रिए कॉन्टेंट की पहचान करने वाले सिग्नल इकट्ठा कर सकता है. इस क्लास की मदद से, IMA SDK टूल, लीनियर डिसप्ले विज्ञापन के सही प्लेसमेंट की पुष्टि करता है. साथ ही, वीडियो कॉन्टेंट के विषय से जुड़े सिग्नल इकट्ठा करता है. अगर IMA SDK को क्रॉस-डोमेन iframe में रखा जाता है, तो आपको CrossOriginProxy क्लास लागू करनी होगी.

अगर आपने CrossOriginProxy क्लास को लागू किए बिना, अपने कॉन्टेंट प्लेयर को IMA SDK टूल के क्रॉस ऑरिजिन पर रखा है, तो हो सकता है कि Google के विज्ञापन सर्वर, लीनियर डिसप्ले विज्ञापन दिखाना बंद कर दें.

अपने ऐप्लिकेशन में CrossOriginProxy क्लास लोड करने के लिए, यह तरीका अपनाएं:

  1. अपनी एचटीएमएल फ़ाइल में, ima_proxy.js फ़ाइल इंपोर्ट करें:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. main.js फ़ाइल में, CrossOriginProxy इंस्टेंस पाएं.

  3. setVideoElements() तरीके को उन सभी वीडियो प्लेयर के कलेक्शन के साथ कॉल करें जो आपके पेज या ऐप्लिकेशन पर विज्ञापन दिखाते हैं.

विज्ञापन दिखाने का अनुरोध करने से पहले, आपको setVideoElements() कॉल के साथ CrossOriginProxy इंस्टेंस में वीडियो एलिमेंट पास करने होंगे. यहां दिए गए उदाहरण में, एक कॉन्टेंट वीडियो प्लेयर वाला कलेक्शन पास किया गया है:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

कॉन्टेंट वीडियो प्लेयर बदलना

अगर आपको कॉन्टेंट वीडियो प्लेयर को बदलना है या कोई दूसरा कॉन्टेंट वीडियो प्लेयर जोड़ना है, तो आपको setVideoElements() तरीके में एक नया कलेक्शन पास करना होगा. जब नया setVideoElements() कॉल किया जाता है, तो आईएमए नए कॉन्टेंट प्लेयर के लिए सिग्नल इकट्ठा करना शुरू कर देता है. साथ ही, पिछले कॉल में पास किए गए किसी भी कॉन्टेंट प्लेयर के लिए सिग्नल इकट्ठा करना बंद कर देता है.

यहां दिए गए उदाहरण में, नए वीडियो एलिमेंट को CrossOriginProxy क्लास में पास किया गया है:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

विज्ञापन दिखने के बाद सिग्नल इकट्ठा करना बंद करें

विज्ञापनों को दिखाने और AdsLoader.destroy() तरीके को कॉल करने के बाद, आपको खाली कलेक्शन के साथ setVideoElements() तरीके को भी कॉल करना होगा. खाली कलेक्शन के साथ setVideoElements() कॉल करने से, आईएमए के पास मौजूद कॉन्टेंट प्लेयर का रेफ़रंस हट जाता है. साथ ही, मेमोरी लीक की समस्याएं नहीं होती हैं.