【已開源】Flutter 穿山甲廣告外掛的整合-FlutterAds

ZeroFlutter發表於2022-01-04
Flutter

前言

上篇文章我們聊了國內各大廣告平臺對 Flutter 的支援程度和我為什麼建立 FlutterAds 來構建優質的 Flutter 廣告外掛，幫助開發者獲利。
本篇我們來看看Flutter 穿山甲廣告外掛 flutter_pangle_ads 的整合和使用。

移動端廣告形式

在移動端大體分為 5 種廣告形式，分別是 開屏、插屏、Banner、資訊流、激勵視訊。隨著短視訊的崛起，出現了新的全屏視訊和前面 5 種的混入視訊形式。
image.png

整合廣告外掛

image.png

外掛特點

  • ? 接入簡單快速（封裝原生端配置，僅需引入即可開始）
  • ♻️ 同時支援 Flutter 1x 和 2x 版本
  • ? 事件統一返回（將原生端各種重要回撥事件統一返回，方便業務處理和埋點統計等需求）
  • ? 注重優化體驗（無閃爍 Logo 開屏、iOS 開屏防止事件穿透、許可權申請、隱私跟蹤申請、資訊流自動適配寬高等）
  • ? 極客程式碼封裝（原生端程式碼不湊合，兩端統一基礎框架、廣告事件封裝抽象、易擴充套件新廣告形式、方便開發個性化需求）

支援功能

  • ✅ 開屏廣告
  • ✅ 插屏廣告
    • ✅ 半插屏
    • ✅ 全屏視訊（新插屏）
  • ✅ 激勵視訊
  • ✅ 全屏視訊
  • ✅ Banner
  • ✅ 資訊流

引入依賴

flutter_pangle_ads 支援 Null Safety 和 非Null Safety 兩個版本

dependencies:
  flutter_pangle_ads: ^1.4.0 # 非 Null Safety 版本
  flutter_pangle_ads: ^2.4.0 # Null Safety 版本

初始化廣告

// 導包
import 'package:flutter_pangle_ads/flutter_pangle_ads.dart';
// [appId] 應用ID
FlutterPangleAds.initAd(appId);

開屏廣告

/// [posId] 廣告位 id
/// [logo] 如果傳值則展示底部logo，不傳不展示，則全屏展示
/// [timeout] 載入超時時間
/// [buttonType] 開屏廣告的點選區域，1：全都可以點選 2：僅有下載 Bar 區域可以點選
FlutterPangleAds.showSplashAd(
  posId,
  logo: 'flutterads_logo',
  timeout: 3.5,
  buttonType: 2,
);

全屏開屏廣告

FlutterQqAds.showSplashAd(posId);

Simulator Screen Recording - iPhone 13 - 2021-12-17 at 16.33.28.gif

插屏廣告

/// [posId] 廣告位 id
/// [width] 請求模板廣告素材的尺寸寬度（對應 expressViewWidth 引數）
/// [height] 請求模板廣告素材的尺寸高度（對應 expressViewWidth 引數）
FlutterPangleAds.showInterstitialAd(
    AdsConfig.interstitialId,
    width: 300,
    height: 300,
);

image.png

全屏視訊

  • 全屏視訊
  • 新插屏
/// [posId] 廣告位 id
FlutterPangleAds.showFullScreenVideoAd(AdsConfig.fullScreenVideoId);

Simulator Screen Recording - iPhone 13 - 2021-12-17 at 16.43.58-2.gif

激勵視訊

/// [posId] 廣告位 id
/// [customData] 設定服務端驗證的自定義資訊
/// [userId] 設定服務端驗證的使用者資訊
FlutterPangleAds.showRewardVideoAd(
    AdsConfig.rewardVideoId,
    customData: 'customData',
    userId: 'userId',
);

Simulator Screen Recording - iPhone 13 - 2021-12-17 at 16.48.42-2.gif

