Google Ads के लिए वेबव्यू एपीआई को इंटिग्रेट करना

WebView API for Ads की मदद से, WebViewController का इस्तेमाल करके इन-ऐप्लिकेशन विज्ञापन से कमाई की जा सकती है. अगर आपको अपने ऐप्लिकेशन में WebViewController के ज़रिए ऐसा वेब कॉन्टेंट दिखाना है जिसमें AdSense कोड या Google पब्लिशर टैग का इस्तेमाल करके विज्ञापन दिखाए जाते हैं, तो आपको इस एपीआई का इस्तेमाल करना चाहिए. इससे विज्ञापनों से कमाई करने की सुविधा चालू हो जाएगी. ज़्यादा जानने के लिए, AdMob की नीतियां देखें.

  1. Google Mobile Ads Flutter Plugin की मदद से विज्ञापन दिखाने का अनुरोध करके कमाई करना

    Google Mobile Ads Flutter Plugin के साथ AdMob को विज्ञापन दिखाने का अनुरोध भेजकर, अपने ऐप्लिकेशन से कमाई की जा सकती है. इसके लिए, मोबाइल ऐप्लिकेशन के लिए विज्ञापन फ़ॉर्मैट लागू करें.

    ज़्यादा जानें.

  2. WebView API for Ads का इस्तेमाल करके कमाई करना

    अगर आपका ऐप्लिकेशन WebViewController का इस्तेमाल करके, ऐसा वेब कॉन्टेंट दिखाता है जिसमें Ad Manager या AdSense के विज्ञापन दिखाए जाते हैं, तो WebView API for Ads का इस्तेमाल करके, WebViewController ऑब्जेक्ट को Google Mobile Ads Flutter Plugin के साथ रजिस्टर करें. AdSense कोड या Google पब्लिशर टैग में मौजूद JavaScript, विज्ञापन दिखाने का अनुरोध बनाता है और भेजता है. इसलिए, आपको SDK टूल की मदद से कोई विज्ञापन दिखाने का अनुरोध करने की ज़रूरत नहीं है. ध्यान रखें कि इस एपीआई का इस्तेमाल करके, सिर्फ़ मोबाइल वेब और डेस्कटॉप वेब के इन्वेंट्री फ़ॉर्मैट उपलब्ध हैं.

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

ध्यान दें कि एक ही ऐप्लिकेशन में, दोनों में से कोई एक या दोनों विकल्प चुने जा सकते हैं.

इस गाइड की मदद से, आपको अपने iOS ऐप्लिकेशन में WebView API for Ads को इंटिग्रेट करने में मदद मिलेगी.

शुरू करने से पहले

WebView API for Ads का इस्तेमाल शुरू करने से पहले, ये काम करना न भूलें:

  • अपने ऐप्लिकेशन में 3.0.0 या इसके बाद के वर्शन के साथ, Flutter प्लगिन के लिए Google Mobile Ads Flutter Plugin का इस्तेमाल करें.
  • अपनी pubspec.yaml फ़ाइल में, webview_flutter को डिपेंडेंसी के तौर पर जोड़ें.
  • अपने ऐप्लिकेशन में 3.7.0 या इसके बाद के वर्शन के साथ webview_flutter_android जोड़ें.

ऐप्लिकेशन आइडेंटिफ़ायर की जांच को बायपास करना

Android

APPLICATION_ID की जांच को बायपास करने के लिए, अपनी AndroidManifest.xml फ़ाइल में यह <meta-data> टैग जोड़ें. अगर आपने यह चरण पूरा नहीं किया, तो ऐप्लिकेशन शुरू होने पर Google Mobile Ads Flutter Plugin, IllegalStateException दिखा सकता है.

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

iOS

GADApplicationIdentifier की जांच को बायपास करने के लिए, Runner/Info.plist फ़ाइल को नीचे दी गई कुंजी और स्ट्रिंग वैल्यू के साथ अपडेट करें. अगर आपने यह चरण पूरा नहीं किया, तो ऐप्लिकेशन शुरू होने पर Google Mobile Ads Flutter Plugin, GADInvalidInitializationException दिखा सकता है.

<!-- Bypass GADApplicationIdentifier check for WebView API for Ads -->
<key>GADIntegrationManager</key>
<string>webview</string>

WebViewController को रजिस्टर करना

AdSense कोड या Google पब्लिशर टैग का इस्तेमाल करने वाले WebViewController में, इन-ऐप्लिकेशन विज्ञापनों से होने वाली कमाई को बढ़ाने के लिए, यहां दिया गया तरीका अपनाएं:

  1. WebViewController में JavaScript चालू करें. ऐसा न करने पर, हो सकता है कि विज्ञापन लोड न हों.

  2. उपयोगकर्ताओं को विज्ञापन देखने का बेहतर अनुभव देने और Chrome की कुकी नीति का पालन करने के लिए, अपने AndroidWebViewController इंस्टेंस पर तीसरे पक्ष की कुकी चालू करें.

  3. Google Mobile Ads Flutter Plugin से मिले registerWebView() तरीके को कॉल करके, WebViewController इंस्टेंस को रजिस्टर करें.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);
  }
}

यूआरएल लोड करें

अब WebViewController की मदद से, यूआरएल लोड किया जा सकता है और अपना वेब कॉन्टेंट दिखाया जा सकता है. हमारा सुझाव है कि आप अपने यूआरएल का इस्तेमाल करने से पहले, इंटिग्रेशन की जांच करने के लिए इस टेस्ट यूआरएल को लोड करें: https://google.github.io/webview-ads/test/. अगर JavaScript चालू नहीं है, तो वेब पेज पर गड़बड़ी का मैसेज दिखेगा.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);

    // 4. Load the URL.
    await controller.loadRequest(Uri.parse('https://google.github.io/webview-ads/test/'));
  }

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

  • WebView को Google Mobile Ads Flutter Plugin से कनेक्ट किया गया
  • JavaScript चालू है
  • तीसरे पक्ष की कुकी काम करती हों (iOS डिवाइसों पर ऐसा होने की उम्मीद नहीं है)
  • पहले पक्ष की कुकी काम करती हैं

हमारे टेस्ट यूआरएल का सोर्स कोड देखें. इसके बाद, टेस्ट यूआरएल को अपने यूआरएल से बदला जा सकता है. Charles जैसे प्रॉक्सी टूल का इस्तेमाल करके भी, अपने ऐप्लिकेशन के एचटीटीपीएस ट्रैफ़िक को कैप्चर किया जा सकता है. साथ ही, &scar= पैरामीटर के लिए, विज्ञापन दिखाने के अनुरोधों की जांच की जा सकती है.