Flutter广告集成插件flutter_yandex_ads的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter广告集成插件flutter_yandex_ads的使用

简介

Yandex ADS插件用于在Flutter应用中集成广告。以下是如何在Flutter项目中使用该插件的详细步骤。

Roadmap

Android

  • ✅ Banner
  • ✅ Interstitial
  • ✅ Native
  • ✅ Rewarded

iOS

  • ✅ Banner
  • ✅ Interstitial
  • ✅ Native
  • ✅ Rewarded

使用步骤

安装插件

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_yandex_ads:
    git:
      url: https://gitflic.ru/project/kovardin/flutter-yandex-ads.git

Android配置

在AndroidManifest.xml中添加权限：

<uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove"/>

对于AdMob，添加以下代码：

<meta-data
   android:name="com.google.android.gms.ads.APPLICATION_ID"
   android:value="YOUR_ADMOB_APP_ID"/>

iOS配置

在Info.plist中添加AdMob配置：

<key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>

添加SKAdNetwork标识：

<key>SKAdNetworkItems</key>
<array>
    <!-- Yandex Ads -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>zq492l623r.skadnetwork</string>
    </dict>
    <!-- AdMob -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <!-- MyTarget -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>n9x2a789qt.skadnetwork</string>
    </dict>
    <!-- MyTarget -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>r26jy69rpl.skadnetwork</string>
    </dict>
    <!-- Start.io -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>5l3tpt7t6e.skadnetwork</string>
    </dict>
    <!-- UnityAds -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4dzt52r2t5.skadnetwork</string>
    </dict>
    <!-- IronSource -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>su67r6k2v3.skadnetwork</string>
    </dict>
    <!-- Applovin -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ludvb6z3bs.skadnetwork</string>
    </dict>
    <!-- Mintegral -->
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>KBD757YWX3.skadnetwork</string>
    </dict>
</array>

在Podfile中设置静态链接：

use_frameworks! :linkage => :static

初始化

在main.dart中初始化插件：

