Flutter pangolin AD plugin -FlutterAds

preface

In my last post we talked about how much Flutter is supported by all the major advertising platforms in China and why I created FlutterAds to build great Flutter ads to help developers make money. This article will take a look at the integration and use of Flutter pangolin ads plugin Flutter_Pangle_ADS.

Mobile advertising form

There are five kinds of advertising forms on the mobile terminal, respectivelyThe tail,plaque,Banner,The flow of information,Incentive video. With the rise of short videos, there are new onesFull screen videoAnd the first fiveMixing in video form.

Integrated advertising plug-in

• Flutter pangolin ads plugin flutter_pangle_ADS

Plug-in features

• 🔨 Simple and fast access (package native configuration, just import to start)
• ♻️ Supports both Flutter 1X and Flutter 2X
• 📡 Unified event return (The unified return of all important callback events on the native end facilitates service processing and buried point statistics)
• 🎁 Focus on optimizing experience (no blinking Logo open screen, iOS open screen event penetration prevention, permission application, privacy tracking application, information flow automatic adaptation high width)
• 🏆 geek code encapsulation (the native end of the code is not enough, both ends of the unified basic framework, advertising event encapsulation abstract, easy to expand the new form of advertising, convenient to develop personalized needs)

Support functions

• ✅ Open screen advertising
• ✅ Interstitial ads
  • ✅ half plaque
  • ✅ Full screen video (new screenshot)
• ✅ Incentive video
• ✅ Full screen video
• ✅ Banner
• ✅ information flow

Introduction of depend on

Flutter_pangle_ads supports both Null and non-NULL Safety versions

dependencies:
  flutter_pangle_ads: ^ 1.4.0 # Non-null Safety version
  flutter_pangle_ads: ^ 2.4.0 # Null Safety version
Copy the code

Initialize ads

/ / package
import 'package:flutter_pangle_ads/flutter_pangle_ads.dart';
// [appId] Indicates the application ID
FlutterPangleAds.initAd(appId);
Copy the code

Opening the advertising

Half-screen AD + Logo

• Best practices for Logo Settings

/// [posId] Indicates the id of the AD slot
/// [logo] If the value is uploaded, the bottom logo is displayed. If the value is not uploaded, the bottom logo is displayed in full screen
/// [timeout] Indicates the loading timeout period
/// [buttonType] Click area of open screen advertisement, 1: all can be clicked 2: only download Bar area can be clicked
FlutterPangleAds.showSplashAd(
  posId,
  logo: 'flutterads_logo',
  timeout: 3.5,
  buttonType: 2,);Copy the code

Full-screen ads

FlutterQqAds.showSplashAd(posId);
Copy the code

Plaque advertising

/// [posId] Indicates the id of the AD slot
/// [width] Size width of the request template AD material (corresponding to the expressViewWidth argument)
/// [height] Size height of the request template AD material (corresponding to the expressViewWidth argument)
FlutterPangleAds.showInterstitialAd(
    AdsConfig.interstitialId,
    width: 300,
    height: 300,);Copy the code

Full screen video

• Full screen video
• The new plaque

/// [posId] Indicates the id of the AD slot
FlutterPangleAds.showFullScreenVideoAd(AdsConfig.fullScreenVideoId);
Copy the code

Incentive video

/// [posId] Indicates the id of the AD slot
/// [customData] Sets the custom information for server authentication
/// [userId] Sets the user information authenticated by the server
FlutterPangleAds.showRewardVideoAd(
    AdsConfig.rewardVideoId,
    customData: 'customData',
    userId: 'userId',);Copy the code

Banner

/// [posId] Indicates the id of the AD slot
/// [width] Specifies the width selected when creating the Banner AD space. The default value is 300
/// [height] Specifies the height selected when creating the Banner space. The default value is 150
/// [interval] Indicates the advertisement rotation interval. The value is a number between 0 and [30 to 120], in seconds. The default value is 0
/// [show] Whether to display advertisements
/// [autoClose] Indicates whether to automatically close, usually after the user clicks uninterested
AdBannerWidget(
  posId: AdsConfig.bannerId,
  width: 300,
  height: 150,
  interval: 30.show: true,
  autoClose: true,);Copy the code

The Banner is a Widget embedded directly into the Flutter page as shown in the following example:

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,),Copy the code

The flow of information

• Get a list of news stream ads

/// [posId] Indicates the id of the AD slot
/// Width width
/// [height]
/// [count] Obtain the number of advertisements. 1 to 3 are recommended
List<int> feedAdList = await FlutterPangleAds.loadFeedAd(
    AdsConfig.feedId,
    width: 375,
    height: 128,
    count: 3,);Copy the code

• Clear the news stream AD list

Be sure to remove your ads when they are no longer needed

/// [list] List of AD ids for the traffic
bool result = await FlutterPangleAds.clearFeedAd(feedAdList);
Copy the code

• The page displays information stream ads

/// Feed Feed stream advertising component
/// [posId] return AD id, this is not AD slot ID
/// [width] Specifies the width of the component
/// [height] Height of the component
/// [show] Whether the command is displayed
AdFeedWidget(
    posId: '${feedAdList[0]}',
    width: 375,
    height: 128.show: true.)Copy the code

Width and height need to be set according to the template you created for the AD space, but will automatically match the AD size based on the actual render size anyway

Set up AD event listening

FlutterPangleAds.onEventListener((event) {
  // General advertising events
  String _adEvent = 'adId:${event.adId} action:${event.action}';
  if (event is AdErrorEvent) {
    // Error event
    _adEvent += ' errCode:${event.errCode} errMsg:${event.errMsg}';
  } else if (event is AdRewardEvent) {
    // Event
        _adEvent +=
            ' rewardVerify:${event.rewardVerify} rewardAmount:${event.rewardAmount} rewardName:${event.rewardName} errCode:${event.errCode} errMsg:${event.errMsg} customData:${event.customData} userId:${event.userId}';
  }
  // Test off Banner (member scenario)
  if (event.action == AdEventAction.onAdClosed &&
      event.adId == AdsConfig.bannerId02) {
    _adEvent += 'Members only can close ads';
  }
  print('onEventListener:$_adEvent');
});
Copy the code

The event list

Here is a unified abstraction, iOS and Android native SDK name is different, if you feel that does not match, can mention Issues (be sure to add log screenshots)

Update log

View the Releases version log

Have a problem

If you have any problems, please issue to me. (It is recommended to search and try before asking, no further questions)

Support the open source

The best way to support an open source project is to go to the free Star ⭐️

FlutterAds AD plugin series