Intégrer l'API WebView pour les annonces

L'API WebView pour les annonces permet de monétiser les annonces dans les applications à l'aide de WebViewController. Si vous affichez du contenu Web qui implémente des annonces avec le code AdSense ou Google Publisher Tag dans votre application via WebViewController, vous devez utiliser cette API pour activer la monétisation des annonces. Pour en savoir plus, consultez les Règles AdSense et Ad Manager.

  1. Monétiser des annonces en envoyant des demandes d'annonces avec le SDK Google Mobile Ads

    Vous pouvez monétiser votre application en envoyant des demandes d'annonces à Ad Manager avec le SDK Google Mobile Ads en implémentant des formats d'annonces pour les applications mobiles.

    En savoir plus

  2. Monétiser des annonces à l'aide de l'API WebView

    Si votre application utilise WebViewController pour afficher du contenu Web qui diffuse des annonces depuis Ad Manager ou AdSense, utilisez l'API WebView pour les annonces afin d'enregistrer des objets WebViewController avec le SDK Google Mobile Ads. Le code JavaScript du code AdSense ou de Google Publisher Tag crée et envoie des demandes d'annonces. Vous n'avez donc pas besoin d'effectuer de demandes d'annonces avec le SDK. N'oubliez pas que seuls les formats d'inventaire Web pour mobile et pour ordinateur sont disponibles à l'aide de cette API.

    Si vous n'êtes pas propriétaire du contenu Web d'un WebViewController, nous vous conseillons tout de même d'utiliser cette API pour protéger les annonceurs contre le spam et améliorer la monétisation pour les éditeurs Web qui ont fourni le contenu.

Notez que vous pouvez choisir l'une ou l'autre de ces options dans la même application, voire les deux.

L'objectif de ce guide est de vous aider à intégrer l'API WebView pour les annonces dans votre application iOS.

Avant de commencer

Avant de commencer à utiliser l'API WebView pour les annonces, veillez à effectuer les opérations suivantes:

Ignorer la vérification de l'identifiant d'application

Android

Ajoutez la balise <meta-data> suivante dans votre fichier AndroidManifest.xml pour contourner la vérification de APPLICATION_ID. Si vous n'effectuez pas cette étape, le SDK Google Mobile Ads peut générer une exception IllegalStateException au démarrage de l'application.

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

iOS

Mettez à jour le fichier Runner/Info.plist avec la clé et la valeur de chaîne ci-dessous pour contourner une vérification de GADApplicationIdentifier. Si vous n'effectuez pas cette étape, le SDK Google Mobile Ads peut générer une GADInvalidInitializationException au démarrage de l'application.

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

Enregistrer WebViewController

Pour améliorer la monétisation des annonces dans une application dans un WebViewController utilisant le code AdSense ou des tags Google Publisher Tag, procédez comme suit:

  1. Activez JavaScript dans WebViewController. Sinon, les annonces risquent de ne pas se charger.

  2. Pour améliorer l'expérience publicitaire de vos utilisateurs et respecter les règles relatives aux cookies de Chrome, activez les cookies tiers sur votre instance AndroidWebViewController.

  3. Enregistrez l'instance WebViewController en appelant la méthode registerWebView() fournie par le SDK Google Mobile Ads.

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

Charger l'URL

Vous pouvez désormais charger une URL et afficher votre contenu Web via WebViewController. Nous vous recommandons de charger cette URL de test : https://webview-api-for-ads-test.glitch.me/ pour tester l'intégration avant d'utiliser votre propre URL. La page Web affiche une erreur si JavaScript n'est pas activé.

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

L'URL de test affiche des barres d'état vertes pour indiquer une intégration réussie si les conditions suivantes s'appliquent:

  • WebView connecté au SDK Google Mobile Ads
  • JavaScript activé
  • Les cookies tiers fonctionnent (non attendu sur les appareils iOS)
  • Les cookies propriétaires fonctionnent

Affichez le code source de notre URL de test. Vous pouvez alors remplacer l'URL de test par votre URL. Vous pouvez également utiliser un outil de proxy tel que Charles pour capturer le trafic HTTPS de votre application et inspecter les demandes d'annonces pour rechercher un paramètre &scar=.