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的支持的不夠好，導致顯示的性能非常低。
最主要的是，這個問題，現在也沒有解決!!!
無奈，只能先這樣上架了，反正每天也沒幾個人使用。