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

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

कुछ मामलों में, विज्ञापन का आकार 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], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

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

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

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

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

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

अस्थिर विज्ञापनों के साथ काम करते समय, एक पसंद के मुताबिक fluid आकार तय किया जा सकता है.

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

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

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

आसान विज्ञापनों की वजह से, विज्ञापन पर कई चेतावनियां दी जा सकती हैं इसके बारे में आपको पता है. इसमें ये शामिल हैं:

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

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

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

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

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], []]
]