Jetpack Compose Screen Tagging
UXCam's Automatic Screen Name Tagging is not supported out-of-the-box in Jetpack Compose. Unlike traditional Android views, Composables are functional components that lack lifecycle callbacks (like onStart()
), which the automatic tagging relies on. However, you can manually tag screens by integrating with Compose's navigation and state management.
Sincenavigation-compose
is the officially recommended library for handling navigation in Compose, the following examples are based on its implementation.
The simplest approach is to tag the screen from your highest-level Composable where the NavHostController
is created. This logic should be applied to everynavController
in your app where you want screen tagging to occur. The recommended method is to create a listener that observes the navigation controller's back stack for changes.
The approach is to listen to LaunchedEffect
on the current route from navController
.
Example: Screen Tagging with a Navigation Listener
Example Jetpack Compose Navigation listener:
@Composable
fun AppNavHost(navController: NavHostController) {
LaunchedEffect(navController) {
navController.currentBackStackEntryFlow.collect { entry ->
when (entry.destination.route) {
"home" -> UXCam.tagScreenName("Home")
"product/{id}" -> UXCam.tagScreenName("ProductDetail")
"settings" -> UXCam.tagScreenName("Settings")
}
}
}
NavHost(navController, startDestination = "home") { /* … */ }
}
Pros
- Accurate timing – emits exactly when the destination changes; no duplicate tags from recomposition.
- Clean analytics – parameterised routes collapse into one logical screen name, keeping UXCam dashboards uncluttered.
- Low overhead – one long-lived coroutine instead of restarting a LaunchedEffect for every navigation.
- Centralised logic – keeps navigation-side effects beside the NavHost, easier to maintain and test.
Potential Cons
- Loss of per-item detail – All
product/{id}
pages look identical in analytics. If you need product-level metrics, you will need to track them with a separate custom event. - Multiple NavHosts – if your app has several controllers (e.g., bottom-nav, modal graph) you must duplicate or abstract this collector for each one.
- Manual mapping – you maintain the when block; missing a route means missed analytics until it’s added.
The takeaway: Placing UXCam.tagScreenName()
inside thecurrentBackStackEntryFlow
collector gives you precise, de-duplicated screen events with clean names, but it comes at the cost of losing per-argument granularity and requires some manual mapping.
Updated 18 days ago