Flutter广告展示与内嵌WebView扩展插件sourcepoint_unified_cmp_flutter_inappwebview_extension的使用

Flutter广告展示与内嵌WebView扩展插件sourcepoint_unified_cmp_flutter_inappwebview_extension的使用

本文将介绍如何在Flutter项目中使用sourcepoint_unified_cmp_flutter_inappwebview_extension插件来展示广告并内嵌WebView。该插件可以帮助你通过JavaScript SDK注入用户同意信息到WebView中。

插件描述

sourcepoint_unified_cmp workflow ci workflow Code Smells

该插件将Sourcepoint的统一CMP（Consent Management Platform）集成到flutter_inappwebview包中。它提供了一个名为preloadConsent()的方法，可以将用户在Flutter应用中给出的同意信息注入到WebView中。

贡献项目

请查看CONTRIBUTING.md以了解详细信息。

示例用法

为了使用此扩展，请确保在你的项目中实现sourcepoint_unified_cmp。更多任务请查阅sourcepoint_unified_cmp包。

示例代码

要运行示例，请查看以下示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:sourcepoint_unified_cmp/sourcepoint_unified_cmp.dart';
import 'package:sourcepoint_unified_cmp_flutter_inappwebview_extension/sourcepoint_unified_cmp_flutter_inappwebview_extension.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SourcepointUnifiedCMPBuilderExample(),
    );
  }
}

class SourcepointUnifiedCMPBuilderExample extends StatefulWidget {
  const SourcepointUnifiedCMPBuilderExample({super.key});

  @override
  State<SourcepointUnifiedCMPBuilderExample> createState() => _SourcepointUnifiedCMPBuilderExampleState();
}

class _SourcepointUnifiedCMPBuilderExampleState extends State<SourcepointUnifiedCMPBuilderExample> {
  late final SourcepointController _controller;
  late final InAppWebViewController _webViewController;

  @override
  void initState() {
    super.initState();

    final config = SPConfig(
      accountId: 22,
      propertyId: 31007,
      propertyName: 'sdks-auth-consent-test-page',
      pmId: '122058',
      campaigns: [CampaignType.gdpr],
    );

    _controller = SourcepointController(config: config)
      ..setEventDelegate(
        SourcepointEventDelegate(
          onConsentReady: (SPConsent consent) {
            debugPrint('DELEGATE onConsentReady: Consent string: ${consent.gdpr?.euconsent}');
          },
          onSpFinished: (SPConsent consent) {
            debugPrint('DELEGATE SpFinished: Consent string: ${consent.gdpr?.euconsent}');
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('webview sample'),
      ),
      body: Center(
        child: SourcepointUnifiedCMPBuilder(
          controller: _controller,
          builder: (BuildContext context, AsyncSnapshot<SPConsent> snapshot) {
            List<Widget> children;
            if (snapshot.hasData) {
              final consent = snapshot.data!;
              debugPrint('user consent has been loaded:');
              debugPrint('   grants: ${consent.gdpr?.grants}');
              debugPrint('euconsent: ${consent.gdpr?.euconsent}');
              return InAppWebView(
                initialUrlRequest: URLRequest(
                  url: WebUri(
                    'https://sourcepointusa.github.io/sdks-auth-consent-test-page/?_sp_version=4.9.0&_sp_pass_consent=true',
                  ),
                ),
                onWebViewCreated: (controller) {
                  _webViewController = controller;
                },
                onLoadStop: (controller, url) async {
                  await _webViewController.preloadConsent(consent: consent);
                },
              );
            } else if (snapshot.hasError) {
              children = <Widget>[
                const Icon(
                  Icons.error_outline,
                  color: Colors.red,
                  size: 60,
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 16),
                  child: Text('Error: ${snapshot.error}'),
                ),
              ];
            } else {
              children = const <Widget>[
                SizedBox(
                  width: 60,
                  height: 60,
                  child: CircularProgressIndicator(),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 16),
                  child: Text('Awaiting consent...'),
                ),
              ];
            }
            return SingleChildScrollView(
              child: Column(
                children: children,
              ),
            );
          },
        ),
      ),
    );
  }
}

关键部分

  1. 导入必要的包：

    import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:sourcepoint_unified_cmp/sourcepoint_unified_cmp.dart';
