[google_adsense] AdSense plugin for Flutter Web

CODEOWNERS

@@ -18,6 +18,7 @@ packages/flutter_migrate/**                              @stuartmorgan
 packages/flutter_template_images/**                      @stuartmorgan
 packages/go_router/**                                    @chunhtai
 packages/go_router_builder/**                            @chunhtai
+packages/google_adsense/**                               @sokoloff06
 packages/google_identity_services_web/**                 @ditman
 packages/google_maps_flutter/**                          @stuartmorgan
 packages/google_sign_in/**                               @stuartmorgan

README.md

@@ -54,6 +54,7 @@ These are the packages hosted in this repository:
 | [flutter\_template\_images](./packages/flutter_template_images/) | [![pub package](https://img.shields.io/pub/v/flutter_template_images.svg)](https://pub.dev/packages/flutter_template_images) | [![pub points](https://img.shields.io/pub/points/flutter_template_images)](https://pub.dev/packages/flutter_template_images/score) | [![popularity](https://img.shields.io/pub/popularity/flutter_template_images)](https://pub.dev/packages/flutter_template_images/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20flutter_template_images?label=)](https://github.com/flutter/flutter/labels/p%3A%20flutter_template_images) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20flutter_template_images?label=)](https://github.com/flutter/packages/labels/p%3A%20flutter_template_images) |
 | [go\_router](./packages/go_router/) | [![pub package](https://img.shields.io/pub/v/go_router.svg)](https://pub.dev/packages/go_router) | [![pub points](https://img.shields.io/pub/points/go_router)](https://pub.dev/packages/go_router/score) | [![popularity](https://img.shields.io/pub/popularity/go_router)](https://pub.dev/packages/go_router/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20go_router?label=)](https://github.com/flutter/flutter/labels/p%3A%20go_router) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20go_router?label=)](https://github.com/flutter/packages/labels/p%3A%20go_router) |
 | [go\_router\_builder](./packages/go_router_builder/) | [![pub package](https://img.shields.io/pub/v/go_router_builder.svg)](https://pub.dev/packages/go_router_builder) | [![pub points](https://img.shields.io/pub/points/go_router_builder)](https://pub.dev/packages/go_router_builder/score) | [![popularity](https://img.shields.io/pub/popularity/go_router_builder)](https://pub.dev/packages/go_router_builder/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20go_router_builder?label=)](https://github.com/flutter/flutter/labels/p%3A%20go_router_builder) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20go_router_builder?label=)](https://github.com/flutter/packages/labels/p%3A%20go_router_builder) |
+| [google\_adsense](./packages/google_adsense/)| [![pub package](https://img.shields.io/pub/v/google_adsense.svg)](https://pub.dev/packages/google_adsense) | [![pub points](https://img.shields.io/pub/points/google_adsense)](https://pub.dev/packages/google_adsense/score) | [![popularity](https://img.shields.io/pub/popularity/google_adsense)](https://pub.dev/packages/google_adsense/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20google_adsense?label=)](https://github.com/flutter/flutter/labels/p%3A%20google_adsense) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20google_adsense?label=)](https://github.com/flutter/packages/labels/p%3A%20google_adsense) |
 | [google\_maps\_flutter](./packages/google_maps_flutter/) | [![pub package](https://img.shields.io/pub/v/google_maps_flutter.svg)](https://pub.dev/packages/google_maps_flutter) | [![pub points](https://img.shields.io/pub/points/google_maps_flutter)](https://pub.dev/packages/google_maps_flutter/score) | [![popularity](https://img.shields.io/pub/popularity/google_maps_flutter)](https://pub.dev/packages/google_maps_flutter/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20maps?label=)](https://github.com/flutter/flutter/labels/p%3A%20maps) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20google_maps_flutter?label=)](https://github.com/flutter/packages/labels/p%3A%20google_maps_flutter) |
 | [google\_sign\_in](./packages/google_sign_in/) | [![pub package](https://img.shields.io/pub/v/google_sign_in.svg)](https://pub.dev/packages/google_sign_in) | [![pub points](https://img.shields.io/pub/points/google_sign_in)](https://pub.dev/packages/google_sign_in/score) | [![popularity](https://img.shields.io/pub/popularity/google_sign_in)](https://pub.dev/packages/google_sign_in/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20google_sign_in?label=)](https://github.com/flutter/flutter/labels/p%3A%20google_sign_in) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20google_sign_in?label=)](https://github.com/flutter/packages/labels/p%3A%20google_sign_in) |
 | [image\_picker](./packages/image_picker/) | [![pub package](https://img.shields.io/pub/v/image_picker.svg)](https://pub.dev/packages/image_picker) | [![pub points](https://img.shields.io/pub/points/image_picker)](https://pub.dev/packages/image_picker/score) | [![popularity](https://img.shields.io/pub/popularity/image_picker)](https://pub.dev/packages/image_picker/score) | [![GitHub issues by-label](https://img.shields.io/github/issues/flutter/flutter/p%3A%20image_picker?label=)](https://github.com/flutter/flutter/labels/p%3A%20image_picker) | [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/flutter/packages/p%3A%20image_picker?label=)](https://github.com/flutter/packages/labels/p%3A%20image_picker) |

packages/google_adsense/AUTHORS

@@ -0,0 +1,7 @@
+# Below is a list of people and organizations that have contributed
+# to the Flutter project. Names should be added to the list like so:
+#
+#   Name/Organization <email address>
+
+Google Inc.
+The Chromium Authors

packages/google_adsense/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* Initial release.

packages/google_adsense/LICENSE

@@ -0,0 +1,25 @@
+Copyright 2013 The Flutter Authors. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of Google Inc. nor the names of its
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/google_adsense/README.md

@@ -0,0 +1,61 @@
+# google_adsense
+[Google AdSense](https://adsense.google.com/intl/en_us/start/) plugin for Flutter Web
+
+This package initializes AdSense on your website and provides an `AdUnitWidget` that can be configured and placed in the desired location in your Flutter web app UI, without having to directly modify the HTML markup of the app directly.
+
+## Installation
+run `flutter pub add google_adsense`
+
+## Usage
+
+#### Setup your AdSense account
+1. [Make sure your site's pages are ready for AdSense](https://support.google.com/adsense/answer/7299563?hl=en&sjid=5790642343077592212-EU&visit_id=638657100661171978-1373860041&ref_topic=1319756&rd=1)
+2. [Create your AdSense account](https://support.google.com/adsense/answer/10162?hl=en&sjid=5790642343077592212-EU&visit_id=638657100661171978-1373860041&ref_topic=1250103&rd=1)
+3. (Optionally) To use `AdUnitWidget`, create [ad units](https://support.google.com/adsense/answer/9183549?hl=en&ref_topic=9183242&sjid=5790642343077592212-EU) in your AdSense account
+
+#### Initialize AdSense
+To start displaying ads, initialize the AdSense with your [client/publisher ID](https://support.google.com/adsense/answer/105516?hl=en&sjid=5790642343077592212-EU) (only use numbers).
+<?code-excerpt "example/lib/main.dart (init)"?>
+```dart
+import 'package:google_adsense/google_adsense.dart';
+
+void main() {
+  adSense.initialize('your_ad_client_id');
+  runApp(const MyApp());
+}
+
+```
+You are all set to start displaying [Auto ads](https://support.google.com/adsense/answer/9261805?hl=en)!
+#### Display AdUnitWidget
+<?code-excerpt "example/lib/main.dart (adUnit)"?>
+```dart
+adSense.adUnit(AdUnitConfiguration.displayAdUnit(
+    adSlot: 'your_ad_slot_id',
+    adFormat: AdFormatType.AUTO,
+    cssText:
+        'border: 5px solid red; display: block; padding: 20px')),
+```
+## Testing and common errors
+
+### Failed to load resource: the server responded with a status of 400
+Make sure to replace `your_ad_client_id` and `your_ad_slot_id` with the relevant values
+
+### Failed to load resource: the server responded with a status of 403
+1. When happening in **testing/staging** environment it is likely related to the fact that ads are only filled when requested from an authorized domain. If you are testing locally and running your web app on `localhost`, you need to:
+   1. Set custom domain name on localhost by creating a local DNS record that would point `127.0.0.1` and/or `localhost` to `your-domain.com`. On mac/linux machines this can be achieved by adding the following records to you /etc/hosts file:
+        `127.0.0.1	your-domain.com`
+        `localhost   your-domain.com`
+   2. Specify additional run arguments in IDE by editing `Run/Debug Configuration` or by passing them directly to `flutter run` command:  
+       `--web-port=8080`  
+       `--web-hostname=your-domain.com`
+2. When happening in **production** it might be that your domain was not yet approved or was disapproved. Login to your AdSense account to check your domain approval status
+
+### Ad unfilled  
+
+There is no deterministic way to make sure your ads are 100% filled even when testing. Some of the way to increase the fill rate:
+
+
+- Add AD_TEST parameter with value `true`  
+- Make sure AD_FORMAT is `auto` (default setting)
+- Make sure FULL_WIDTH_RESPONSIVE is `true` (default setting)
+- Try resizing the window or making sure that adUnitWidget width is less than ~1300px 

packages/google_adsense/dart_test.yaml

@@ -0,0 +1,6 @@
+## See https://github.com/dart-lang/test/blob/master/pkgs/test/doc/configuration.md#arguments
+#override_platforms:
+#  chrome:
+#    settings:
+#      executable: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
+#      arguments: --no-sandbox

packages/google_adsense/example/README.md

@@ -0,0 +1,21 @@
+# google_adsense_example
+
+An example demonstrating google_adsense Flutter plugin usage
+
+## Screenshots
+
+![Screenshot of the test app showing an ad on mobile](../example/images/mobile_screenshot.png)
+![Screenshot of the test app showing an ad on desktop](../example/images/desktop_screenshot.jpg)
+
+
+
+## Testing
+
+This package uses `package:integration_test` to run its tests in a web browser.
+
+See [Plugin Tests > Web Tests](https://github.com/flutter/flutter/blob/master/docs/ecosystem/testing/Plugin-Tests.md#web-tests)
+in the Flutter documentation for instructions to set up and run the tests in this package.
+
+Check [flutter.dev > Integration testing](https://docs.flutter.dev/testing/integration-tests)
+for more info.
+

packages/google_adsense/example/integration_test/ad_widget_test.dart

@@ -0,0 +1,78 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// TO run the test:
+// 1. Run chrome driver with --port=4444
+// 2. Run the test from example folder with: flutter drive -d web-server --web-port 7357 --browser-name chrome --driver test_driver/integration_test.dart --target integration_test/ad_widget_test.dart
+
+import 'package:flutter/widgets.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:google_adsense/google_adsense.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:web/web.dart' as web;
+
+const String testClient = 'test_client';
+const String testSlot = 'test_slot';
+late AdSense adsense;
+
+void main() async {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  setUp(() async {
+    adsense = AdSense();
+  });
+
+  group('initialization', () {
+    testWidgets('Repeated initialization throws error', (WidgetTester _) async {
+      adsense.initialize(testClient);
+      expect(() => adsense.initialize(testClient), throwsA(isA<StateError>()));
+    });
+
+    testWidgets('Initialization adds AdSense snippet to index.html',
+        (WidgetTester _) async {
+      // Given
+      const String expectedScriptUrl =
+          'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-$testClient';
+
+      // When
+      adsense.initialize(testClient);
+
+      // Then
+      final web.HTMLScriptElement injected =
+          web.document.head!.lastChild! as web.HTMLScriptElement;
+      expect(injected.src, expectedScriptUrl);
+      expect(injected.crossOrigin, 'anonymous');
+      expect(injected.async, true);
+    });
+  });
+
+  group('adWidget', () {
+    testWidgets('AdUnitWidget is created and rendered',
+        (WidgetTester tester) async {
+      // When
+      // TODO(sokoloff06): Mock server response
+
+      adsense.initialize(testClient);
+      final Widget adUnitWidget =
+          adSense.adUnit(AdUnitConfiguration.displayAdUnit(adSlot: testSlot));
+      await tester.pumpWidget(adUnitWidget);
+      await tester.pumpWidget(
+          adUnitWidget); // TODO(sokoloff06): Why only works when pumping twice?
+      // Then
+      // Widget level
+      expect(find.byWidget(adUnitWidget), findsOneWidget);
+      expect(adUnitWidget, isA<AdUnitWidget>());
+
+      // DOM level
+      final web.HTMLElement? platformView =
+          web.document.querySelector('flt-platform-view') as web.HTMLElement?;
+      expect(platformView, isNotNull);
+      final web.HTMLElement ins =
+          platformView!.querySelector('ins')! as web.HTMLElement;
+      expect(ins.style.display, 'block');
+
+      // TODO(sokoloff06): Validate response is rendered
+    });
+  });
+}

packages/google_adsense/example/lib/main.dart

@@ -0,0 +1,87 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+// #docregion init
+import 'package:google_adsense/google_adsense.dart';
+
+void main() {
+  adSense.initialize('your_ad_client_id');
+  runApp(const MyApp());
+}
+
+// #enddocregion init
+/// The main app.
+class MyApp extends StatelessWidget {
+  /// Constructs a [MyApp]
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      home: const MyHomePage(),
+    );
+  }
+}
+
+/// The home screen
+class MyHomePage extends StatefulWidget {
+  /// Constructs a [HomeScreen]
+  const MyHomePage({super.key});
+
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  int _counter = 0;
+
+  void _incrementCounter() {
+    setState(() {
+      _counter++;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('AdSense for Flutter demo app'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const Text(
+              'You have pushed the button this many times:',
+            ),
+            // #docregion adUnit
+            adSense.adUnit(AdUnitConfiguration.displayAdUnit(
+                adSlot: 'your_ad_slot_id',
+                adFormat: AdFormatType.AUTO,
+                cssText:
+                    'border: 5px solid red; display: block; padding: 20px')),
+            // #enddocregion adUnit
+            Text(
+              '$_counter',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _incrementCounter,
+        tooltip: 'Increment',
+        child: const Icon(Icons.add),
+      ), // This trailing comma makes auto-formatting nicer for build methods.
+    );
+  }
+}

packages/google_adsense/example/pubspec.yaml

@@ -0,0 +1,26 @@
+name: google_adsense_example
+description: "A new Flutter project."
+publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+
+version: 1.0.0+1
+
+environment:
+  sdk: ^3.4.0
+  flutter: ">=3.22.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  google_adsense:
+    path: ../
+  web: ^1.0.0
+
+dev_dependencies:
+  flutter_lints: ^3.0.0
+  flutter_test:
+    sdk: flutter
+  integration_test:
+      sdk: flutter
+
+flutter:
+  uses-material-design: true

packages/google_adsense/example/test_driver/integration_test.dart

@@ -0,0 +1,7 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:integration_test/integration_test_driver.dart';
+
+Future<void> main() => integrationDriver();

packages/google_adsense/example/web/index.html

@@ -0,0 +1,42 @@
+<!-- Copyright 2013 The Flutter Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="google_adsense_example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>google_adsense_example</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>