import 'package:flutter_yandex_ads/yandex.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  void initState() {
    super.initState();

    FlutterYandexAds.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: const Text('Yandex ADS'),
            ),
            bottomNavigationBar: const TabBar(
              tabs: [
                Tab(child: Text('Banner', style: TextStyle(color: Colors.black54, fontSize: 12))),
                Tab(child: Text('Interstitial', style: TextStyle(color: Colors.black54, fontSize: 12))),
                Tab(child: Text('Native', style: TextStyle(color: Colors.black54, fontSize: 12))),
                Tab(child: Text('Rewarded', style: TextStyle(color: Colors.black54, fontSize: 12))),
              ],
            ),
            body: const TabBarView(
              children: [
                BannerScreen(),
                InterstitialScreen(),
                NativeScreen(),
                RewardedScreen(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

广告组件

Banner

创建Banner广告组件：

var banner = YandexAdsBannerComponent(
    width: 320,
    height: 100,
    id: 'R-M-DEMO-320x50',
    onAdLoaded: () {
      print('banner onAdLoaded');
    },
    onAdFailedToLoad: (BannerError err) {
      print('banner onAdFailedToLoad code: ${err.code}, description: ${err.description}');
    },
    onImpression: (BannerImpression? data) {
      print("banner onImpression ${data?.data}");
    },
    onAdClicked: () {
      print('banner onAdClicked');
    },
  ),
);

banner.load();

创建Banner广告Widget：

Container(
  height: 100,
  child: YandexAdsBannerWidget(
    banner: banner,
  ),
)

Native

创建Native广告组件：

Container(
  height: 100,
  child: YandexAdsNativeWidget(
    id: 'R-M-DEMO-native-i',
    onAdLoaded: () {
      print('native onAdLoaded');
    },
    onAdFailedToLoad: (BannerError err) {
      print('native onAdFailedToLoad code: ${err.code}, description: ${err.description}');
    },
    onImpression: (BannerImpression? data) {
      print("native onImpression ${data?.data}");
    },
    onAdClicked: () {
      print('native onAdClicked');
    },
  ),
)

Interstitial

创建Interstitial广告组件：

YandexAdsInterstitialComponent interstitial = YandexAdsInterstitialComponent(
  id: 'R-M-338238-18',
  onAdLoaded: () {
    print('interstitial onAdLoaded');
  },
  onAdFailedToLoad: (InterstitialError err) {
    print('interstitial onAdFailedToLoad code: ${err.code}, description: ${err.description}');
  },
  onAdDismissed: () {
    print("interstitial onAdDismissed");
  },
  onAdShown: () {
    print("interstitial onAdShown");
  },
  onImpression: (InterstitialImpression? data) {
    print('interstitial onImpression ${data?.data}');
  },
);

interstitial.load();

展示Interstitial广告：

ElevatedButton(
  onPressed: () {
    interstitial.show();
  },
  child: const Text('show'),
)

Rewarded

创建Rewarded广告组件：

YandexAdsRewardedComponent rewarded = YandexAdsRewardedComponent(
    id: 'R-M-DEMO-rewarded-client-side-rtb',
    onAdLoaded: () {
      print('rewarded onAdLoaded');
    },
    onAdFailedToLoad: (RewardedError err) {
      print('rewarded onAdFailedToLoad code: ${err.code}, description: ${err.description}');
    },
    onAdFailedToShow: (RewardedError err) {
      print('rewarded onAdFailedToShow description: ${err.description}');
    },
    onAdDismissed: () {
      print("rewarded onAdDismissed");
    },
    onAdShown: () {
      print("rewarded onAdShown");
    },
    onImpression: (RewardedImpression? data) {
      print('rewarded onImpression ${data?.data}');
    },
    onRewarded: (RewardedEvent? data) {
      print('rewarded onRewarded amount ${data?.amount}, type ${data?.type}');
    },
);

rewarded.load();

展示Rewarded广告：

ElevatedButton(
  onPressed: () {
    rewarded.show();
  },
  child: const Text('show'),
)

更多关于Flutter广告集成插件flutter_yandex_ads的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter广告集成插件flutter_yandex_ads的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用flutter_yandex_ads插件的一个代码示例。这个插件允许你在Flutter应用中集成Yandex广告。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_yandex_ads依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_yandex_ads: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

2. 配置Android项目

在android/app/src/main/AndroidManifest.xml中添加必要的权限和配置，如Internet权限，以及Yandex广告的meta-data。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        ...>
        
        <!-- Yandex Ads Configuration -->
        <meta-data
            android:name="com.yandex.mobile.ads.AppID"
            android:value="YOUR_YANDEX_ADS_APP_ID" />

        <!-- Other configurations -->
        
    </application>
</manifest>

请将YOUR_YANDEX_ADS_APP_ID替换为你的Yandex广告应用ID。

3. 配置iOS项目

如果你也在iOS上运行你的应用，你需要在ios/Runner/Info.plist中添加Yandex Ads的配置（如果需要的话，具体配置请参考Yandex Ads的官方文档）。

4. 初始化广告插件

在你的Flutter应用中初始化Yandex广告插件。通常，这会在应用的主入口文件（如main.dart）中进行。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: YandexAdsExample(),
    );
  }
}

class YandexAdsExample extends StatefulWidget {
  @override
  _YandexAdsExampleState createState() => _YandexAdsExampleState();
}

class _YandexAdsExampleState extends State<YandexAdsExample> {
  @override
  void initState() {
    super.initState();
    // 初始化Yandex广告插件
    FlutterYandexAds.initialize(
      appId: 'YOUR_YANDEX_ADS_APP_ID',
      testMode: true, // 设置为true以在测试模式下运行
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Ads Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示横幅广告示例
            _showBannerAd();
          },
          child: Text('Show Banner Ad'),
        ),
      ),
    );
  }

  void _showBannerAd() {
    // 加载并显示横幅广告
    FlutterYandexAds.loadBannerAd(
      adUnitId: 'YOUR_BANNER_AD_UNIT_ID',
      adSize: BannerAdSize.BANNER, // 或者其他尺寸，如SMART_BANNER, LEADERBOARD等
      listener: (AdEvent event, Map<String, dynamic> data) {
        // 处理广告事件，如加载成功、失败、点击等
        print('Ad event: $event, data: $data');
      },
    )..show();
  }
}

请将YOUR_YANDEX_ADS_APP_ID和YOUR_BANNER_AD_UNIT_ID替换为你的实际Yandex广告应用ID和广告单元ID。

5. 运行应用

现在你可以运行你的Flutter应用，并查看Yandex广告的集成效果。

这个示例展示了如何初始化Yandex广告插件并在按钮点击时显示一个横幅广告。你可以根据Yandex Ads的官方文档进一步自定义和扩展广告功能。

回到顶部