如何在Flutter Web应用中正确集成AdSense ID实现广告变现？

数据老陈

2026-7-13

Flutter Web 广告变现实现问题

我正在开发一款Flutter Web应用，想添加广告变现功能。试过三种方法都没成功：

跟着视频教程操作，未成功；
尝试用iframe展示广告，调研后发现这种方式无法正常显示广告；
使用admanager_web Dart包，但没法用为Flutter Web创建的AdSense广告单元。

下面是我的代码和AdSense脚本，请问怎么正确用我的AdSense ID实现盈利？

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:admanager_web/admanager_web.dart';


void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize the AdManager package
  AdManagerWeb.init();

  // Run the app
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AdManager Web Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'AdManager Web Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> content = [
  const  Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:  [
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Text("Click + button to add content and AD example"),
        ),
      ],
    )
  ];

  void _addMoreContent() {
    List<Widget> newContent = [];

    // Texts to randomize the content
    List<String> lorem = [
      "Nisi meatball commodo in lorem frankfurter.  Salami brisket nulla chuck bacon excepteur cupidatat elit quis.  Est dolore ut turducken.  Picanha ut salami in commodo labore tenderloin shank in pancetta tri-tip do ball tip nostrud ut.  Sed ullamco turducken, swine alcatra flank irure hamburger sint fugiat qui corned beef.  Andouille qui ball tip sed.",
      "Cow cupim cillum, short ribs anim prosciutto proident leberkas.  Laborum bresaola commodo sed doner dolore, non ground round adipisicing frankfurter.  Ad prosciutto ribeye, meatball burgdoggen adipisicing ut cow porchetta shank pariatur sunt ham hock.  Beef ribs cow deserunt cillum ut in landjaeger cupidatat prosciutto pork.  In tenderloin short ribs ipsum sunt, t-bone tail jerky pork landjaeger venison sirloin cupidatat aliqua.  Elit tri-tip duis jowl doner salami culpa sint short loin commodo sunt ground round.  Nulla est mollit esse dolore, kevin ipsum meatloaf short ribs dolore beef ribs short loin culpa landjaeger venison.",
      "Ex cow laboris hamburger, chislic ullamco occaecat eiusmod doner commodo tongue in cillum irure.  Occaecat swine excepteur chicken in culpa, in corned beef pork chop anim dolore.  Do ham hock salami minim sint.  Shank pastrami bacon elit esse.",
      "Beef ribs dolor biltong burgdoggen, sunt esse pork.  Kielbasa ullamco alcatra short ribs consectetur swine.  Capicola ham hock chuck cupim, burgdoggen incididunt rump sint exercitation brisket flank boudin shoulder jowl et.  Sunt biltong ground round buffalo magna ball tip fugiat pariatur alcatra lorem cow pork aliqua eiusmod t-bone.  Drumstick pork ea, officia ipsum spare ribs dolor lorem kevin velit bacon swine shankle boudin occaecat.  Adipisicing swine ground round officia dolore lorem.  Duis laboris hamburger exercitation, alcatra voluptate jowl mollit occaecat corned beef short ribs qui pancetta.",
      "Prosciutto occaecat laborum flank nisi pork loin est tongue officia lorem jerky andouille drumstick cow do.  Quis boudin pastrami tail nostrud cow ball tip buffalo pork salami shoulder enim rump nisi.  Sunt ut pork belly anim, et ut meatball do fatback ad nostrud porchetta.  Prosciutto meatball chislic excepteur nisi salami fatback lorem capicola cillum.  Aute biltong alcatra, minim do non andouille ad tail occaecat ham hock mollit beef ribs.  Voluptate sausage cupim do jerky id.  Ball tip tempor pork belly, nisi esse cupidatat fatback dolor quis prosciutto occaecat porchetta pig reprehenderit."
    ];


   // adsenseAdsView();


    // Add Ad from AdManager using the AdManager package
    newContent.add(const Padding(
      padding: EdgeInsets.all(8.0),
      child: AdBlock(
        size: [AdBlockSize.mediumRectangle],
        adUnitId: "/6355419/Travel/Europe",
      ),
    ));

    // Add lorem text
    newContent.add(
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(lorem[Random().nextInt(lorem.length)]),
      ),
    );

    // Add Ad from AdManager using the AdManager package
    newContent.add(const Padding(
      padding: EdgeInsets.all(8.0),
      child: AdBlock(
        size: [AdBlockSize.mediumRectangle],
        adUnitId: "/6355419/Travel/Europe",
      ),
    ));

    newContent.add(const Padding(
      padding: EdgeInsets.all(8.0),
      child: AdBlock(
        size: [AdBlockSize.largeRectangle],
        adUnitId: "/6355419/Travel/Europe",
      ),
    ));
  newContent.add(const Padding(
      padding: EdgeInsets.all(8.0),
      child: AdBlock(
        size: [AdBlockSize.largeRectangle],
        adUnitId: "/6355419/Travel/Europe",
      ),
    ));

    setState(() {
      content.addAll(newContent);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
         children: content
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addMoreContent,
        tooltip: 'Add Content',
        child: const Icon(Icons.add),
      ),
    );
  }
}

