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
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.
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.
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"
}
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.
Añade react-native-webview
a tu aplicación siguiendo la documentación oficial de instalación.
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';
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
.
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.
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
Más enlaces, artículos y documentación útiles: