Taboola 广告集成插件 taboola_sdk_beta 的使用

在本教程中，我们将介绍如何在 Flutter 应用程序中集成 taboola_sdk_beta 插件以展示 Taboola 广告。我们将通过一个完整的示例来演示如何初始化插件、设置广告单元并运行应用程序。

使用步骤

1. 添加依赖项

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

dependencies:
  taboola_sdk_beta: ^版本号

然后运行以下命令以安装依赖项：

flutter pub get

2. 初始化 Taboola SDK

在应用程序的入口文件中，确保初始化 Taboola SDK。以下是一个完整的示例：

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:taboola_sdk_beta/taboola.dart';

void main() {
  // 初始化 Taboola SDK
  WidgetsFlutterBinding.ensureInitialized();
  Taboola.setLogsEnabled(true); // 启用日志记录以便调试
  Taboola.init(TBLPublisherInfo(publisherId: '您的发布商 ID', pageType: '页面类型'));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 创建广告展示页面

接下来，创建一个用于展示 Taboola 广告的页面。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:taboola_sdk_beta/taboola.dart';

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

class _TaboolaAdScreenState extends State<TaboolaAdScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 加载 Taboola 广告
    Taboola.loadWidget(
      placement: '您的广告位名称',
      mode: TBLMode.AUTO,
      pageUrl: 'https://example.com',
      onLoaded: (success) {
        print('广告加载成功: $success');
      },
      onError: (error) {
        print('广告加载失败: $error');
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Taboola 广告示例'),
      ),
      body: Center(
        child: Text('等待 Taboola 广告加载...'),
      ),
    );
  }
}

4. 配置广告参数

在 loadWidget 方法中，您可以配置多个参数，例如广告位名称、页面 URL 和加载模式。以下是常用参数的详细说明：

• placement: 广告位名称。
• mode: 广告加载模式（TBLMode.AUTO 或 TBLMode.MANUAL）。
• pageUrl: 页面 URL。
• onLoaded: 广告加载成功的回调函数。
• onError: 广告加载失败的回调函数。

5. 运行应用程序

完成上述步骤后，运行您的应用程序。如果一切配置正确，您应该会看到 Taboola 广告成功加载并显示在屏幕上。

完整示例代码

以下是一个完整的示例代码，展示了如何集成 taboola_sdk_beta 插件并展示 Taboola 广告：

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:taboola_sdk_beta/taboola.dart';

void main() {
  // 初始化 Taboola SDK
  WidgetsFlutterBinding.ensureInitialized();
  Taboola.setLogsEnabled(true); // 启用日志记录以便调试
  Taboola.init(TBLPublisherInfo(publisherId: '您的发布商 ID', pageType: '页面类型'));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Taboola 广告示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TaboolaAdScreen()),
            );
          },
          child: Text('加载 Taboola 广告'),
        ),
      ),
    );
  }
}

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

class _TaboolaAdScreenState extends State<TaboolaAdScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 加载 Taboola 广告
    Taboola.loadWidget(
      placement: '您的广告位名称',
      mode: TBLMode.AUTO,
      pageUrl: 'https://example.com',
      onLoaded: (success) {
        print('广告加载成功: $success');
      },
      onError: (error) {
        print('广告加载失败: $error');
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Taboola 广告示例'),
      ),
      body: Center(
        child: Text('等待 Taboola 广告加载...'),
      ),
    );
  }
}