वर्कस्पेस खोलें

इम्प्लीमेंटेशन गाइड

प्री-रोल वीडियो

Pre-roll video ads

प्लेयर के अंदर चलने वाला वीडियो विज्ञापन, उस वीडियो से पहले जिसे व्यक्ति ने देखना चुना है।

  • Ad Manager
  • Ad Exchange
  • AdSense (Ad Manager के ज़रिए)
  • वीडियो प्लेयर के अंदर (मोबाइल और डेस्कटॉप)
डेस्कटॉप
मोबाइल

1 मिनट में समझें

प्री-रोल वीडियो क्या है

जब आप सिनेमा जाते हैं, तो फ़िल्म शुरू होने से पहले कुछ ट्रेलर और विज्ञापन चलते हैं, याद है? प्री-रोल वीडियो ठीक वही है, बस आपकी साइट पर। व्यक्ति वीडियो देखने के लिए प्ले दबाता है और कंटेंट दिखने से पहले उसी प्लेयर में एक विज्ञापन चलता है। प्लेयर वह बॉक्स है जहाँ वीडियो चलता है, प्ले, पॉज़ और वॉल्यूम के बटनों के साथ। विज्ञापन खत्म होते ही चुना हुआ वीडियो शुरू हो जाता है।

इसके काम करने के लिए प्लेयर को विज्ञापन माँगना आना चाहिए। Google कोड का एक पैकेज देता है जिसे IMA SDK कहते हैं, और आप इसे प्लेयर के साथ लगाते हैं। यह विज्ञापन टैग के ज़रिए Ad Manager से अनुरोध करता है। विज्ञापन टैग एक इंटरनेट पता है जिसमें जगह की जानकारी होती है, जैसे विज्ञापन यूनिट और प्लेयर का साइज़। जवाब VAST में आता है, जो एक मानक फ़ॉर्मेट है, एक रेसिपी की तरह जो बताती है कि कौन सा वीडियो चलाना है और व्यूज़ कैसे गिनने हैं। जब साइट वीडियो विज्ञापन के नियम इस्तेमाल करती है, तो जवाब VMAP में आ सकता है, जो टीवी के कार्यक्रम-सारणी जैसा है और बताता है कि हर ब्रेक कब आएगा।

Google वीडियो के अपने आप शुरू होने, यानी ऑटोप्ले, के बारे में भी एक अहम बात बताता है। Chrome और Safari जैसे ब्राउज़रों के अपने नियम हैं, और अक्सर वीडियो तभी अपने आप शुरू हो सकता है जब उसमें आवाज़ न हो। ब्राउज़र इजाज़त देता है या नहीं, यह जानने का कोई सीधा सवाल नहीं है: एकमात्र तरीका चलाकर देखना है। इसीलिए IMA की गाइड कहती है कि मोबाइल पर विज्ञापन का बॉक्स व्यक्ति की किसी क्रिया से चालू होना चाहिए, जैसे प्ले बटन पर टैप। और अगर प्लेयर अपने आप या बिना आवाज़ के शुरू होने वाला है, तो उसे अनुरोध में यह बताना चाहिए, ताकि सिर्फ़ वही विज्ञापन आएँ जो इस तरह चल सकते हैं।

प्री-रोल तब ठीक है जब वीडियो ही आने की वजह हो, जैसे कोई पाठ, कोई रेसिपी या वीडियो खबर। Google की वीडियो नीति में इस स्लॉट को In-stream कहते हैं, यानी उस कंटेंट के अंदर जिसे व्यक्ति ने खुद देखना चुना है, और इसे सही ढंग से घोषित करना ज़रूरी है। हमेशा याद रखें: व्यक्ति वीडियो के लिए आया है, इसलिए विज्ञापन को कंट्रोल में दखल नहीं देना चाहिए और कंटेंट को अटकाना नहीं चाहिए।

चरण-दर-चरण

