Flutter WebView数据追踪插件datadog_webview_tracking的使用

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

Flutter WebView数据追踪插件datadog_webview_tracking的使用

概述

此包是 <code>datadog_flutter_plugin</code> 的扩展。它允许实时用户监控来跟踪 web 视图，并消除混合 Flutter 应用程序中的盲点。

为您的 web 视图添加跟踪

RUM Flutter SDK 提供了 API，当使用 <code>webview_flutter</code> 包时，可以控制 web 视图的跟踪。

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  webview_flutter: ^4.0.4
  datadog_flutter_plugin: ^1.3.0
  datadog_webview_tracking: ^1.0.0

要添加 Web 视图跟踪，可以在 <code>WebViewController</code> 上调用 <code>trackDatadogEvents</code> 扩展方法，并提供允许的主机列表。

例如：

import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
import 'package:datadog_webview_tracking/datadog_webview_tracking.dart';

webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted) // 在 Android 上启用 JavaScript 是必需的
  ..trackDatadogEvents(
    DatadogSdk.instance,
    ['myapp.example'], // 允许的主机列表
  )
  ..loadRequest(Uri.parse('https://myapp.example')); // 加载请求

注意，JavaScriptMode.unrestricted 在 Android 上是必需的，以使跟踪正常工作。

完整示例代码

以下是一个完整的示例代码，展示了如何设置和使用 datadog_webview_tracking 插件。

// Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
// This product includes software developed at Datadog (https://www.datadoghq.com/).
// Copyright 2023-Present Datadog, Inc.

import 'dart:async';
import 'dart:io';

import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

import 'app.dart';

String? customEndpoint;

Future<void> main() async {
  await dotenv.load(mergeWith: Platform.environment);

  var clientToken = dotenv.get('DD_CLIENT_TOKEN', fallback: '');
  var applicationId = dotenv.maybeGet('DD_APPLICATION_ID');
  customEndpoint ??= dotenv.maybeGet('DD_CUSTOM_ENDPOINT');

  DatadogSdk.instance.sdkVerbosity = CoreLoggerLevel.debug;

  final configuration = DatadogConfiguration(
    clientToken: clientToken,
    env: dotenv.get('DD_ENV', fallback: ''),
    site: DatadogSite.us1,
    uploadFrequency: UploadFrequency.frequent,
    batchSize: BatchSize.small,
    nativeCrashReportEnabled: true,
    firstPartyHosts: [],
    loggingConfiguration: DatadogLoggingConfiguration(
      customEndpoint: customEndpoint,
    ),
    rumConfiguration: applicationId != null
        ? DatadogRumConfiguration(
            detectLongTasks: false,
            applicationId: applicationId,
            traceSampleRate: 100,
            customEndpoint: customEndpoint,
          )
        : null,
  );
  // This is only needed for interation testing, as the mock server doesn't support https
  if (customEndpoint != null) {
    configuration.additionalConfig['_dd.needsClearTextHttp'] = true;
  }

  await DatadogSdk.runApp(configuration, TrackingConsent.granted, () async {
    runApp(const MyApp());
  });
}

在这个示例中，我们首先加载环境变量，然后初始化 DatadogSdk 并配置相关的参数。最后，通过 runApp 启动应用。


更多关于Flutter WebView数据追踪插件datadog_webview_tracking的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter WebView数据追踪插件datadog_webview_tracking的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想使用 datadog_webview_tracking 插件来追踪 WebView 中的数据，首先你需要确保已经正确安装并配置了该插件。以下是一个基本的代码示例，展示了如何在 Flutter 应用中使用 datadog_webview_tracking 来追踪 WebView 的数据。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  datadog_webview_tracking: ^最新版本号  # 请替换为实际发布的最新版本号

2. 导入包

在你的 Dart 文件中，导入 datadog_webview_tracking 包：

import 'package:datadog_webview_tracking/datadog_webview_tracking.dart';

3. 配置 Datadog

你需要在应用的初始化阶段配置 Datadog。通常，这可以在 main.dart 文件中完成。

import 'package:flutter/material.dart';
import 'package:datadog_flutter/datadog_flutter.dart';
import 'package:datadog_webview_tracking/datadog_webview_tracking.dart';

void main() {
  // 初始化 Datadog SDK
  DatadogSdk.initialize(
    appContext: 'your-application-context', // 替换为你的 Datadog 应用上下文
    env: 'prod', // 替换为你的环境，例如 'prod', 'staging', 'dev'
    clientToken: 'your-client-token', // 替换为你的 Datadog 客户端令牌
    androidConfig: AndroidConfig(
      // 可选的 Android 配置
    ),
    iosConfig: IosConfig(
      // 可选的 iOS 配置
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewTrackingExample(),
    );
  }
}

4. 使用 WebView 并启用追踪

接下来，在你的 WebView 页面中使用 DatadogWebView 来替代标准的 WebView，并启用追踪功能。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:datadog_webview_tracking/datadog_webview_tracking.dart';

class WebViewTrackingExample extends StatefulWidget {
  @override
  _WebViewTrackingExampleState createState() => _WebViewTrackingExampleState();
}

class _WebViewTrackingExampleState extends State<WebViewTrackingExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Tracking Example'),
      ),
      body: DatadogWebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        trackingConfiguration: TrackingConfiguration(
          enabled: true, // 启用追踪
          // 其他可选配置，如白名单、黑名单等
        ),
      ),
    );
  }
}

5. 运行应用

确保你的所有配置都正确无误，然后运行你的 Flutter 应用。现在，DatadogWebView 将自动追踪 WebView 中的数据，并将其发送到 Datadog。

注意事项

  • 确保你已经正确设置了 Datadog 的应用上下文和客户端令牌。
  • 根据需要调整 TrackingConfiguration 的其他选项，如 URL 白名单或黑名单。
  • 确保你的设备或模拟器可以访问你配置的 WebView URL。

这个示例提供了一个基本框架，展示了如何在 Flutter 应用中使用 datadog_webview_tracking 插件来追踪 WebView 中的数据。根据你的实际需求，你可能需要进一步自定义和扩展这个示例。

回到顶部