विज्ञापन के साइज़

आपके तय किए गए हर विज्ञापन स्लॉट में, उस विज्ञापन साइज़ के बारे में बताना ज़रूरी है जिसे उस स्लॉट में दिखाया जा सकता है. विज्ञापन के साइज़ तय करने का तरीका, इस बात पर निर्भर करता है कि दिखाए जाने वाले विज्ञापन किस तरह के हैं. साथ ही, विज्ञापन स्लॉट के साइज़ और लचीलेपन पर भी निर्भर करता है.

कुछ मामलों में, Google Ad Manager में लाइन आइटम के लेवल पर विज्ञापन का साइज़ बदला जा सकता है. ज़्यादा जानने के लिए, सहायता केंद्र पर जाएं.

इस गाइड में शामिल उदाहरणों का पूरा कोड, विज्ञापन के साइज़ सैंपल पेज पर देखा जा सकता है.

तय साइज़ के विज्ञापन

आप एक तय साइज़ वाला विज्ञापन स्लॉट तय कर सकते हैं.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

इस उदाहरण में, सिर्फ़ 300x250 साइज़ वाले क्रिएटिव दिखाए जाएंगे.

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

कई साइज़ के विज्ञापन

अगर कोई विज्ञापन कई साइज़ में काम करता है, तो विज्ञापन स्लॉट तय करते समय उन साइज़ की सूची दें जो इस्तेमाल हो सकती हैं.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

इस उदाहरण में, 300x250, 728x90, और 750x200 साइज़ वाले क्रिएटिव दिखाए जा सकते हैं. Ad Manager, विज्ञापन चुनने की प्रोसेस के दौरान सिर्फ़ इन साइज़ से मेल खाने वाले क्रिएटिव पर विचार करता है.

अगर सीएसएस में <div> विज्ञापन स्लॉट के लिए डाइमेंशन तय नहीं किए गए हैं, तो display() कॉल करने पर GPT अपने-आप डाइमेंशन को सबसे कम तय ऊंचाई और 1 पिक्सल से ज़्यादा चौड़ी तय चौड़ाई के बराबर सेट कर देता है. इस मामले में, यह 750x90 होगा. हालांकि, यह साइज़, पेज पर अन्य कॉन्टेंट लोड होने के बाद आ सकता है. इसकी वजह से कॉन्टेंट में बदलाव हो सकता है. लेआउट शिफ़्ट से बचने के लिए, सीएसएस का इस्तेमाल करके जगह बुक करें, जैसा कि लेआउट शिफ़्ट कम करें गाइड में दिखाया गया है.

कई साइज़ वाले विज्ञापनों के साथ काम करते समय, पक्का करें कि आपका लेआउट सबसे बड़ा साइज़ वाले विज्ञापन के साथ काम करने के हिसाब से सुविधाजनक हो. इससे क्रिएटिव को अनजाने में काटा नहीं जाएगा.

फ़्लूइड विज्ञापन

फ़्लूइड विज्ञापनों का साइज़ कोई तय नहीं होता. हालांकि, ये विज्ञापन इनमें दिखाए जाने वाले क्रिएटिव कॉन्टेंट के हिसाब से ढल जाते हैं. फ़िलहाल, नेटिव विज्ञापन एक ऐसा विज्ञापन टाइप है जो Ad Manager पर काम करता है.

फ़्लूइड विज्ञापनों के साथ काम करते समय, पसंद के मुताबिक fluid साइज़ तय किया जा सकता है.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

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

  1. विज्ञापन जवाब मिला.
  2. क्रिएटिव कॉन्टेंट को iframe में लिखा जाता है. इसमें शुरुआती ऊंचाई 0px और चौड़ाई 100% पर सेट होती है.
  3. iframe में मौजूद सभी संसाधन लोड होने के बाद, iframe की ऊंचाई को iframe के <body> एलिमेंट की ऊंचाई के बराबर सेट करके क्रिएटिव को दिखाया जाता है.

रिस्पॉन्सिव विज्ञापन

रिस्पॉन्सिव विज्ञापन (ज़रूरत के हिसाब से ढल जाने वाले विज्ञापन), कई साइज़ के विज्ञापनों को बढ़ा देते हैं. इनकी मदद से, अनुरोध करने वाले ब्राउज़र के व्यूपोर्ट के साइज़ के आधार पर क्रिएटिव का साइज़ तय किया जा सकता है. इस सुविधा का इस्तेमाल करके, अलग-अलग तरह के डिवाइसों (डेस्कटॉप, टैबलेट, मोबाइल वगैरह) पर दिखाए जाने वाले क्रिएटिव के साइज़ को कंट्रोल किया जा सकता है.

इसके लिए, व्यूपोर्ट साइज़ और विज्ञापन साइज़ के बीच मैपिंग तय करें और फिर उस मैपिंग को किसी विज्ञापन स्लॉट के साथ जोड़ें.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

इस उदाहरण में, मैपिंग यह बताती है कि:

  • व्यूपोर्ट >= 1024x768 होने पर, 750x200 या 728x90 साइज़ के विज्ञापन दिखाए जा सकते हैं.
  • 1024x768 > व्यूपोर्ट >= 640x480 होने पर, 300x250 साइज़ के विज्ञापन दिखाए जा सकते हैं.
  • व्यूपोर्ट < 640x480 होने पर, कोई विज्ञापन नहीं दिखाया जा सकता.

GPT, अनुरोध करने वाले ब्राउज़र के व्यूपोर्ट के आकार का पता लगाएगा और सबसे बड़ी मैपिंग का इस्तेमाल करेगा. सबसे बड़े मैपिंग GPT का पता लगाने के लिए, पहले हम चौड़ाई, फिर ऊंचाई (यानी, [100, 10] > [10, 100]). मैपिंग में किसी गड़बड़ी की स्थिति में या व्यूपोर्ट का साइज़ तय नहीं होने पर, defineSlot() में बताए गए साइज़ का इस्तेमाल किया जाएगा.

इसके बाद, Slot.defineSizeMapping() तरीके को कॉल करके, मैपिंग को किसी विज्ञापन स्लॉट से जोड़ा जाता है. इस तरीके के लिए, नीचे दिए गए फ़ॉर्मैट में कई मैपिंग स्वीकार की जाती हैं:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

इस अरे में व्यूपोर्ट के साइज़ का क्रम उनकी प्राथमिकता तय करता है. ऊपर दिए गए उदाहरण में इस्तेमाल किया गया SizeMappingBuilder, इस फ़ॉर्मैट का कलेक्शन जनरेट करने का एक आसान तरीका है. इसमें साइज़, बड़े से छोटे साइज़ के क्रम में अपने-आप हो जाते हैं. इस उदाहरण में, SizeMappingBuilder.build() का आउटपुट यह है:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]