कैसे लागू करें

  1. वीडियो विज्ञापन यूनिट बनाएँAd Manager में प्री-रोल वीडियो और ऑडियो विज्ञापन ब्लॉक इस्तेमाल करता है। प्लेयर जो टैग इस्तेमाल करेगा, वह इसी ब्लॉक से आता है।
  2. विज्ञापन टैग बनाएँइन्वेंटरी, विज्ञापन ब्लॉक पर जाएँ, ब्लॉक खोलें और टैग पर क्लिक करें। वीडियो और ऑडियो के लिए Google पब्लिशर टैग चुनें, चरणों से गुज़रें और टैग कॉपी करें। वर्ग कोष्ठक के बीच के मान प्लेयर को अनुरोध के समय भरने होंगे।
  3. पेज में IMA SDK लगाएँअपने कोड से पहले IMA SDK की स्क्रिप्ट लोड करें। विज्ञापन के लिए वीडियो के ऊपर एक बॉक्स बनाएँ और उस बॉक्स को AdDisplayContainer से वीडियो से जोड़ें। यह IMA का वह हिस्सा है जो विज्ञापन दिखाता है।
  4. विज्ञापन माँगेंअपने टैग के साथ एक AdsLoader और एक AdsRequest बनाएँ। लीनियर विज्ञापन स्लॉट की चौड़ाई और ऊँचाई बताएँ। इससे IMA को कई विज्ञापन आने पर सही विज्ञापन चुनने में मदद मिलती है।
  5. कंटेंट को रोकें और फिर चलाएँजब IMA रोकने को कहे (इवेंट CONTENT_PAUSE_REQUESTED), तो वीडियो रोक दें। जब जारी रखने को कहे (CONTENT_RESUME_REQUESTED), तो फिर से चलाएँ। अगर गलती हो जाए, तो विज्ञापन मैनेजर को नष्ट करें और वीडियो को बिना विज्ञापन के चलने दें।
  6. व्यक्ति के क्लिक से शुरू करेंप्ले बटन पर विज्ञापन का बॉक्स चालू करें और फिर AdsManager को इनिशियलाइज़ करके शुरू करें। IMA की गाइड कहती है कि मोबाइल पर विज्ञापन का बॉक्स व्यक्ति की किसी क्रिया से चालू होना चाहिए।

लागू किया गया उदाहरण

कोड और स्क्रीन पर यह कैसा दिखता है

यह वीडियो पेज पर जाता है: ऊपर IMA की स्क्रिप्ट, ऊपर विज्ञापन के बॉक्स वाला प्लेयर, और वह कोड जो व्यक्ति के देखें पर क्लिक करने पर प्री-रोल माँगता है।
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
डेस्कटॉप परविज्ञापन प्लेयर के अंदर, उसी जगह चलता है जहाँ वीडियो चलने वाला है, कंटेंट शुरू होने से पहले। खत्म होते ही चुना हुआ वीडियो शुरू हो जाता है।
मोबाइल परयह भी प्लेयर के अंदर दिखता है, आमतौर पर व्यक्ति के प्ले पर टैप करने के बाद। iPhone पर वीडियो को पेज के अंदर चलने के लिए playsinline एट्रिब्यूट चाहिए, पूरी स्क्रीन वाले प्लेयर में नहीं।

Google क्या सलाह देता है

क्या करें और क्या नहीं

कर सकते हैं

  • व्यक्ति के चुने वीडियो से पहले प्लेयर के अंदर विज्ञापन चलाना, IMA SDK की मदद से, जो उन टूल में से एक है जो Google In-stream स्लॉट के लिए माँगता है।
  • विज्ञापन को प्ले बटन पर व्यक्ति के क्लिक से शुरू करना, जैसा IMA की गाइड मोबाइल के लिए सुझाती है।
  • ऑटोप्ले इस्तेमाल करना, बिना आवाज़ के भी, बशर्ते प्लेयर अनुरोध में बता दे कि वह अपने आप चलेगा और म्यूट पर चलेगा या नहीं।
  • विज्ञापन में गलती आने पर वीडियो को सामान्य रूप से चलने देना, जैसा Google का उदाहरण करता है।

