सहभागी विज्ञापन

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

वीडियो और ओवरले मास्टर विज्ञापनों का अनुरोध करने के अलावा, IMA SDK का इस्तेमाल साथ-साथ चलने वाले एचटीएमएल विज्ञापन दिखाने के लिए भी किया जा सकता है. ये विज्ञापन एचटीएमएल एनवायरमेंट में दिखाए जाते हैं.

वीडियो विज्ञापन के साथ दिखने वाले विज्ञापनों का इस्तेमाल करें

वीडियो विज्ञापन के साथ दिखने वाले विज्ञापनों का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

1. अपने सहयोगी विज्ञापन बुक करें

आपको सबसे पहले उन सहयोगी विज्ञापनों को बुक करना होगा जिन्हें आपको अपने मास्टर विज्ञापनों के साथ दिखाना है. वीडियो विज्ञापन के साथ दिखने वाले विज्ञापन, Ad Manager में भेजे जा सकते हैं. आप हर मास्टर विज्ञापन के लिए, ज़्यादा से ज़्यादा छह सहयोगी विज्ञापन दिखा सकते हैं. इस तकनीक में, जब एक ही खरीदार पेज पर मौजूद सभी विज्ञापनों को कंट्रोल करता है, तो इसे रोडब्लॉक करना भी कहा जाता है.

2. अपने सहयोगी विज्ञापनों का अनुरोध करें

सहयोगी विज्ञापन, डिफ़ॉल्ट रूप से हर विज्ञापन अनुरोध के लिए चालू होते हैं.

3. प्रदर्शन सहयोगी विज्ञापन

वीडियो विज्ञापन के साथ दिखने वाले विज्ञापनों को रेंडर करने के दो तरीके हैं:

• अपने-आप Google पब्लिशर टैग (GPT) का इस्तेमाल करके
  अगर कंपैनियन विज्ञापनों को लागू करने के लिए GPT का इस्तेमाल किया जा रहा है, तो वे अपने-आप दिखते हैं. हालांकि, इसके लिए ज़रूरी है कि एचटीएमएल पेज पर साथ-साथ चलने वाले विज्ञापन स्लॉट का एलान किया गया हो और ये विज्ञापन एपीआई के साथ रजिस्टर हों. इसका मतलब है कि JavaScript और एचटीएमएल का div आईडी मेल खाना चाहिए. GPT इस्तेमाल करने के कुछ फ़ायदों के बारे में यहां बताया गया है:
  • कंपैनियन स्लॉट जागरूकता
  • अगर VAST रिस्पॉन्स में एचटीएमएल पेज पर तय स्लॉट की तुलना में कम सहयोगी विज्ञापन हैं, तो पब्लिशर के नेटवर्क से कंपैनियन बैकफ़िल
  • वीडियो विज्ञापन के उपलब्ध न होने पर, कंपैनियन मोड से अपने-आप जानकारी भरने की सुविधा
  • क्लिक-टू-प्ले वीडियो प्लेयर के लिए पहले से लोड किए गए सहयोगी विज्ञापन स्लॉट
  • अपने-आप होने वाली कंपैनियन रेंडरिंग, जिसमें HTMLResource और iFrameResource शामिल हैं
• मैन्युअल तरीके से Ad API का इस्तेमाल करना.

Google पब्लिशर टैग के साथ, वीडियो विज्ञापन के साथ दिखने वाले विज्ञापनों का इस्तेमाल करें

Google पब्लिशर टैग (GPT) की मदद से, आपकी साइट पर एचटीएमएल साथ-साथ चलने वाले विज्ञापन अपने-आप दिखते हैं. हमारा सुझाव है कि ज़्यादातर पब्लिशर GPT का इस्तेमाल करें. अगर GPT मुख्य वेब पेज पर लोड किया गया है (आईफ़्रेम में नहीं), तो HTML5 SDK टूल, GPT स्लॉट की पहचान करता है. आपको GPT दस्तावेज़ों में, IMA SDK के साथ GPT का इस्तेमाल करने के बारे में ज़्यादा जानकारी मिलेगी.