/// [posId] 廣告位 id
/// [width] 建立 Banner 廣告位時選擇的寬度，預設值是 300
/// [height] 建立 Banner 廣告位時選擇的高度，預設值是 150
/// [interval] 廣告輪播間隔，0 或[30~120]之間的數字，單位為 s,預設為 0 不輪播
/// [show] 是否顯示廣告
/// [autoClose] 是否自動關閉，一般是在使用者點選不感興趣之後的操作
AdBannerWidget(
  posId: AdsConfig.bannerId,
  width: 300,
  height: 150,
  interval: 30,
  show: true,
  autoClose: true,
);

Banner 是 Widget 直接嵌入Flutter 頁面即可，示例如下：

AdBannerWidget(
  posId: AdsConfig.bannerId,
),
SizedBox(height: 10),
AdBannerWidget(
  posId: AdsConfig.bannerId01,
  width: 300,
  height: 75,
  interval: 30,
  show: true,
),
SizedBox(height: 10),
AdBannerWidget(
  posId: AdsConfig.bannerId02,
  width: 320,
  height: 50,
  autoClose: false,
),

image.png

資訊流

  • 獲取資訊流廣告列表
/// [posId] 廣告位 id
/// [width] 寬度
/// [height] 高度
/// [count] 獲取廣告數量，建議 1~3 個
List<int> feedAdList = await FlutterPangleAds.loadFeedAd(
    AdsConfig.feedId,
    width: 375,
    height: 128,
    count: 3,
  );
  • 清除資訊流廣告列表

當你的廣告不再需要時，請一定執行清除操作

/// [list] 資訊流廣告 id 列表
bool result = await FlutterPangleAds.clearFeedAd(feedAdList);
  • 頁面中展示資訊流廣告
/// Feed 資訊流廣告元件
/// [posId]返回的廣告 id，這裡不是廣告位id
/// [width]元件的寬度
/// [height]元件的高度
/// [show]是否顯示
AdFeedWidget(
    posId: '${feedAdList[0]}',
    width: 375,
    height: 128,
    show: true,
  )

width 和 height 需要根據你新建廣告位的模板來設定，但是無論如何都會根據實際渲染的大小來自動適配廣告的大小

Simulator Screen Recording - iPhone 13 - 2021-12-17 at 16.57.40-2.gif

設定廣告事件監聽

FlutterPangleAds.onEventListener((event) {
  // 普通廣告事件
  String _adEvent = 'adId:${event.adId} action:${event.action}';
  if (event is AdErrorEvent) {
    // 錯誤事件
    _adEvent += ' errCode:${event.errCode} errMsg:${event.errMsg}';
  } else if (event is AdRewardEvent) {
    // 激勵事件
        _adEvent +=
            ' rewardVerify:${event.rewardVerify} rewardAmount:${event.rewardAmount} rewardName:${event.rewardName} errCode:${event.errCode} errMsg:${event.errMsg} customData:${event.customData} userId:${event.userId}';
  }
  // 測試關閉 Banner（會員場景）
  if (event.action == AdEventAction.onAdClosed &&
      event.adId == AdsConfig.bannerId02) {
    _adEvent += '僅會員可以關閉廣告';
  }
  print('onEventListener:$_adEvent');
});

事件列表

事件 說明
onAdLoaded 廣告載入成功
onAdPresent 廣告填充
onAdExposure 廣告曝光
onAdClosed 廣告關閉（開屏計時結束或者使用者點選關閉）
onAdClicked 廣告點選
onAdSkip 廣告跳過
onAdComplete 廣告播放或計時完畢
onAdError 廣告錯誤
onAdReward 獲得廣告激勵

這裡做了統一的抽象，iOS 和 Android 原生 SDK 名稱不同，如果覺得對應不上，可以提 Issues（一定要加上 log 截圖）

更新日誌

檢視 Releases 版本日誌

遇到問題

如果你遇到問題請提 Issues 給我（提問前建議先搜尋嘗試，沒有再提問）

支援開源

支援開源專案最好的方式就是點個免費的 Star ⭐️

FlutterAds 廣告外掛系列

外掛 描述
flutter_qq_ads 騰訊廣告、廣點通、優量匯 Flutter 廣告外掛
flutter_pangle_ads 位元組跳動、穿山甲 Flutter 廣告外掛
flutter_gromore_ads 位元組跳動、穿山甲、Gromore 聚合 Flutter 廣告外掛

相關文章