Setup (compose based)

Modified on Tue, 16 Jul at 3:16 PM

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.11")
        …
    }
        
  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")
        }
    }
      

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article