import 'package:sourcepoint_unified_cmp_flutter_inappwebview_extension/sourcepoint_unified_cmp_flutter_inappwebview_extension.dart';

  2. 初始化并配置Sourcepoint控制器：

    final config = SPConfig(
  accountId: 22,
  propertyId: 31007,
  propertyName: 'sdks-auth-consent-test-page',
  pmId: '122058',
  campaigns: [CampaignType.gdpr],
);

_controller = SourcepointController(config: config)
  ..setEventDelegate(
    SourcepointEventDelegate(
      onConsentReady: (SPConsent consent) {
        debugPrint('DELEGATE onConsentReady: Consent string: ${consent.gdpr?.euconsent}');
      },
      onSpFinished: (SPConsent consent) {
        debugPrint('DELEGATE SpFinished: Consent string: ${consent.gdpr?.euconsent}');
      },
    ),
  );

  3. 在WebView加载完成后注入同意信息：

    return InAppWebView(
  initialUrlRequest: URLRequest(
    url: WebUri(
      'https://sourcepointusa.github.io/sdks-auth-consent-test-page/?_sp_version=4.9.0&_sp_pass_consent=true',
    ),
  ),
  onWebViewCreated: (controller) {
    _webViewController = controller;
  },
  onLoadStop: (controller, url) async {
    await _webViewController.preloadConsent(consent: consent!);
  },
);

更多关于Flutter广告展示与内嵌WebView扩展插件sourcepoint_unified_cmp_flutter_inappwebview_extension的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter广告展示与内嵌WebView扩展插件sourcepoint_unified_cmp_flutter_inappwebview_extension的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中集成广告展示和内嵌WebView扩展插件，特别是使用sourcepoint_unified_cmp_flutter和inappwebview_extension时，可以通过以下步骤和代码示例来实现。以下代码案例展示了如何初始化这些插件并进行基本的操作。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  sourcepoint_unified_cmp_flutter: ^最新版本号
  flutter_inappwebview: ^最新版本号

确保替换最新版本号为当前可用的最新版本。

2. 初始化插件

在main.dart文件中，初始化这些插件。以下是一个基本的初始化示例：

import 'package:flutter/material.dart';
import 'package:sourcepoint_unified_cmp_flutter/sourcepoint_unified_cmp_flutter.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('广告展示与内嵌WebView'),
        ),
        body: WebViewExample(),
      ),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late InAppWebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    // 初始化Sourcepoint CMP
    SourcepointUnifiedCmpFlutter.initialize(
      cmpId: 'your-cmp-id', // 替换为你的CMP ID
      onUserAction: (action) {
        print('User action: $action');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              initialUrlRequest: URLRequest(url: Uri.parse('https://www.example.com')),
              onWebViewCreated: (controller) {
                _webViewController = controller;
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              // 示例：显示广告（具体实现依赖于广告平台的SDK）
              // 这里仅作为按钮点击示例
              print('显示广告按钮被点击');
              // 假设广告加载和展示逻辑在这里实现
            },
            child: Text('显示广告'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _webViewController.dispose();
  }
}

3. 处理广告展示

广告展示通常依赖于特定的广告平台SDK，这里假设你有一个广告平台SDK的集成方式。在实际应用中，你需要在按钮点击或其他触发事件时调用广告平台的方法。

4. Sourcepoint CMP的使用

Sourcepoint CMP用于处理用户同意和隐私设置。在上面的代码中，我们已经初始化了CMP，并监听了用户操作。具体使用CMP的功能（如获取用户同意状态、更新用户偏好等）需要参考Sourcepoint的官方文档。

5. WebView扩展功能

flutter_inappwebview插件提供了丰富的WebView功能，包括JavaScript交互、文件上传、下载等。你可以根据需要在_WebViewExampleState类中扩展这些功能。

注意

  • 上述代码仅为示例，具体实现需要根据你的广告平台SDK和Sourcepoint CMP的集成文档进行调整。
  • 确保遵循广告平台和Sourcepoint的隐私政策和指导原则。
  • 处理用户数据和隐私时要格外小心，确保符合相关法律法规。

通过上述步骤和代码示例，你可以在Flutter应用中集成广告展示和内嵌WebView扩展插件。

回到顶部