नेटिव स्टाइल तय करना

नेटिव स्टाइल की सेटिंग की मदद से, Google Ad Manager आपके नेटिव विज्ञापनों को रेंडर कर सकता है. इसके लिए, वह प्रॉडक्ट में तय की गई नेटिव स्टाइल का इस्तेमाल करता है. सबसे पहले, साइज़ और टारगेटिंग तय करें. इसके बाद, एचटीएमएल, सीएसएस, और JavaScript जोड़ें, ताकि रिस्पॉन्सिव विज्ञापनों को तय किया जा सके. साथ ही, सभी स्क्रीन पर अच्छी क्वालिटी का डिसप्ले बनाया जा सके. आपको रेंडरिंग करने की ज़रूरत नहीं है. Ad Manager, डेस्टिनेशन के लिए सही नेटिव स्टाइल अपने-आप लागू कर देता है. नेटिव स्टाइल, बैनर विज्ञापनों की तरह ही लागू किए जाते हैं. इसके लिए, GAMBannerView का इस्तेमाल किया जाता है. इनका इस्तेमाल, पहले से तय किए गए विज्ञापन साइज़ या रनटाइम के दौरान तय किए गए फ़्लूइड विज्ञापन साइज़ के साथ किया जा सकता है.

ज़रूरी शर्तें

• Google Mobile Ads SDK का वर्शन 7.14.0 या इसके बाद का वर्शन

इस गाइड में यह माना गया है कि आपको Google Mobile Ads SDK के बारे में कुछ जानकारी है. अगर आपने अब तक ऐसा नहीं किया है, तो हमारी शुरू करें गाइड पढ़ें.

तय साइज़

तय साइज़ वाली नेटिव स्टाइल की मदद से, नेटिव विज्ञापन की चौड़ाई और ऊंचाई को कंट्रोल किया जा सकता है.

तय साइज़ सेट करने के लिए, यह तरीका अपनाएं:

विज्ञापन का साइज़, डिवाइस की स्क्रीन के साइज़ से छोटा या उसके बराबर सेट करें. iOS 26 और इसके बाद के वर्शन पर, स्क्रीन का ज़्यादा से ज़्यादा साइज़ तय करने के लिए, UIWindowScene.effectiveGeometry.coordinateSpace प्रॉपर्टी का इस्तेमाल करें. iOS 18 और इससे पहले के वर्शन पर, UIWindowScene.coordinateSpace प्रॉपर्टी का इस्तेमाल करें. साइज़ से जुड़ी पाबंदियों के बारे में जानने के लिए, Ad Manager में, विज्ञापन न दिखाए जाने की वजह से मिले इंप्रेशन की समस्या हल करना लेख पढ़ें.

1. Ad Manager के यूज़र इंटरफ़ेस (यूआई) में एक लाइन आइटम बनाएं. इसके बाद, Size फ़ील्ड के ड्रॉपडाउन से, पहले से तय किए गए साइज़ में से कोई एक साइज़ चुनें.

2. इंटरफ़ेस बिल्डर में, GAMBannerView की चौड़ाई और ऊंचाई को पहले से तय किए गए उस साइज़ से मैच करें जिसे आपने पहले चरण में चुना था. बैनर साइज़ सेक्शन में, साइज़ और उनसे जुड़े GADAdSize कॉन्सटेंट की सूची देखी जा सकती है.

तय साइज़ वाली नेटिव स्टाइल लागू करना, आपके पहले बैनर के अनुरोध में दिए गए निर्देशों का पालन करने जितना आसान है. हालांकि, आपको एचटीएमएल, सीएसएस, और JavaScript पर ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इससे आपके बैनर विज्ञापन को नेटिव लुक और स्टाइल मिलता है, जो आपके ऐप्लिकेशन में नैचुरल लगता है.

फ़्लुइड साइज़

कुछ मामलों में, हो सकता है कि तय साइज़ सही न हो. उदाहरण के लिए, हो सकता है कि आपको विज्ञापन की चौड़ाई को अपने ऐप्लिकेशन के कॉन्टेंट से मैच करना हो, लेकिन विज्ञापन के कॉन्टेंट के हिसाब से उसकी ऊंचाई को डाइनैमिक तौर पर अडजस्ट करना हो. इस मामले को हैंडल करने के लिए, Ad Manager के यूज़र इंटरफ़ेस (यूआई) में विज्ञापन के साइज़ के तौर पर Fluid को चुना जा सकता है. इससे यह तय होता है कि विज्ञापन का साइज़, ऐप्लिकेशन में रनटाइम के दौरान तय किया जाता है. इस मामले को हैंडल करने के लिए, SDK टूल एक खास GADAdSize कॉन्सटैंट, kGADAdSizeFluid, उपलब्ध कराता है. फ़्लूइड विज्ञापन साइज़ की ऊंचाई, पब्लिशर की तय की गई चौड़ाई के आधार पर डाइनैमिक तरीके से तय की जाती है. इससे GAMBannerView, क्रिएटिव के हिसाब से अपनी ऊंचाई को अडजस्ट कर पाता है.

फ़्लूइड अनुरोध

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

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

एक साइज़ और कई साइज़ वाले फ़्लूइड विज्ञापन के लिए अनुरोध करने का तरीका काफ़ी मिलता-जुलता है. दोनों में सिर्फ़ इतना अंतर है कि कई साइज़ वाले विज्ञापन के लिए अनुरोध करते समय, आपको validAdSizes प्रॉपर्टी सेट करनी होती है. इससे विज्ञापन दिखाने के अनुरोध के लिए मान्य विज्ञापन साइज़ तय किए जाते हैं:

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

कोड में, पूरी तरह से लागू किया गया फ़ंक्शन ऐसा दिखता है:

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Ad Manager के फ़्लूइड विज्ञापन साइज़ को लागू करने का उदाहरण देखने के लिए, Swift या Objective-C में iOS API Demo ऐप्लिकेशन डाउनलोड करें.

Download API Demo

GADAdSizeDelegate प्रोटोकॉल

विज्ञापन के साइज़ में बदलाव होने से पहले, आपको बैनर की ऊंचाई के बारे में जानकारी चाहिए. बैनर व्यू के नए GADAdSize में बदलने से पहले, adView:willChangeAdSizeTo: कॉलबैक अपने डेलिगेट को सूचना देता है. बैनर व्यू के नए विज्ञापन साइज़ में बदलने से पहले सूचना पाने के लिए, आपकी क्लास को GADAdSizeDelegate प्रोटोकॉल के मुताबिक होना चाहिए.

यहां adView:willChangeAdSizeTo: कॉलबैक को लागू करने का एक सैंपल दिया गया है. इससे पता चलता है कि बैनर की नई चौड़ाई और ऊंचाई कैसे हासिल की जा सकती है:

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}