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

प्लैटफ़ॉर्म चुनें: 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 लोड किया जाता है, तो HTML5 SDK, GPT स्लॉट को पहचानता है. हालांकि, यह IFrame में लोड नहीं होना चाहिए. IMA SDK के साथ GPT का इस्तेमाल करने के बारे में ज़्यादा जानकारी, GPT के दस्तावेज़ों में देखी जा सकती है.

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

अगर आपने HTML5 SDK को IFrame में होस्ट किया है

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

1. HTML5 SDK को IFrame में लोड करें.
2. GPT को मुख्य वेब पेज पर लोड करें. यह IFrame के बाहर होना चाहिए.

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

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

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

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

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

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

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

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

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

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

इसे आज़माएं

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

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

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

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

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

कंपेनियन विज्ञापन दिखाना

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

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

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

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