Flutter原生广告集成插件taboola_sdk的使用

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

Flutter原生广告集成插件taboola_sdk的使用

在本教程中，我们将展示如何在Flutter应用中集成Taboola SDK来展示原生广告。Taboola SDK允许开发者轻松地将广告集成到他们的应用中。

发布状态

Taboola Flutter插件已正式发布（GA）。

文档链接：Taboola Flutter插件文档

如需更多信息，请联系：mobile-apps-pm@taboola.com

许可证和条款

Android和iOS SDK许可证：

使用仓库中的示例代码受Taboola使用条款和隐私政策约束。

完整示例代码

示例代码

import 'dart:collection';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:taboola_sdk_example/screens/ExtraPropertiesExampleScreen.dart';
import 'package:taboola_sdk_example/screens/GUEH_example.dart';
import 'package:taboola_sdk_example/screens/keepAliveTest.dart';
import 'package:taboola_sdk_example/screens/listView_example.dart';
import 'package:taboola_sdk_example/screens/publishers/ali_test.dart';
import 'package:taboola_sdk_example/screens/publishers/nikib_test.dart';
import 'package:taboola_sdk_example/screens/publishers/walla_test.dart';

// 导入屏幕
import 'package:taboola_sdk_example/screens/single_child_scroll_view_test.dart';
import 'package:taboola_sdk_example/screens/taboola_custom_scrollview_screen.dart';
import 'package:taboola_sdk_example/screens/taboola_dedupe_screen.dart';
import 'package:taboola_sdk_example/screens/taboola_tabs_screen.dart';
import 'package:taboola_sdk_example/screens/taboola_pageview_screen.dart';
import 'package:taboola_sdk_example/DefaultProperties.dart' as PublisherProperties;
import 'package:taboola_sdk/taboola.dart';