ध्यान दें: विज्ञापन दिखाने के लिए Google के इंटरैक्टिव मीडिया विज्ञापन SDK टूल का इस्तेमाल करने पर, विज्ञापन सर्वर को वापस रिपोर्ट की गई मेट्रिक में यह शामिल हो सकता है कि वेबसाइट पर आने वाले ने उस पेज से इंटरैक्ट किया है या नहीं जिस पर विज्ञापन दिखाए गए थे. Google के साथ हुए आपके कानूनी समझौते में डेटा इकट्ठा करने और उसके इस्तेमाल के बारे में जानकारी देने से जुड़ी ज़रूरी शर्तों का पालन करने के लिए, आपको अपनी वेबसाइट पर आने वाले लोगों को इसके बारे में बताना चाहिए.

अगर आपने किसी iframe में HTML5 SDK टूल होस्ट किया है, तो

अगर आप नीचे दी गई दोनों शर्तों को पूरा करते हैं, तो आपको एक और प्रॉक्सी स्क्रिप्ट शामिल करनी होगी, ताकि आपके GPT साथी सही तरीके से दिखाई दे:

1. HTML5 SDK को किसी IFrame में लोड करें.
2. मुख्य वेब पेज (IFrame के बाहर) पर GPT लोड करें.

इस स्थिति में अपने कंपैनियन को दिखाने के लिए, आपको SDK टूल लोड करने से पहले GPT प्रॉक्सी स्क्रिप्ट लोड करनी होगी:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

कुछ महत्वपूर्ण बातों का ध्यान रखें:

• SDK टूल को लोड करने वाले IFrame के अंदर कोई GPT लोड नहीं किया जाना चाहिए.
• GPT को सबसे ऊपर वाले पेज पर लोड किया जाना चाहिए, न कि किसी दूसरे iframe में.
• प्रॉक्सी स्क्रिप्ट उसी फ़्रेम में लोड होनी चाहिए जिसमें GPT मुख्य पेज पर होता है.

HTML में सहभागी विज्ञापन स्लॉट की घोषणा करें

इस सेक्शन में बताया गया है कि GPT का इस्तेमाल करके, साथ-साथ चलने वाले विज्ञापनों की जानकारी एचटीएमएल में कैसे दी जाती है. साथ ही, अलग-अलग स्थितियों के लिए सैंपल कोड भी दिया गया है. HTML5 SDK टूल के लिए, आपको अपने एचटीएमएल पेज में कुछ JavaScript जोड़नी होगी और साथ मिलकर काम करने वाले विज्ञापन स्लॉट की जानकारी देनी होगी.

ध्यान दें: पक्का करें कि नीचे दिए गए हर उदाहरण में, googletag.defineSlot मेथड कॉल में मान्य network और unit-path दिए गए हों. कॉल के लिए इस्तेमाल किए जा रहे असल उदाहरण के आधार पर, यह <head> या <body> टैग में मौजूद हो.

• उदाहरण 1: विज्ञापन स्लॉट को बुनियादी तौर पर लागू करना
• उदाहरण 2: डाइनैमिक विज्ञापन स्लॉट लागू करना
• उदाहरण 3: पहले से लोड किए गए विज्ञापन स्लॉट

उदाहरण 1: विज्ञापन स्लॉट को बुनियादी तौर पर लागू करना

नीचे दिए गए सैंपल कोड में, अपने एचटीएमएल पेज में gpt.js फ़ाइल को शामिल करने और किसी विज्ञापन स्लॉट का एलान करने का तरीका बताया गया है. घोषित विज्ञापन स्लॉट 728x90 पिक्सल का है. GPT, इस स्लॉट को इस साइज़ से मेल खाने वाले VAST जवाब में दिखाए गए सभी सहयोगी विज्ञापनों से भरने की कोशिश करता है. विज्ञापन स्लॉट का एलान करने के बाद, googletag.display() फ़ंक्शन उन्हें रेंडर कर सकता है. ऐसा पेज पर जहां भी किया जाता है वहां किया जाता है. ये स्लॉट कंपैनियन स्लॉट होते हैं, इसलिए विज्ञापन तुरंत नहीं दिखते. इसके बजाय, ये मास्टर वीडियो विज्ञापन के साथ दिखते हैं.

