Flutter广告盈利插件storyly_monetization_flutter的使用

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

Flutter广告盈利插件storyly_monetization_flutter的使用

在本教程中，我们将展示如何在Flutter应用中集成并使用storyly_monetization_flutter插件。该插件可以帮助开发者通过广告来增加收入。

简介

storyly_monetization_flutter插件允许你在Flutter应用中集成Storyly广告，并通过广告获得收益。Storyly是一种互动式故事广告解决方案，可以帮助提升用户体验并增加广告收入。

使用步骤

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  storyly_monetization_flutter: ^最新版本号

然后运行flutter pub get以获取最新的依赖包。

2. 初始化插件

在你的main.dart文件中初始化storyly_monetization_flutter插件，并设置广告视图提供器。

import 'package:flutter/material.dart';
import 'package:storyly_flutter/storyly_flutter.dart';
import 'package:storyly_monetization_flutter/storyly_monetization_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Storyly Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(title: 'Storyly Demo Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const storylyToken =
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NfaWQiOjU1NiwiYXBwX2lkIjoxMzg5LCJpbnNfaWQiOjE0Mjd9.cGTn_uElzFerKU-ul3EnrTn7pMZlhA3HvG4EEoygDcQ";

  late StorylyViewController storylyViewController;

  void onStorylyViewCreated(StorylyViewController storylyViewController) {
    this.storylyViewController = storylyViewController;
    debugPrint("aaa ${this.storylyViewController.getViewId()}");
    StorylyMonetization.setAdViewProvider(
        storylyViewController.getViewId(),
        AdViewProvider(
            adMobAdUnitId: "ca-app-pub-3940256099942544/2247696110",
            adMobAdExtras: {
              "npa": "1",
              "aa": {"test": "a"}
            }));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Plugin example app'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: StorylyView(
                onStorylyViewCreated: onStorylyViewCreated,
                androidParam: StorylyParam()..storylyId = storylyToken,
                iosParam: StorylyParam()..storylyId = storylyToken,
                storylyLoaded: (storyGroups, dataSource) {
                  debugPrint("storylyLoaded -> storyGroups: ${storyGroups.length}");
                  debugPrint("storylyLoaded -> dataSource: $dataSource");
                },
                storylyLoadFailed: (errorMessage) =>
                    debugPrint("storylyLoadFailed -> $errorMessage"),
                storylyActionClicked: (story) {
                  debugPrint("storylyActionClicked -> ${story.title}");
                },
                storylyEvent: (event, storyGroup, story, storyComponent) {
                  debugPrint("storylyEvent -> event: $event");
                  debugPrint("storylyEvent -> storyGroup: ${storyGroup?.title}");
                  debugPrint("storylyEvent -> story: ${story?.title}");
                  debugPrint("storylyEvent -> storyComponent: $storyComponent");
                },
                storylyStoryShown: () => debugPrint("storylyStoryShown"),
                storylyStoryDismissed: () =>
                    debugPrint("storylyStoryDismissed"),
                storylyUserInteracted: (storyGroup, story, storyComponent) {
                  debugPrint("userInteracted -> storyGroup: ${storyGroup.title}");
                  debugPrint("userInteracted -> story: ${story.title}");
                  debugPrint("userInteracted -> storyComponent: $storyComponent");
                },
              ),
            ),
            Expanded(
              child: StorylyView(
                onStorylyViewCreated: onStorylyViewCreated,
                androidParam: StorylyParam()..storylyId = storylyToken,
                iosParam: StorylyParam()..storylyId = storylyToken,
                storylyLoaded: (storyGroups, dataSource) {
                  debugPrint("storylyLoaded -> storyGroups: ${storyGroups.length}");
                  debugPrint("storylyLoaded -> dataSource: $dataSource");
                },
                storylyLoadFailed: (errorMessage) =>
                    debugPrint("storylyLoadFailed -> $errorMessage"),
                storylyActionClicked: (story) {
                  debugPrint("storylyActionClicked -> ${story.title}");
                },
                storylyEvent: (event, storyGroup, story, storyComponent) {
                  debugPrint("storylyEvent -> event: $event");
                  debugPrint("storylyEvent -> storyGroup: ${storyGroup?.title}");
                  debugPrint("storylyEvent -> story: ${story?.title}");
                  debugPrint("storylyEvent -> storyComponent: $storyComponent");
                },
                storylyStoryShown: () => debugPrint("storylyStoryShown"),
                storylyStoryDismissed: () =>
                    debugPrint("storylyStoryDismissed"),
                storylyUserInteracted: (storyGroup, story, storyComponent) {
                  debugPrint("userInteracted -> storyGroup: ${storyGroup.title}");
                  debugPrint("userInteracted -> story: ${story.title}");
                  debugPrint("userInteracted -> storyComponent: $storyComponent");
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 配置广告视图

在上面的代码中，我们定义了两个StorylyView组件。每个组件都调用了onStorylyViewCreated方法，该方法用于初始化StorylyViewController并设置广告视图提供器。

void onStorylyViewCreated(StorylyViewController storylyViewController) {
  this.storylyViewController = storylyViewController;
  debugPrint("aaa ${this.storylyViewController.getViewId()}");
  StorylyMonetization.setAdViewProvider(
      storylyViewController.getViewId(),
      AdViewProvider(
          adMobAdUnitId: "ca-app-pub-3940256099942544/2247696110",
          adMobAdExtras: {
            "npa": "1",
            "aa": {"test": "a"}
          }));
}

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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用storyly_monetization_flutter插件来实现广告盈利的一个代码案例。请确保您已经按照Flutter和Dart的最佳实践设置了您的开发环境。

1. 添加依赖

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

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

然后运行flutter pub get来安装依赖。

2. 初始化插件

在您的主应用程序文件（通常是main.dart）中，导入插件并进行初始化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 初始化Storyly Monetization插件
    StorylyMonetizationFlutter.initialize(
      apiKey: '您的API_KEY', // 替换为您的Storyly API密钥
      userId: '用户ID', // 可以是用户的唯一标识符
      listener: (StorylyMonetizationEvent event) {
        // 处理事件回调，例如广告展示、点击等
        print('Storyly Monetization Event: ${event.toString()}');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Storyly Monetization Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示广告
            showStorylyAd();
          },
          child: Text('Show Storyly Ad'),
        ),
      ),
    );
  }

  Future<void> showStorylyAd() async {
    try {
      bool isAvailable = await StorylyMonetizationFlutter.isAdAvailable();
      if (isAvailable) {
        await StorylyMonetizationFlutter.showAd();
      } else {
        print('No ad available at this time.');
      }
    } catch (e) {
      print('Error showing Storyly ad: $e');
    }
  }
}

3. 配置Android和iOS

确保在Android和iOS项目中配置了必要的权限和设置。这通常涉及到在AndroidManifest.xml和Info.plist中添加必要的条目，以及确保您已经按照Storyly的文档设置了广告标识符和其他必要的配置。

4. 运行应用

现在，您可以运行您的Flutter应用，点击按钮应该能够触发Storyly广告的展示（如果有可用的广告）。

注意

  • 确保您已经正确设置了Storyly的API密钥和用户ID。
  • 测试广告可能需要一些时间才能加载，特别是在首次请求时。
  • 遵守Storyly的广告政策和指南，以确保您的广告展示符合规范。

这个示例代码展示了如何在Flutter应用中集成和使用storyly_monetization_flutter插件来展示广告。根据您的具体需求，您可能需要对代码进行调整和扩展。

回到顶部