AndroidiOSPluginsAnnouncementsSupport Forum
SDK DocumentationRecipesAnnouncementsSupport Forum
AndroidiOSPluginsAnnouncementsSupport Forum
SDK Documentation

Advanced Options with Compose

Android Web - Advanced Options with Compose

Suggest Edits

📍

This page presumes that you are using Jetpack Compose.

✅

Sample App

While reading the documentation, take a look at our Sample App.

Working with HorizontalPager

When working with HorizontalPager, make sure to fetch Taboola content when the next page is visible to the user (not before).

  1. For each JS tag in the <body> of your web content, add lazyFetch: true:
<script type="text/javascript"> 
...
  
_taboola["mobile"].push({
    lazyFetch: true // If you are using HorizontalPager 
});
</script>
  1. Because you added a lazyFetch directive within the JS tag, you must fetch Taboola content via your Kotlin code:
@Composable
fun TaboolaPagerScreen() {
    val pagerState = rememberPagerState(pageCount = { 3 })
    val taboolaViewModel: TaboolaWebWrapperViewModel = viewModel()
    
    HorizontalPager(
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        when (page) {
            0 -> FirstPageContent()
            1 -> TaboolaWebScreen(placementInfo = placementInfo, viewModel = taboolaViewModel)
            2 -> ThirdPageContent()
        }
    }
    
    // Handle lazy loading for Taboola page
    LaunchedEffect(pagerState.currentPage) {
        if (pagerState.currentPage == 1) { // Taboola page index
            taboolaViewModel.fetchContent()
        }
    }
}

🚧

HorizontalPager

If you prefetch more than 1 page using HorizontalPager:

  1. Fetch Taboola content when the next page is visible to the user - i.e. when pagerState.currentPage changes.
  2. If the page change is triggered more than once, make sure to fetch content once only.

Dark Mode

🚧

Dark mode is not supported by default. For dark-mode placements, contact your Taboola Account Manager.

Once Taboola has configured your dark-mode placements, you can use the following code in your ViewModel:

// In your ViewModel
fun enableDarkMode() {
    val extraProperties = hashMapOf("darkMode" to "true")
    tblWebUnit?.setUnitExtraProperties(extraProperties)
}

Or directly in your Composable:

@Composable
fun TaboolaWebScreen(
    placementInfo: PlacementInfo,
    isDarkMode: Boolean = false,
    viewModel: TaboolaWebWrapperViewModel = viewModel()
) {
    // ... existing code ...
    
    LaunchedEffect(isDarkMode) {
        viewModel.setDarkMode(isDarkMode)
    }
    
    // ... rest of implementation ...
}

Opening Audience Exchange (AE) Items in App

If your widget or feed feature AE items, and you wish to open these items within the app instead of an external web view, please see the following steps below.

1: Add the extra property allowAudienceExchangeClickOverride to Taboola's global properties:

val extraProperties = hashMapOf("allowAudienceExchangeClickOverride" to "true")
Taboola.setGlobalExtraProperties(extraProperties)

2: Override the onItemClick Listener to implement your desired behavior:

val tblWebUnit = tblWebPage.build(context, placementName, mode, placementType, object : TBLWebListener() {
    
    override fun onItemClick(
        placementName: String,
        itemId: String,
        clickUrl: String,
        isOrganic: Boolean,
        customData: String?
    ): Boolean {
        return try {
            val data = JSONObject(customData ?: "")
            if (data.has("isAudienceExchange") && data.optBoolean("isAudienceExchange", false)) {
                // Handle Audience Exchange items
                false
            } else {
                true
            }
        } catch (exception: Exception) {
            exception.printStackTrace()
            true
        }
    }
})

Updated 4 days ago