यहां इसे लागू करने का एक उदाहरण दिया गया है:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>
 

इसे आज़माएं

सही तरीके से लागू करने के लिए, नीचे दिया गया कोडपेन देखा जा सकता है.

उदाहरण 2: डाइनैमिक विज्ञापन स्लॉट लागू करना

कई बार आपको यह पता नहीं चल पाता कि पेज पर कितने विज्ञापन स्लॉट हैं, जब तक कि पेज का कॉन्टेंट रेंडर न हो जाए. नीचे दिए गए सैंपल कोड से पता चलता है कि पेज रेंडर होने के दौरान, विज्ञापन स्लॉट को कैसे तय किया जाता है. यह उदाहरण, पहले उदाहरण जैसा ही है. हालांकि, इसमें सिर्फ़ उन विज्ञापन स्लॉट को रजिस्टर किया जाता है जहां वे असल में दिखाए जाते हैं.

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

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>
 

इसे आज़माएं

किसी काम को लागू करने के लिए, नीचे दिया गया कोड देखा जा सकता है.

उदाहरण 3: पहले से लोड किए गए विज्ञापन स्लॉट

कुछ मामलों में, हो सकता है कि साथी विज्ञापन का अनुरोध करने से पहले आपको विज्ञापन स्लॉट में कुछ चीज़ें दिखानी पड़े. आम तौर पर, वीडियो विज्ञापन के साथ-साथ सहयोगी विज्ञापनों का अनुरोध किया जाता है. यह अनुरोध, पेज लोड होने के बाद किया जा सकता है. उदाहरण के लिए, वीडियो विज्ञापन के साथ-साथ चलने वाला विज्ञापन तभी लोड हो सकता है, जब उपयोगकर्ता क्लिक-टू-प्ले वीडियो पर क्लिक करे. ऐसे मामले में, सहयोगी विज्ञापन का अनुरोध करने से पहले, आपको विज्ञापन स्लॉट को भरने के लिए, एक सामान्य विज्ञापन का अनुरोध करने की ज़रूरत होगी. इस्तेमाल के इस उदाहरण में मदद पाने के लिए, कंपैनियन स्लॉट में स्टैंडर्ड वेब विज्ञापन दिखाए जा सकते हैं. पक्का करें कि वेब विज्ञापन, कंपैनियन स्लॉट के लिए टारगेट किए गए हों. कंपैनियन स्लॉट को ठीक उसी तरह टारगेट किया जा सकता है जिस तरह स्टैंडर्ड वेब विज्ञापन स्लॉट को टारगेट किया जाता है.

ध्यान दें: नीचे दिया गया सैंपल कोड, पहले उदाहरण में दिए गए कोड जैसा ही है. हालांकि, इसमें बोल्ड किए गए सेक्शन का अपवाद है. इस मामले में, आपको वीडियो विज्ञापन यूनिट के बजाय, प्रीलोड वाले विज्ञापन की विज्ञापन नेटवर्क कंपनी और यूनिट पाथ देना होगा.

यहां, लागू करने के तरीके का एक उदाहरण दिया गया है जिसके बारे में अभी-अभी बताया गया है:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

इसे आज़माएं

सही तरीके से लागू करने के लिए, नीचे दिया गया कोड-पेन देखा जा सकता है.

Ad API के साथ सहयोगी विज्ञापनों का इस्तेमाल करें

इस सेक्शन में, Ad एपीआई का इस्तेमाल करके, साथ-साथ चलने वाले विज्ञापन दिखाने का तरीका बताया गया है.

प्रदर्शन सहयोगी विज्ञापन

