Setup (compose based)

How to start

1. Add the CUX package repository URL to your root settings.gradle.kts at the end of repositories:

   repositories {
       ...
       maven(url = "https://packagecloud.io/cux/public-compose-gradle/maven2")
   }

2. Add the following to your module build.gradle.kts file:

   dependencies {
       implementation("io.cux:analytics-compose-sdk:0.0.15")
       …
   }
       

3. Add Internet permission in your AndroidManifest.xml file

   <uses-permission android:name="android.permission.INTERNET" />

4. Use your token in onCreate method of Application

   import android.app.Application
   import io.cux.analytics_sdk.CuxAnalytics
   
   class ShopApplication: Application() {
       override fun onCreate() {
           super.onCreate()
           CuxAnalytics.init(this, "{your_token}")
       }
   }
       

5. You are almost ready to monitor your Application!

Troubleshooting

1. If your application doesn't accept our SSL certificates, you can force acceptance at initial stage

   import android.app.Application
   import io.cux.analytics_sdk.CuxAnalytics
   import io.cux.analytics_sdk.DEFAULT_INIT_OPTIONS
   
   class ShopApplication: Application() {
       override fun onCreate() {
           super.onCreate()
           CuxAnalytics.init(this, "{your_token}", initOptions = DEFAULT_INIT_OPTIONS)
       }
   }
       

Sending navigation details

1. Apply monitor() function to every of yours androidx.navigation.NavHostController

   val rememberNavController = rememberNavController().apply { monitor() }

Sending clickable elements details

1. Jetpack Composable library doesn’t allow to detect automatically coordinates of recomposition area of composable functions. That’s why for applications using Jetpack Compose we can intercept screen touches but without information which function area was touched. If you want to detect some touches of screen on areas of some specific composable functions then you should call monitorElement function in the modifier of the composable function, monitorTag parameter is optional:

       @Composable
   fun DemoScreen() {
       Button(
           onClick = {
               // do some job 
           },
           modifier = Modifier
               .fillMaxWidth()
               .padding(16.dp)
               // monitorTag is optional
               .monitorElement(monitorTag = "example_tag")
       ) {
           Text("Very important button")
       }
   }
       

Masking sensitive data

1. For masking compose function you should call masking function in the modifier of the composable function: 

   @Composable
   fun DemoScreen() {
       Text(
           "Very secure information",
           modifier = Modifier
               .fillMaxWidth()
               .padding(16.dp)
               .maskElement()
       )
   }

Good to know:

1. To avoid code duplication in the cases when you need at the same time mask element and monitor touches on it you can do with a single function (monitorTag parameter is optional):

     @Composable
   fun DemoScreen() {
       Button(
           onClick = {
               // do some job
           },
           modifier = Modifier
               .fillMaxWidth()
               .padding(16.dp)
               // monitorTag is optional
               .maskAndMonitorElement(monitorTag = "example_tag")
       ) {
           Text("Very important button")
       }
   }