ZHIYA
Blog

flutter集成admob库时碰到的至今为止都没解决的坑

前几天开始给一个上架的应用集成admob。这个应用本身日活很少,每天只有几个人使用。

本来想着先免费一段时间,等到日活到100的时候再来集成admob的,这样每天的收入不至于难看。

但应用做完后,自己也在各个平台做了些推广,对针对产品做了些seo和aso,但三个多月时间过去,每天还是只有几个人使用。
每次好不容易推广带来一些流量,但无奈产品留存太低,基本用完就卸载,所以就放弃了等到日活到100后再集成admob的计划。

至于为什么产品留存这么低,我分析大概几个原因:

  1. 产品是工具类的产品,而且是一次性的,用完可能就很久才会两次需要。
  2. 推广产品的时候,推广目的用户不精准,大部分靠推广带来的用户可能只是图个新鲜,并不是真正需要此功能。
  3. 从play console后台看到下载此应用的用户很多不英语区的国家,但我这个产品目前只针对英语,而且软件里ui显示的文字只有英语。这就导致用户使用后不太满足自己的要求。

基于上述原因,所以决定趁早开始集成admob,想要等到100日活,估计等到猴年马月。

第一步开通admob。

开通admob还是蛮简单的。不过这里注意一点,选区的时候一定要注意,选定完后就不能修改了。
由于我的playstore 账号是中国大陆区的,所以admob也选择了相同的区。

第二步在admob上添加应用和添加广告单元。

开通完admob后,就要添加应用了。
由于应用已上架了一段时间,所以添加应用时,直接选择应用商店并输入应用包名就可以找到并添加了。

添加完后第一时间在相关的应用对应的官网上添加ads.txt文件,然后在admob验证应用。只有验证完成的应用才会请求到广告。
验证完成后会如下图显示:

验证成功后就可以添加广告单元了,我图省事添加了两个最简单的横幅广告,每个广告单元有唯一的广告ID,后面在代码集成的时候会用到。

第三步在flutter中集成admobs

先在代码里添加admob的依赖。

google_mobile_ads: ^5.1.0

然后再写一个专门显示横幅广告的widget.


class BannerAdWidget extends StatefulWidget {
  String adId;
  EdgeInsets? margin;

  BannerAdWidget(this.adId, {this.margin});

  @override
  State<StatefulWidget> createState() {
    return BannerAdWidgetState();
  }
}

class BannerAdWidgetState extends State<BannerAdWidget> {
  BannerAd? bannerAd;
  bool adReady = false;

  void loadBanner() {
    if (bannerAd != null) {
      setState(() {});
      return;
    }
    bannerAd = BannerAd(
      adUnitId: widget.adId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(onAdLoaded: (_) {
        adReady = true;
        setState(() {});
      }, onAdFailedToLoad: (ad, err) {
        adReady = false;
        bannerAd = null;
        setState(() {});
      }),
    );
    bannerAd?.load();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    AdmobAdMgrViewHelper.addReloadFailedAdCb(loadBanner);
    loadBanner();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    AdmobAdMgrViewHelper.removeReloadFailedAdCb(loadBanner);
    bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return (adReady && bannerAd != null)
        ? Container(
            margin: widget.margin,
            borderRadius: 2,
            child: Center(
              child: SizedBox(
                width: bannerAd!.size.width.toDouble(),
                height: bannerAd!.size.height.toDouble(),
                child: AdWidget(
                  ad: bannerAd!,
                ),
              ),
            ),
          )
        : const SizedBox.shrink();
  }
}

使用的时候就非常方便

Column(children:[
    BannerAdWidget(
        //上面在admob中创建的广告单元ID
      adUid,
    ),
])

这样在你的应用中就可以显示广告了。

最后碰到的无解的坑。

本来一切都顺利的。但打包测试的时候,发现加载完广告后,应用掉帧厉害,跳转界面时能明显感觉到不流畅。起初以为是哪个地方设置的不对,但找了一圈也没找到原因。遂不得不上github仓库的issue中尝试找到解决办法。

经过一通搜索,还真有不少人碰到同样的问题。

看了下各个网友的回复,大概知道为什么性能这么低了。原来flutter版的admob实现方式是在flutter中嵌套一个webview来显示广告,而flutter对webview的支持的不够好,导致显示的性能非常低。
最主要的是,这个问题,现在也没有解决!!!
无奈,只能先这样上架了,反正每天也没几个人使用。

版权声明:本文为ZHIYA网站的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:flutter集成admob库时碰到的至今为止都没解决的坑