Mobile Carousel Android

Configuration on Mobile Data Campaign

Name	Detail	Example
RecItemTitle	Title	Recommend Items
RecItemTitleAlign	Title Align	center (pick either left or center or right)
RecItemTitleFontColor	Title Color	#333333 (HEX, RGBA ,etc)
RecItemTitleFontSize	Title Font Size	30px
RecItems	Recommend Items	${items}

※ Set these properties of Mobile Data Campaign

Installation Step

1. Set Mobile Data Campaign with the documentation
2. Open the file downloaded on the top page
3. Place carousel.html from mobile > popup > android to the local directory
4. Add the code below to layout xml file from res > layout

<WebView
   android:id="@+id/webview"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:layout_constraintHorizontal_bias="0.5"
/>

5. Create RecommendItem file in model directory

class RecommendItem(
    val id: String,
    val name: String,
    val imageUrl: String,
    val price: Double,
): Serializable

1. Add the code below inside onStart method of Activity Class

@Override
handlerRecommendItem = CampaignHandler { campaign ->
    if (!campaign.isControlGroup) {
        val recitems = campaign.data.getJSONArray("RecItems")
        val titleText = campaign.data["RecItemTitle"]
        val titleSize = campaign.data["RecItemTitleFontSize"]
        val titleColor = campaign.data["RecItemTitleFontColor"]
        val titleAlign = campaign.data["RecItemTitleAlign"]

        val campaignItem = CampaignItem(
            titleText as String,
            titleSize as String,
            titleColor as String,
            titleAlign as String,
        )

        recommendItemArray.add( Gson().toJson(campaignItem) )

        for (i in 0 until recitems.length()) {
            val id = recitems.getJSONObject(i)["_id"]
            val name = recitems.getJSONObject(i)["name"]
            val imageUrl = recitems.getJSONObject(i)["imageUrl"]
            val price = recitems.getJSONObject(i)["price"]

            val recItem = RecommendItem(
                id as String,
                name as String,
                imageUrl as String,
                price as Double,
            )

            recommendItemArray.add( Gson().toJson(recItem) )
        }

        val carouselWebView = findViewById<View>(R.id.webview_top) as WebView
        carouselWebView.webChromeClient = WebChromeClient()
        carouselWebView.settings.javaScriptEnabled = true

        carouselWebView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
                Log.d("CLICK", request.url.toString())
                // Handle URL clicked inside the webview
                return true
            }

            override fun onPageFinished(view: WebView, urlString: String) {
                // Pass the data of Mobile Data Campaign to webview
                Log.i("campaign", campaign.getData().toString())
                carouselWebView.loadUrl("javascript:loadVariables($recommendItemArray)")
            }
        }
        carouselWebView.loadUrl("file:///android_asset/carousel.html")
    }
}

// Here it sets "App Foreground" to trigger Mobile Data Campaign
screen.trackAction("App Foreground")
screen.setCampaignHandler(this.handlerPopup, "the value you set as Target")