साथ में दिखने वाले विज्ञापनों के लिए सहायता जोड़ना

प्लैटफ़ॉर्म चुनें: HTML5 Android iOS

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

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

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

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

1. अपने कंपैनियन विज्ञापन बुक करना

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

2. अपने कंपैनियन विज्ञापनों का अनुरोध करना

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

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

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

• Google पब्लिशर टैग (GPT) का इस्तेमाल करके, अपने-आप.

  अगर कंपैनियन विज्ञापनों को लागू करने के लिए GPT का इस्तेमाल किया जा रहा है, तो वे अपने-आप दिखते हैं. हालांकि, इसके लिए ज़रूरी है कि एचटीएमएल पेज पर कंपैनियन विज्ञापन स्लॉट मौजूद हों और ये विज्ञापन एपीआई के साथ रजिस्टर किए गए हों. इसका मतलब है कि JavaScript और एचटीएमएल में div आईडी मेल खाना चाहिए. GPT का इस्तेमाल करने के कई फ़ायदे हैं:

  • कंपैनियन स्लॉट के बारे में जानकारी.
  • अगर VAST रिस्पॉन्स में, एचटीएमएल पेज पर तय किए गए स्लॉट की तुलना में कम कंपैनियन विज्ञापन शामिल हैं, तो पब्लिशर के नेटवर्क से कंपैनियन बैकफ़िल.
  • अगर वीडियो विज्ञापन मौजूद नहीं है, तो सहयोगी विज्ञापन अपने-आप भर जाता है.
  • क्लिक-टू-प्ले वीडियो प्लेयर के लिए, पहले से लोड किए गए कंपैनियन विज्ञापन स्लॉट.
  • ऑटोमेटेड कंपैनियन रेंडरिंग, जिसमें HTMLResource और iFrameResource शामिल हैं.

• Ad API का इस्तेमाल करके मैन्युअल तरीके से.

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

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

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

अगर आपने एचटीएमएल5 एसडीके को किसी iframe में होस्ट किया है

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

1. एचटीएमएल5 एसडीके को iframe में लोड करें.
2. मुख्य वेब पेज (IFrame से बाहर) पर जीपीटी लोड करें.

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

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

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

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

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

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

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

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

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

यहां दिए गए सैंपल कोड में बताया गया है कि एचटीएमएल पेज में 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>

इसे आज़माएं

इसे लागू करने का तरीका जानने के लिए, यहां दिया गया Codepen देखें.

उदाहरण 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>

इसे आज़माएं

यहां दिए गए कोड में, लागू करने का तरीका बताया गया है.

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

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

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

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

<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 ऑब्जेक्ट का ऐरे पाने के लिए, इस Ad ऑब्जेक्ट का इस्तेमाल करके getCompanionAds() को कॉल करें. यहां आपके पास CompanionAdSelectionSettings तय करने का विकल्प होता है. इससे क्रिएटिव टाइप, मिलते-जुलते प्रतिशत, संसाधन टाइप, और साइज़ के मानदंड के लिए, कंपैनियन विज्ञापनों पर फ़िल्टर सेट किए जा सकते हैं. इन सेटिंग के बारे में ज़्यादा जानने के लिए, IMA CompanionAdSelectionSettings API से जुड़ा दस्तावेज़ देखें.

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

1. पेज पर, ज़रूरी साइज़ का कंपैनियन विज्ञापन स्लॉट <div> बनाएं.
2. STARTED इवेंट के लिए अपने इवेंट हैंडलर में, 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>