void main() {
  // 模拟发布者错误处理，也用于GUEH的QA测试
  FlutterError.onError = (details) {
    Fluttertoast.showToast(
        msg: details.exceptionAsString(),
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0);
  };

  PlatformDispatcher.instance.onError = (error, stack) {
    if (error is PlatformException) {
      Fluttertoast.showToast(
          msg: error.message.toString(),
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          fontSize: 16.0);
    }

    return false;
  };
  // 初始化Taboola SDK
  WidgetsFlutterBinding.ensureInitialized();
  Taboola.setLogsEnabled(true);
  Taboola.init(TBLPublisherInfo(PublisherProperties.publisher));
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: new HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Widget displayedScreen;
  String? keepAlive = "true";
  String KEEP_ALIVE_KEY = "keepAlive";

  [@override](/user/override)
  void initState() {
    super.initState();

    // 设置默认屏幕
    displayedScreen = TaboolaCustomScrollviewScreen(
        PublisherProperties.publisher,
        PublisherProperties.page_url,
        PublisherProperties.page_type,
        PublisherProperties.placement,
        PublisherProperties.mode);

    // 允许手势调试
    // debugPrintGestureArenaDiagnostics = true;
  }

  // 传递此回调以更改KeepAliveTest屏幕中的keepAlive值，全局由HomeScreen管理
  void _onKeepAliveChanged(String? value) {
    setState(() {
      keepAlive = value;
    });
    HashMap<String, String> extraProperties = HashMap();
    extraProperties[KEEP_ALIVE_KEY] = keepAlive ?? "";
    Taboola.setGlobalExtraProperties(extraProperties);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        title: Text('TaboolaFlutterDemo'),
      ),
      body: Center(
        child: displayedScreen,
      ),
      drawer: Drawer(
        // 添加一个ListView到抽屉中。这确保用户可以滚动查看选项
        child: ListView(
          // 移除ListView的内边距
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text('Taboola Sample Screens'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('SingleChildScrollView'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = SingleChildScrollViewTest(context);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Dedupe Example'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = TaboolaDedupeScreen();
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('ListViewExample'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = CustomListViewPageFeedAndWidget();
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('TaboolaClassic | CustomScrollView w/ Feed'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = TaboolaCustomScrollviewScreen(
                      PublisherProperties.publisher,
                      PublisherProperties.page_url,
                      PublisherProperties.page_type,
                      PublisherProperties.placement,
                      PublisherProperties.mode);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('TaboolaClassic | Tabs w/ Feed'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = TaboolaTabsScreen(
                      PublisherProperties.publisher,
                      PublisherProperties.page_url,
                      PublisherProperties.page_type,
                      PublisherProperties.placement,
                      PublisherProperties.mode);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('TaboolaClassic | PageView w/ Feed'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = TaboolaPageViewScreen(
                      PublisherProperties.publisher,
                      PublisherProperties.page_url,
                      PublisherProperties.page_type,
                      PublisherProperties.placement,
                      PublisherProperties.mode);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('TaboolaClassic | Ali\'s Case'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = AliTest(context);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('TaboolaClassic | Niki Bs Case'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = NikiB(context);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('GUEH Example'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = GUEHExample();
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('ExtraProperties Example Screen'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = ExtraPropertiesExampleScreen();
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Walla example'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = WallaTest();
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Keep Alive Test'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // 更新应用状态
                setState(() {
                  displayedScreen = KeepAliveTest(keepAlive, _onKeepAliveChanged);
                });
                // 关闭抽屉
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


在Flutter项目中集成Taboola原生广告插件（taboola_sdk）涉及到多个步骤，包括在Flutter项目中添加依赖、配置原生代码以及实现广告展示逻辑。以下是一个简要的代码案例，展示了如何在Flutter项目中集成和使用Taboola原生广告插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  taboola_sdk: ^latest_version  # 替换为最新的版本号

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

2. 配置原生代码

由于taboola_sdk是一个依赖于原生代码的插件，你可能需要在iOS和Android项目中进行一些额外的配置。

iOS配置

在ios/Runner/Info.plist中添加Taboola所需的配置信息，比如广告位ID等（具体配置请参考Taboola官方文档）。

Android配置

在android/app/build.gradle文件中添加必要的权限和配置（同样，具体配置请参考Taboola官方文档）。

3. 实现广告展示逻辑

在你的Flutter代码中，你可以按照以下方式使用taboola_sdk来展示原生广告：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late TaboolaSdk taboolaSdk;

  @override
  void initState() {
    super.initState();
    // 初始化Taboola SDK
    taboolaSdk = TaboolaSdk(
      accountId: 'YOUR_ACCOUNT_ID',  // 替换为你的Taboola账户ID
      placementKey: 'YOUR_PLACEMENT_KEY',  // 替换为你的广告位Key
      env: TaboolaEnv.production,  // 或者 TaboolaEnv.sandbox 用于测试
    );

    // 加载广告
    loadAd();
  }

  Future<void> loadAd() async {
    try {
      await taboolaSdk.loadAd();
      // 广告加载成功后，可以调用一个方法来展示广告
      // 例如，在一个按钮点击事件中展示广告
    } catch (e) {
      print('Failed to load ad: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Taboola Native Ad Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 展示广告
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => AdPage(taboolaSdk: taboolaSdk),
                ),
              );
            },
            child: Text('Show Ad'),
          ),
        ),
      ),
    );
  }
}

class AdPage extends StatelessWidget {
  final TaboolaSdk taboolaSdk;

  AdPage({required this.taboolaSdk});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: FutureBuilder<TaboolaAd>(
          future: taboolaSdk.getAd(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                final ad = snapshot.data!;
                // 根据TaboolaAd对象构建你的广告UI
                return Column(
                  children: [
                    Image.network(ad.mainImage?.url ?? ''),
                    Text(ad.title ?? ''),
                    Text(ad.description ?? ''),
                    // 其他广告元素...
                    ElevatedButton(
                      onPressed: () {
                        // 处理点击事件，比如打开广告链接
                        if (ad.clickUrl != null) {
                          launchUrl(Uri.parse(ad.clickUrl!));
                        }
                      },
                      child: Text('Learn More'),
                    ),
                  ],
                );
              } else {
                return Text('No ad available.');
              }
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }

  Future<void> launchUrl(Uri url) async {
    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

注意：

  1. 上述代码是一个简化的示例，用于展示如何集成和展示Taboola原生广告。
  2. 在实际项目中，你需要根据Taboola SDK的具体API和文档进行更详细的配置和实现。
  3. 广告展示逻辑（如UI布局、点击事件处理等）可能需要根据具体需求进行调整。
  4. 确保你遵循Taboola的广告政策和指南，以避免任何潜在的问题。

由于taboola_sdk的具体API和实现可能随时间而变化，因此建议查阅最新的官方文档以获取最准确的信息。

回到顶部