Información general

Jetpack Compose es un kit de herramientas para crear interfaces de usuario nativas en Android. Si tu aplicación utiliza Jetpack Compose, puedes instrumentarla manual o automáticamente con el complemento de Gradle de Datadog. Esto permite una Real User Monitoring (RUM) similar a la que está disponible para las vistas clásicas de Android.

Tras la configuración inicial, puedes seleccionar entre la instrumentación automática y manual.

Configuración

Step (UI) / paso (generic) 1 - Declarar “dd-sdk-android-compose” como dependencia

Añade dd-sdk-android-compose como dependencia a cada módulo que desees instrumentar. Esto incluye el módulo de aplicación, cualquier módulo de interfaz de usuario de Jetpack Compose o módulos de funciones que utilicen Jetpack Compose. La versión mínima de dd-sdk-android-compose para la instrumentación de Jetpack Compose es 2.21.0.

dependencies {
    implementation "com.datadoghq:dd-sdk-android-compose:x.x.x"
    //(...)
}

dependencies {
    implementation("com.datadoghq:dd-sdk-android-compose:x.x.x")
    //(...)
}

Step (UI) / paso (generic) 2 - Activa la opción de seguimiento de acciones en RumConfiguration

Después de añadir la dependencia, activa el seguimiento de acciones de Compose en tu RumConfiguration. Este step (UI) / paso (generic) es necesario independientemente del modo de instrumentación.

val rumConfig = RumConfiguration.Builder(applicationId)
      //other configurations that you have already set
      .enableComposeActionTracking()
      .build()
Rum.enable(rumConfig)

RumConfiguration rumConfig = new RumConfiguration.Builder(applicationId)
      //other configurations that you have already set
      .enableComposeActionTracking()
      .build();
Rum.enable(rumConfig);

Instrumentación automática

Para una cobertura completa de RUM con una configuración mínima, puedes instrumentar automáticamente tu aplicación de Jetpack Compose.

Como se describe en el step (UI) / paso (generic) 1 de la sección de configuración de Android, declara el complemento de Gradle de Datadog en tu script de compilación y aplícalo a cada módulo que desees instrumentar.

Step (UI) / paso (generic) 1 - Declara el complemento de Gradle de Datadog en tu buildscript

La versión mínima del complemento de Gradle de Datadogpara la instrumentación de Jetpack Compose es 1.17.0.

buildscript {
    dependencies {
        classpath "com.datadoghq:dd-sdk-android-gradle-plugin:x.x.x"
    }
}

plugins {
    id 'com.datadoghq.dd-sdk-android-gradle-plugin'
    //(...)
}

buildscript {
    dependencies {
        classpath("com.datadoghq:dd-sdk-android-gradle-plugin:x.x.x")
    }
}

plugins {
    id("com.datadoghq.dd-sdk-android-gradle-plugin")
    //(...)
}

Configuración 2 - Seleccionar el modo de instrumentación

En la configuración de Gradle de tu módulo, define el modo deseado de instrumentación de Compose:

datadog {
    // Other configurations that you may set before.
    //(...)

    // Jetpack Compose instrumentation mode option.
    composeInstrumentation = "AUTO"
}

datadog {
  // Other configurations that you may set before.
  //(...)

  // Jetpack Compose instrumentation mode option.
  composeInstrumentation = InstrumentationMode.AUTO
}

Modos de instrumentación disponibles:

Nota: Si no declaras composeInstrumentation en el bloque datadog, la instrumentación automática se desactiva en forma predeterminada.

Cómo se asignan los nombres con la instrumentación automática

Cuando la instrumentación automática está activada:

• La Compose navigation route (ruta de navegación de Compose) se utiliza como el view name (nombre de la vista).
• El name of the direct composable function (nombre de la función que admite composición directa) que ajusta un elemento interactivo se utiliza como el action target (destino de acción).

@Composable
fun AppScaffold(){
    NavHost(navController = rememberNavController(), startDestination = "Home Screen"){
      composable("Home Screen"){
        HomeScreen()
      }
    }
}

@Composable
fun CustomButton(onClick: () -> Unit) {
    Button(onClick = onClick){
       Text("Welcome Button")
    }
}

En el ejemplo anterior:

• “Pantalla de inicio” se utiliza como nombre de la vista cuando se carga HomeScreen().
• “CustomButton” se utiliza como destino de acción cuando se hace clic en el botón.

Instrumentación manual

Si necesitas más personalización o control sobre el seguimiento de acciones y vistas, puedes instrumentar manualmente tus aplicaciones.

Seguimiento de las acciones

Para realizar un seguimiento de las interacciones del usuario con componentes específicos de Jetpack Compose, aplica el modificador datadog. El argumento name define el nombre de la vista que se muestra en la lista de eventos de RUM.

@Composable
fun HomeScreen(){
 Column{
     Image(modifier = Modifier.datadog(name = "Welcome Image").clickable{
       // Action can be tracked if this image is clickable
     },
      // Other arguments
     )

     Text(modifier = Modifier.datadog(name = "Welcome Text").clickable{
       // Action can be tracked if this text is clickable
     },
      // Other arguments
     )
 }
}

En el ejemplo anterior, los nombres personalizados se utilizan para los elementos interactivos en el seguimiento de las acciones de Rum.

Seguimiento de visitas

Para activar el seguimiento de vistas de RUM basado en la navegación de Jetpack Compose, llama a la API NavigationViewTrackingEffect y pasa la dirección NavHostController de tu aplicación.

@Composable
fun AppScaffold(){
    val navController = rememberNavController()
    NavigationViewTrackingEffect(
        navController = navController,
        trackArguments = true,
        destinationPredicate = AcceptAllNavDestinations()
    )
    NavHost(navController = navController,
        // other arguments
    ) {
       // (...)
    }
}

Referencias adicionales

Más enlaces, artículos y documentación útiles: