Integracja interfejsu WebView API for Ads

Interfejs WebView API for Ads umożliwia zarabianie na reklamach w aplikacji za pomocą WebViewController. Jeśli w aplikacji wyświetlasz treści internetowe, w których zaimplementowano reklamy za pomocą kodu AdSense lub tagu wydawcy Google w ramce WebViewController, użyj tego interfejsu API, aby włączyć zarabianie na reklamach. Więcej informacji znajdziesz w zasadach AdMob.

1. Generowanie przychodów przez wysyłanie żądań reklam za pomocą pakietu SDK do reklam mobilnych Google

   Możesz generować przychody z aplikacji, wysyłając żądania reklam do AdMob za pomocą pakietu SDK do reklam mobilnych Google. W tym celu zaimplementuj formaty reklam w aplikacjach mobilnych.

   Więcej informacji

2. Zarabianie za pomocą interfejsu WebView API for Ads

   Jeśli Twoja aplikacja używa komponentu WebViewController do wyświetlania treści internetowych, które wyświetlają reklamy z Ad Managera lub AdSense, użyj interfejsu WebView API do rejestrowania obiektów WebViewController w pakiecie SDK do reklam mobilnych Google. Kod JavaScript w kodzie AdSense lub tagu wydawcy Google tworzy i wysyła żądania reklamy, więc nie musisz wysyłać żadnych żądań reklamy za pomocą pakietu SDK. Pamiętaj, że ten interfejs API umożliwia korzystanie tylko z formatów zasobów reklamowych w internecie mobilnym i na komputerach.

   Jeśli nie jesteś właścicielem treści internetowych w WebViewController, zachęcamy Cię do korzystania z tego interfejsu API, aby chronić reklamodawców przed spamem i zwiększać przychody wydawców internetowych, którzy udostępnili te treści.

Pamiętaj, że możesz skorzystać z jednej z tych opcji lub z obu jednocześnie w tej samej aplikacji.

Ten przewodnik ma pomóc Ci zintegrować interfejs WebView API for Ads z aplikacją na iOS.

Zanim zaczniesz

Zanim zaczniesz korzystać z interfejsu WebView API w reklamach, wykonaj te czynności:

• W aplikacji używaj wtyczki pakietu SDK do reklam mobilnych Google na platformę Flutter w wersji 3.0.0 lub nowszej.
• Dodaj webview_flutter jako zależność w pliku pubspec.yaml.
• Dodaj do aplikacji pakiet webview_flutter_android w wersji 3.7.0 lub nowszej.

Pomiń sprawdzanie identyfikatora aplikacji

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

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

Zarejestruj WebViewController

Aby zwiększyć przychody z reklam w aplikacji, które wyświetlają się w WebViewController, używając kodu AdSense lub tagów wydawcy Google, wykonaj te czynności:

1. Włącz JavaScript w WebViewController. Jeśli tego nie zrobisz, reklamy mogą się nie wczytywać.

2. Aby zwiększyć komfort użytkowników podczas wyświetlania reklam i zachować zgodność z zasadami dotyczącymi plików cookie w Chrome, włącz pliki cookie innych firm w instancji AndroidWebViewController.

3. Zarejestruj instancję WebViewController, wywołując metodę registerWebView() udostępnianą przez pakiet SDK do reklam mobilnych Google.

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

Wczytaj adres URL

Możesz teraz wczytać adres URL i wyświetlić treści internetowe za pomocą WebViewController. Zalecamy wczytanie tego testowego adresu URL:https://google.github.io/webview-ads/test/ aby przetestować integrację przed użyciem własnego adresu URL. Jeśli JavaScript nie jest włączony, na stronie internetowej pojawi się błąd.

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

Jeśli integracja przebiegła pomyślnie, przy adresie URL testu pojawią się zielone paski stanu, pod warunkiem że:

• WebView połączone z pakietem SDK do reklam mobilnych Google;
• JavaScript jest włączony
• Pliki cookie innych firm działają (nie jest to oczekiwane na urządzeniach z iOS)
• Działanie własnych plików cookie

Wyświetl kod źródłowy naszego testowego adresu URL. Następnie możesz zastąpić testowy adres URL swoim adresem. Możesz też użyć narzędzia serwera proxy, takiego jak Charles, aby przechwycić ruch HTTPS aplikacji i sprawdzić, czy w żądaniach reklamy występuje parametr &scar=.