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

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

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

कंपैनियन विज्ञापनों का इस्तेमाल करना

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

1. साथी विज्ञापनों के लिए बुकिंग करना

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

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

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

3. वीडियो विज्ञापन के साथ दिखने वाले डिसप्ले विज्ञापन

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

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

Google Publisher Tag के साथ साथ-साथ चलने वाले विज्ञापनों का इस्तेमाल करना

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

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

अगर HTML5 SDK टूल को iframe में होस्ट किया जाता है

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

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

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

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

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

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

एचटीएमएल में कंपैनियन विज्ञापन स्लॉट का एलान करना

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

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

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

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

यहां दिए गए सैंपल कोड में, अपने एचटीएमएल पेज में gpt.js फ़ाइल को शामिल करने और विज्ञापन स्लॉट का एलान करने का तरीका बताया गया है. एलान किया गया विज्ञापन स्लॉट 728x90 पिक्सल है. GPT, स्लॉट को इस साइज़ से मैच करने वाले वीएएसटी रिस्पॉन्स में दिखाए गए किसी भी साथी विज्ञापन से भरने की कोशिश करता है. विज्ञापन स्लॉट तय करने के बाद, 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>
 

इसे आज़माएं

इसे लागू करने के लिए, यहां दिया गया कोडपेन देखें.

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

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

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

 <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>
 

इसे आज़माएं

इसे लागू करने के लिए, यहां दिया गया कोड देखें.

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

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

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

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

<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 API का इस्तेमाल करके, साथ में दिखने वाले विज्ञापन दिखाने का तरीका बताया गया है.

वीडियो विज्ञापन के साथ दिखने वाले डिसप्ले विज्ञापन

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

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

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

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

नमूना कोड

<!--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 अब फ़्लूइड साथी विज्ञापनों के साथ काम करता है. ये साथी विज्ञापन, विज्ञापन स्लॉट के साइज़ के हिसाब से अपने-आप साइज़ बदल सकते हैं. ये पैरंट div की चौड़ाई को 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 के फ़्लूइड साथी

साथी विज्ञापनों के लिए 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>