नहीं कर सकते

  • गलत स्लॉट घोषित नहीं किया जा सकता: वीडियो वाले प्लेयर का विज्ञापन In-stream या कंपैनियन कंटेंट (मुख्य कंटेंट के साथ चलने वाला वीडियो) के रूप में घोषित होना चाहिए।
  • विज्ञापन और वीडियो के कंट्रोल ढके हुए, छिपे हुए या काम न करने वाले नहीं रख सकते।
  • एक साथ आवाज़ के साथ अपने आप चलने वाले एक से ज़्यादा वीडियो नहीं हो सकते, और स्क्रीन पर दिखता अपने आप चलने वाला एक से ज़्यादा प्लेयर भी नहीं हो सकता।
  • जगह का कम से कम 50% हिस्सा दिखने से पहले विज्ञापन अपने आप शुरू नहीं हो सकता।
  • YouTube वीडियो से पैसे कमाने के लिए IMA उत्पादों का इस्तेमाल न करें।

सुझाव

सही तरीके से करने के लिए

सावधानी

आम गलतियां

फ़ाइल को सीधे कंप्यूटर पर खोलना

IMA की गाइड कहती है कि पेज को वेब सर्वर से चलाएँ, भले ही वह लोकल हो। HTML फ़ाइल सीधे खोलने से टेस्ट फ़ेल हो सकता है।

मोबाइल पर व्यक्ति की क्रिया के बिना शुरू करना

मोबाइल पर विज्ञापन का बॉक्स व्यक्ति की किसी क्रिया से चालू होना चाहिए, जैसे प्ले पर टैप। इसके बिना विज्ञापन नहीं चल सकता।

विज्ञापन की गलती को न संभालना

खराब VAST जवाब से गलती हो सकती है। Google का उदाहरण विज्ञापन मैनेजर को नष्ट करता है और वीडियो चला देता है, ताकि व्यक्ति रुकी हुई स्क्रीन पर न अटके।

साइज़ ठीक करना भूल जाना

जब विंडो का साइज़ बदलता है, तो Google का उदाहरण वीडियो के साइज़ के साथ AdsManager का रीसाइज़ बुलाता है। इसके बिना विज्ञापन का साइज़ गलत हो सकता है।

अक्सर पूछे जाने वाले सवाल

क्या प्री-रोल के लिए मुझे विज्ञापन नियम चाहिए?

नहीं। प्लेयर IMA से VAST टैग माँग सकता है। Google कहता है कि विज्ञापन नियम का पैरामीटर (ad_rule) विज्ञापन दिखाने के लिए अनिवार्य नहीं है, सिर्फ़ वीडियो विज्ञापन नियम इस्तेमाल करने के लिए है।

VAST और VMAP में क्या फ़र्क है?

VAST वह जवाब है जो बताता है कि कौन सा विज्ञापन चलाना है। VMAP वह जवाब है जो विज्ञापन नियमों के साथ इस्तेमाल होता है और बताता है कि ब्रेक कब आएँगे। टैग output पैरामीटर से फ़ॉर्मेट चुनता है, जिसके मान vast और vmap जैसे होते हैं।

क्या प्री-रोल अपने आप चल सकता है?

हाँ, जब ब्राउज़र इजाज़त दे। Chrome और Safari ऑटोप्ले को सीमित करते हैं, खासकर आवाज़ के साथ। प्लेयर को टेस्ट करना चाहिए, अनुरोध में बताना चाहिए कि वह अपने आप और बिना आवाज़ के चलेगा, और मोबाइल पर विज्ञापन व्यक्ति की क्रिया से शुरू करना चाहिए।

अगर विज्ञापन लोड न हो तो क्या होता है?

Google की गाइड कहती है कि विज्ञापन लोड न होने पर भी वीडियो चलता रहे। उदाहरण में विज्ञापन मैनेजर हटा दिया जाता है और वीडियो बिना विज्ञापन के चलता है।

लाइब्रेरी

Google का आधिकारिक स्रोत

इस पेज की हर बात Google के आधिकारिक दस्तावेज़ों पर आधारित है। सीधे स्रोत पर पढ़ें:

क्या आपकी साइट इस फ़ॉर्मेट का सही इस्तेमाल करती है?

ऑडिट साइट को एक विज़िटर की तरह पढ़ता है, बिना कुछ क्लिक किए, और दिखाता है कि क्या ठीक करना है।

ऑडिट करें