साथ-साथ चलने वाले विज्ञापन दिखाने के लिए, सबसे पहले AdsManager से भेजे गए किसी भी AdEvent इवेंट के ज़रिए, Ad ऑब्जेक्ट की पहचान फ़ाइल पाएं. हमारा सुझाव है कि आप AdEvent.STARTED इवेंट का इस्तेमाल करें, क्योंकि साथ-साथ काम करने वाले विज्ञापन और मास्टर विज्ञापन एक साथ दिखाए जाने चाहिए.

इसके बाद, getCompanionAds() को कॉल करने के लिए इस Ad ऑब्जेक्ट का इस्तेमाल करें, ताकि CompanionAd ऑब्जेक्ट का कलेक्शन मिल सके. यहां आपके पास CompanionAdSelectionSettings के बारे में बताने का विकल्प है. इससे क्रिएटिव टाइप, फ़िट प्रतिशत, रिसॉर्स टाइप, और साइज़ की शर्तों के हिसाब से, कंपैनियन विज्ञापनों पर फ़िल्टर सेट किए जा सकते हैं. इन सेटिंग की ज़्यादा जानकारी के लिए, HTML5 एपीआई दस्तावेज़ देखें.

getCompanionAds से मिले CompanionAd ऑब्जेक्ट, अब इन दिशा-निर्देशों के मुताबिक, पेज पर वीडियो विज्ञापन के साथ-साथ चलने वाले विज्ञापनों को दिखाने के लिए इस्तेमाल किए जा सकते हैं:

1. पेज पर ज़रूरी साइज़ का <div> साथी विज्ञापन स्लॉट बनाएं.
2. शुरू किया गया इवेंट के लिए अपने इवेंट हैंडलर में, Ad ऑब्जेक्ट को वापस पाने के लिए getAd() को कॉल करें.
3. getCompanionAds() का इस्तेमाल करके, ऐसे कंपैनियन विज्ञापनों की सूची पाएं जो कंपैनियन विज्ञापन स्लॉट के साइज़ और CompanionAdSelectionSettings, दोनों से मैच करता हो. साथ ही, जिनका क्रम नंबर मास्टर क्रिएटिव से मेल खाता हो. जिन क्रिएटिव में क्रम एट्रिब्यूट मौजूद नहीं होता उन्हें क्रम संख्या 0 माना जाता है.
4. किसी CompanionAd इंस्टेंस से कॉन्टेंट लें और उसे उस विज्ञापन स्लॉट के <div> के अंदरूनी HTMl के तौर पर सेट करें.

नमूना कोड

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

डिसप्ले फ़्लूइड साथी विज्ञापन

IMA अब तरल सहयोगी विज्ञापनों के साथ काम करता है. ये सहयोगी विज्ञापन, विज्ञापन स्लॉट के आकार से मेल खाने के लिए साइज़ बदल सकते हैं. वे पैरंट डिवी की चौड़ाई का 100% हिस्सा भर लेते हैं, फिर कंपैनियन के कॉन्टेंट के हिसाब से अपनी ऊंचाई का साइज़ बदल लेते हैं. इन्हें Ad Manager में Fluid के कंपैनियन साइज़ का इस्तेमाल करके सेट किया जाता है. यह वैल्यू कहां सेट करनी है, यह जानने के लिए नीचे दी गई इमेज देखें.

GPT फ़्लूइड कंपैनियन

GPT कंपैनियन का इस्तेमाल करते समय, defineSlot() तरीके के दूसरे पैरामीटर को अपडेट करके, फ़्लूइड कंपैनियन स्लॉट का एलान किया जा सकता है.

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

विज्ञापन एपीआई फ़्लूइड कंपैनियन

कंपैनियन विज्ञापनों के लिए Ad API का इस्तेमाल करते समय, google.ima.CompanionAdSelectionSettings.sizeCriteria को SELECT_FLUID वैल्यू में अपडेट करके, फ़्लूइड कंपैनियन स्लॉट का एलान किया जा सकता है.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>