Flutter应用内网页视图跟踪插件datadog_inappwebview_tracking的使用

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

Flutter应用内网页视图跟踪插件datadog_inappwebview_tracking的使用

Overview

此包是datadog_flutter_plugin扩展。它允许Real User Monitoring（RUM监控由flutter_inappwebview包创建的网页视图，从而消除您的混合Flutter应用程序中的盲点。

Warning

此插件目前不支持Flutter Web。

Instrumenting your web views

Rum Flutter SDK 提供了API来控制在使用flutter_inappwebview包时的网页视图跟踪。

添加datadog_inappwebview_tracking和flutter_inappwebview两个包到您的pubspec.yaml文件中：

dependencies:
  flutter_inappwebview: ^6.1.5
  datadog_flutter_plugin: ^2.8.0
  datadog_inappwebview_tracking: ^1.0.0

InAppWebView

要对InAppWebView进行仪表化，请将DatadogInAppWebViewUserScript添加到initialUserScripts中，并在onWebViewCreated回调期间调用trackDatadogEvents扩展方法：

InAppWebView(
  // 其他设置...
  initialUserScripts: UnmodifiableListView([
    DatadogInAppWebViewUserScript(
      datadog: DatadogSdk.instance,
      allowedHosts: {'shopist.io'},
    ),
  ]),
  onWebViewCreated: (controller) async {
    controller.trackDatadogEvents(DatadogSdk.instance);
  },
)

InAppBrowser

对于InAppBrowser，由于Android 33+存在一个bug（参见此处，该bug将在依赖于flutter_inappwebview 6.2.0的插件版本中修复。在此期间，您需要手动处理InAppBrowser的跟踪。

要对InAppBrowser进行仪表化，请覆盖onBrowserCreated并调用trackDatadogEvents扩展方法在webViewController上，然后在创建自定义InAppBrowser时添加一个DatadogInAppWebViewUserScript到initialUserScripts中：

class MyInAppBrowser extends InAppBrowser {
  MyInAppBrowser({super.windowId, super.initialUserScripts});

  @override
  void onBrowserCreated() {
    webViewController?.trackDatadogEvents(DatadogSdk.instance);
    super.onBrowserCreated();
  }
}

// 浏览器创建
_browser = MyInAppBrowser(
  initialUserScripts: UnmodifiableListView(
    [
      DatadogInAppWebViewUserScript(
        datadog: DatadogSdk.instance,
        allowedHosts: {'shopist.io'},
      ),
    ],
  ),
);

示例代码

示例代码如下：

// 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 2024-Present Datadog, Inc.

import 'dart:io';

import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
import 'package:datadog_inappwebview_tracking_example/app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.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,
  );
  // 这个只用于迭代测试，因为模拟服务器不支持HTTPS
  if (customEndpoint != null) {
    configuration.additionalConfig['_dd.needsClearTextHttp'] = true;
  }

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

更多关于Flutter应用内网页视图跟踪插件datadog_inappwebview_tracking的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter应用内网页视图跟踪插件datadog_inappwebview_tracking的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用datadog_inappwebview_tracking插件来跟踪应用内网页视图的示例代码。这个插件结合了flutter_inappwebview和Datadog的SDK，以便实现对网页视图的跟踪。

首先，确保你的Flutter项目已经配置好flutter_inappwebview和datadog_flutter_plugin依赖。你需要在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.3.2  # 请根据最新版本进行调整
  datadog_flutter_plugin: ^0.6.0  # 请根据最新版本进行调整
  datadog_inappwebview_tracking: ^0.1.0  # 假设存在这样的包，版本号请根据实际情况调整

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

接下来，在你的Flutter应用中配置和使用这些插件。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
import 'package:datadog_inappwebview_tracking/datadog_inappwebview_tracking.dart';

void main() {
  // 初始化Datadog SDK
  DatadogFlutterPlugin.initialize(
    configuration: DatadogConfiguration(
      clientToken: 'YOUR_DATADOG_CLIENT_TOKEN', // 替换为你的Datadog客户端令牌
      environment: 'production', // 或 'staging', 'development' 等
      service: 'your_service_name', // 替换为你的服务名称
      version: '1.0.0', // 你的应用版本
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter InAppWebView Tracking Example'),
        ),
        body: WebViewPage(),
      ),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebViewController? _webViewController;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: InAppWebView(
            initialUrl: "https://www.example.com",
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                debuggingEnabled: true,
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              _webViewController = controller;
              // 设置Datadog跟踪
              controller.addJavascriptInterface(
                name: 'DatadogInterface',
                class: DatadogInAppWebViewTracking(
                  controller: controller,
                  datadog: DatadogFlutterPlugin.instance,
                ),
              );
            },
            onLoadStart: (InAppWebViewController controller, String url) {
              print("Started loading URL: $url");
            },
            onLoadStop: (InAppWebViewController controller, String url) async {
              print("Finished loading URL: $url");
              // 可以在这里添加额外的逻辑，比如发送页面视图事件到Datadog
            },
          ),
        ),
      ],
    );
  }

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

注意事项：

  1. Datadog Client Token：确保你已经替换了YOUR_DATADOG_CLIENT_TOKEN为你的实际Datadog客户端令牌。
  2. 依赖版本：上述代码中的版本号（如^5.3.2和^0.6.0）可能需要根据实际发布的最新版本进行调整。
  3. JavaScript接口：DatadogInAppWebViewTracking类是一个假设的类，用于演示如何添加JavaScript接口。实际使用时，你可能需要根据datadog_inappwebview_tracking插件的文档进行具体实现。
  4. 权限：确保你的应用具有访问网络的权限，特别是在Android的AndroidManifest.xml和iOS的Info.plist中。

由于datadog_inappwebview_tracking插件可能是一个假设的包，具体实现细节可能会有所不同。建议查阅该插件的官方文档和示例代码以获取更准确的实现方式。

回到顶部