我的AdSense脚本：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxx"
        crossorigin="anonymous"></script>
<!-- deney -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

解决方案

问题根源

admanager_web包是针对Google Ad Manager而非普通AdSense设计的，两者属于不同广告系统，无法直接混用AdSense广告单元ID。

正确实现步骤

1. 原生AdSense脚本集成（推荐）

Flutter Web本质是Web应用，直接嵌入AdSense脚本并通过HtmlElementView展示是最可靠的方式：

第一步：修改web/index.html
在<head>标签中添加AdSense初始化脚本（替换成你的客户端ID）：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-你的ID" crossorigin="anonymous"></script>

第二步：创建AdSense广告Widget

import 'dart:html' as html;
import 'package:flutter/material.dart';

class AdSenseAd extends StatelessWidget {
  final String adSlot;
  final String adFormat;
  final bool isFullWidth;

  const AdSenseAd({
    super.key,
    required this.adSlot,
    this.adFormat = "auto",
    this.isFullWidth = true,
  });

  @override
  Widget build(BuildContext context) {
    final adContainer = html.DivElement()
      ..id = 'ad-${DateTime.now().millisecondsSinceEpoch}'
      ..style.width = '100%'
      ..style.height = 'auto';

    final adIns = html.InsElement()
      ..className = 'adsbygoogle'
      ..setAttribute('data-ad-client', 'ca-pub-你的ID')
      ..setAttribute('data-ad-slot', adSlot)
      ..setAttribute('data-ad-format', adFormat);
    if (isFullWidth) {
      adIns.setAttribute('data-full-width-responsive', 'true');
    }

    adContainer.append(adIns);

    // 触发广告加载
    html.window.addEventListener('load', (_) {
      html.window.callMethod('adsbygoogle.push', [{}]);
    });

    return HtmlElementView(
      viewType: 'ad-view-${adContainer.id}',
      onCreatePlatformView: (int viewId) {
        final registry = html.window
            .getProperty('flutterWebRenderer')
            ?.getProperty('platformViewRegistry');
        registry?.callMethod(
          'registerViewFactory',
          [
            'ad-view-${adContainer.id}',
            (int id) => adContainer,
          ],
        );
        return Future.value(viewId);
      },
    );
  }
}

第三步：在页面中使用Widget
替换代码中原有的AdBlock组件：

newContent.add(const Padding(
  padding: EdgeInsets.all(8.0),
  child: AdSenseAd(
    adSlot: "你的AdSense广告槽ID",
  ),
));

2. 确认账户与广告单元状态

确保AdSense账户已通过审核，广告单元绑定的域名与你的Flutter Web应用域名一致；
测试阶段建议使用AdSense官方测试广告单元（客户端IDca-pub-3940256099942544，对应测试槽如2100470697），避免因账户审核问题导致广告不显示。

3. 放弃iframe方式

Google AdSense禁止通过iframe加载广告，会触发广告屏蔽机制，此方式不可行。

注意事项

页面需有足够原创内容，广告位置需符合AdSense政策，否则可能无法展示盈利广告；
测试环境中通常显示测试广告，上线后才会展示真实付费广告；
web/index.html中的AdSense初始化脚本只需添加一次，避免重复初始化导致异常。

内容的提问来源于stack exchange，提问作者Berkay Isıkoglu