Flutter广告管理插件sourcepoint_unified_cmp_flutter_webview_extension的使用

Flutter广告管理插件sourcepoint_unified_cmp_flutter_webview_extension的使用

本插件用于将Sourcepoint统一CMP集成到flutter_webview_plugin中。此包提供了一个扩展方法preloadConsent()给WebViewController，以便在WebView中注入从Flutter端获取的同意信息。

贡献项目

请参阅贡献指南以了解详细信息。

示例用法

为了使用此扩展，请确保在项目中实现sourcepoint_unified_cmp。有关更多信息，请参阅sourcepoint_unified_cmp包。

示例代码

为了运行示例，请查看示例应用，该示例应用可以通过以下命令运行（Android）：

melos run run:example:flutter_webview -- -d sdk

或（iOS）：

melos run run:example:flutter_webview -- -d IPhone

以下是实现的关键部分：

导入必要的包

import 'package:sourcepoint_unified_cmp/sourcepoint_unified_cmp.dart';
import 'package:sourcepoint_unified_cmp_flutter_webview_extension/sourcepoint_unified_cmp_flutter_webview_extension.dart';
import 'package:webview_flutter/webview_flutter.dart';

初始化并配置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}',
        );
      },
    ),
  );

加载网站并在页面加载完成后注入同意信息

_webViewController
  ..setNavigationDelegate(
    NavigationDelegate(
      onPageFinished: (String url) {
        _webViewController.preloadConsent(consent: consent!);
      },
    ),
  )
  ..loadRequest(
    Uri.parse(
      'https://sourcepointusa.github.io/sdks-auth-consent-test-page/?_sp_version=4.9.0&_sp_pass_consent=true',
    ),
  );

return WebViewWidget(controller: _webViewController);

重要提示：网页需要实现Sourcepoint统一CMP脚本，并且必须使用?_sp_version=4.9.0&_sp_pass_consent=true来指示JS SDK监听外部同意信息。

结果

完整示例代码

import 'package:flutter/material.dart';
import 'package:sourcepoint_unified_cmp/sourcepoint_unified_cmp.dart';
import 'package:sourcepoint_unified_cmp_flutter_webview_extension/sourcepoint_unified_cmp_flutter_webview_extension.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

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

  [@override](/user/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](/user/override)
  State<SourcepointUnifiedCMPBuilderExample> createState() => _SourcepointUnifiedCMPBuilderExampleState();
}

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

  [@override](/user/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}',
            );
          },
        ),
      );

    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white);
  }

  [@override](/user/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('用户同意信息已加载：');
              debugPrint('   授权：${consent?.gdpr?.grants}');
              debugPrint('EU同意信息：${consent?.gdpr?.euconsent}');
              _webViewController
                ..setNavigationDelegate(
                  NavigationDelegate(
                    onPageFinished: (String url) {
                      _webViewController.preloadConsent(consent: consent!);
                    },
                  ),
                )
                ..loadRequest(
                  Uri.parse(
                    'https://sourcepointusa.github.io/sdks-auth-consent-test-page/?_sp_version=4.9.0&_sp_pass_consent=true',
                  ),
                );
              return WebViewWidget(controller: _webViewController);
            } else if (snapshot.hasError) {
              children = [
                const Icon(
                  Icons.error_outline,
                  color: Colors.red,
                  size: 60,
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 16),
                  child: Text('错误：${snapshot.error}'),
                ),
              ];
            } else {
              children = const [
                SizedBox(
                  width: 60,
                  height: 60,
                  child: CircularProgressIndicator(),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 16),
                  child: Text('等待同意...'),
                ),
              ];
            }
            return SingleChildScrollView(
              child: Column(
                children: children,
              ),
            );
          },
        ),
      ),
    );
  }
}