Información general

Real User Monitoring te permite monitorizar vistas web y eliminar puntos ciegos en tus aplicaciones móviles híbridas.

Puedes hacer lo siguiente:

  • Rastrear los recorridos de los usuarios en todos los componentes web y nativos en aplicaciones móviles.
  • Determinar la causa de la latencia de las páginas web o los componentes nativos de las aplicaciones móviles.
  • Prestar asistencia a los usuarios que tienen dificultades para cargar páginas web en dispositivos móviles

También puedes grabar todo el recorrido del usuario en vistas web y nativas en iOS o Android y verlo en una única Repetición de sesión. Más información en Instrumentar vistas consolidadas del navegador y web móviles.

Configuración

Requisitos previos

Configura el SDK de RUM Browser en la página web que desees que se represente en tu aplicación móvil. Para obtener más información, consulta Monitorización de RUM Browser.

Declarar DatadogWebViewTracking como dependencia (solo iOS)

Para activar el informe de bloqueos, asegúrate de activar también RUM o Logs. A continuación, añade el paquete según tu administrador de dependencias y actualiza tu fragmento de inicialización.

Puedes utilizar CocoaPods para instalar dd-sdk-ios:

pod 'DatadogWebViewTracking'

Para integrar con Swift Package Manager de Apple, añade lo siguiente como una dependencia a tu Package.swift:

.package(url: "https://github.com/Datadog/dd-sdk-ios.git", .upToNextMajor(from: "2.0.0"))

En tu proyecto, vincula las siguientes bibliotecas:

DatadogCore
DatadogWebViewTracking

Puedes utilizar Carthage para instalar dd-sdk-ios:

github "DataDog/dd-sdk-ios"

En Xcode, vincula los siguientes marcos:

DatadogWebViewTracking.xcframework

Instrumentar tus vistas web

  1. Si deseas reenviar eventos de RUM desde páginas web, descarga la última versión del SDK de RUM Android y configura la función RUM siguiendo la guía dedicada.

  2. Si deseas reenviar eventos de logs desde páginas web, descarga la última versión de SDK de logs Android y configura la función logs siguiendo la guía dedicada.

  3. Añade la dependencia de Gradle declarando la biblioteca dd-sdk-android-webview como dependencia en el archivo build.gradle a nivel del módulo:

    dependencies {
        implementation "com.datadoghq:dd-sdk-android-webview:x.x.x"
    }
    
  4. Activa el reastreo de las vistas web con el siguiente fragmento de código:

      WebViewTracking.enable(webView, allowedHosts)
    

allowedHosts coincide con los hosts determinados y su subdominio. No se permite ninguna expresión regular.

El SDK de RUM iOS proporciona API para controlar el rastreo de vistas web. Para activar el rastreo de vistas web, proporciona la instancia WKWebView.

importar WebKit
importar DatadogWebViewTracking

supongamos que webView = WKWebView(...)
WebViewTracking.enable(webView: webView, hosts: ["example.com"])

Para desactivar el rastreo de vistas web:

WebViewTracking.disable(webView: webView)

allowedHosts coincide con los hosts determinados y su subdominio. No se permite ninguna expresión regular.

El SDK de RUM Flutter proporciona API para que puedas controlar el rastreo de vistas web cuando se utiliza el paquete webview_flutter. Para añadir el rastreo de vistas web, llama al método de extensión trackDatadogEvents en WebViewController, proporcionando el lista de hosts permitidos.

Añade lo siguiente a tu pubspec.yaml con la versión más reciente del complemento datadog_webview_tracking:

dependencias:
  datadog_webview_tracking: ^x.x.x

Por ejemplo:

importar 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';

webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..trackDatadogEvents(
    DatadogSdk.instance,
    ['myapp.example'],
  )
  ..loadRequest(Uri.parse('myapp.example'));

Ten en cuenta que JavaScriptMode.unrestricted es necesario para que el rastreo funcione en Android. allowedHosts coincide con los hosts determinados y su subdominio. No se permite ninguna expresión regular.

  1. Añade react-native-webview a tu aplicación siguiendo la documentación oficial de instalación.

  2. Importa WebView desde @datadog/mobile-react-native-webview en lugar de react-native-webview:

    import { WebView } from '@datadog/mobile-react-native-webview';
    // or
    import WebView from '@datadog/mobile-react-native-webview';
    
  3. Puedes utilizar todas las funcionalidades existentes de react-native-webview, ya que el componente WebView de @datadog/mobile-react-native-webview encapsula el componente react-native-webview.

  4. Proporciona la lista de hosts que Datadog va a rastrear en la vista web utilizando el prop allowedHosts de tu componente WebView:

    <WebView
        source={{ uri: 'https://www.example.com' }}
        allowedHosts={['example.com']}
    />
    

allowedHosts coincide con los hosts determinados y su subdominio. No se permite ninguna expresión regular.

Accede a tus vistas web

Tus vistas web aparecen en RUM Explorer con los atributos service y source asociados. El atributo service indica el componente web desde el que se genera la vista web y el atributo source indica la plataforma de la aplicación móvil, como Android.

Filtra en tus aplicaciones Android y Android TV y haz clic en una sesión. Aparece un panel lateral con una lista de eventos en la sesión.

Eventos de vistas web capturados en una sesión en el RUM Explorer

Haz clic en Abrir la cascada vistas para ir de la sesión a una visualización de cascada de recursos en la pestaña de Rendimiento de la vista.

Implicaciones de facturación

Consulta Facturación de RUM & Session Replay para más detalles sobre cómo afectan las vistas web en aplicaciones móviles a las grabaciones de las sesiones y a la facturación.

Referencias adicionales