Reklamlar için WebView API'yi entegre etme

WebView API for Ads, aşağıdakileri kullanarak uygulama içi reklamlardan para kazanılmasına olanak tanır: WebViewController. Reklamları uygulayan web içeriği gösteriyorsanız AdSense kodu veya Google Yayıncı Etiketi veya WebViewController aracılığıyla uygulamanızda kullanıyorsanız reklamları etkinleştirmek için bu API'yi para kazanma. Daha fazla bilgi edinmek için . AdSense ve Ad Manager politikaları hakkında daha fazla bilgi edinin.

  1. Google Mobile Ads SDK'sı ile reklam istekleri göndererek para kazanma

    Şu kullanıcılara reklam istekleri göndererek uygulamanızdan para kazanabilirsiniz: Reklam Yöneticisi'ni Mobil için reklam biçimlerini uygulayarak Google Mobile Ads SDK'sı inceleyin.

    Daha fazla bilgi edinin.

  2. Reklamlar için WebView API'yi kullanarak para kazanın

    Uygulamanız, reklamların sunulduğu web içeriğini göstermek için WebViewController kullanıyorsa Ad Manager veya AdSense, kaydolmak için Reklamlar için WebView API'yi kullanın Google Mobile Ads SDK'sı ile WebViewController nesne. İlgili içeriği oluşturmak için kullanılan AdSense kodundaki JavaScript veya Google Yayıncı Etiketi reklam istekleri oluşturur ve gönderdiğinden SDK'yı kullanabilirsiniz. Yalnızca mobil web ve masaüstü web'de envanter biçimleri bu API ile kullanılabiliyor.

    WebViewController kapsamında web içeriğinin sahibi değilseniz reklamverenlerin spam'den ve spam'den korunmasına yardımcı olmak için İçeriği sağlayan web yayıncılarının daha fazla para kazanmasını sağlamak.

Aynı uygulamada iki seçeneği veya her ikisini birden yapabileceğinizi unutmayın.

Bu kılavuz, WebView API for Ads'i uygulamanıza entegre etmenize yardımcı olmak amacıyla hazırlanmıştır. iOS uygulaması.

Başlamadan önce

Reklamlar için WebView API'yi kullanmaya başlamadan önce aşağıdakileri yaptığınızdan emin olun:

Uygulama kimliği kontrolünü atla

Android

AndroidManifest.xml dosyanıza aşağıdaki <meta-data> etiketini ekleyin: APPLICATION_ID denetimini atlayın. Bu adımı atlarsanız Google Mobile Ads SDK'sı IllegalStateException uygulama başlangıcında.

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

iOS

Runner/Info.plist dosyasını aşağıdaki anahtar ve dize değeriyle şu şekilde güncelleyin: GADApplicationIdentifier kontrolünü atlayın. Bu adımı atlarsanız Google Mobile Ads SDK'sı bir GADInvalidInitializationException uygulama başlangıcında.

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

WebViewController'ı kaydetme

Belirli bir zamandaki reklamlardan uygulama içi reklamdan daha fazla para kazanmayı AdSense kullanan WebViewController kodu veya Google Yayıncı Etiketler'i görürseniz aşağıdaki adımları uygulayın aşağıdaki listede bulabilirsiniz:

  1. WebViewController içinde JavaScript'i etkinleştirin. Aksi takdirde reklamların yüklenmesini engelleyebilir.

  2. Kullanıcılarınızın reklam deneyimi ve Chrome'un cookie policy, etkinleştir AndroidWebViewController örneğinizdeki üçüncü taraf çerezleri.

  3. Şu komutu çağırarak WebViewController örneğini kaydedin: registerWebView() yöntemi kullanılabilir.

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);
  }
}

URL'yi yükle

Artık WebViewController üzerinden URL yükleyebilir ve web içeriğinizi gösterebilirsiniz. Şu test URL'sini yüklemenizi öneririz: tarihinden önce entegrasyonu test etmek için https://webview-api-for-ads-test.glitch.me/ kullanabilirsiniz. JavaScript uygun değilse web sayfası bir hata gösterecektir etkin.

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://webview-api-for-ads-test.glitch.me/'));
  }

Başarılı bir entegrasyon için test URL'si yeşil durum çubukları gösterir. aşağıdaki koşullar geçerlidir:

  • WebView, Google Mobile Ads SDK'sına bağlandı
  • JavaScript etkin
  • Üçüncü taraf çerezleri çalışır (iOS cihazlarda beklenmez)
  • Birinci taraf çerezleri çalışır

Kaynak kodu görüntüleyin test URL'mizdir. Ardından test URL'sini kendi URL'nizle değiştirebilirsiniz. Ayrıca transkriptinizi Charles gibi bir proxy aracı kullanarak HTTPS trafiğini kontrol edin ve reklam isteklerini &scar= parametresi için inceler.