Mobile Carousel Android

発火条件

項目名	説明	例
RecItemTitle	タイトル文言	あなたにおすすめの商品
RecItemTitleAlign	タイトルの配置	center (left or center or right)
RecItemTitleFontColor	タイトル文言色	#333333 (CSSで指定できるカラーコード)
RecItemTitleFontSize	タイトル文言フォントサイズ	30px
RecItems	レコメンド商品	${items}

設定方法

1. ドキュメントを参考にMobile SDKを設定する
2. トップページ からダウンロードしたファイルを展開
3. mobile 下の carousel.html をローカルファイルとしてプロジェクトディレクトリに配置
4. res > layout内のxmlファイルに下記を設置

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

1. modelに下記を RecommendItem として設置

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

1. ActivityクラスのonStartメソッド内に下記を設置

@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())
                // WebView内でクリックされたリンクURLをもとに対象のページへ遷移させる処理を記述
                return true
            }

            override fun onPageFinished(view: WebView, urlString: String) {
                // Mobile Data Campaignで設定した値をWebViewに渡す
                Log.i("campaign", campaign.getData().toString())
                carouselWebView.loadUrl("javascript:loadVariables($recommendItemArray)")
            }
        }
        // テンプレート用のWebViewファイルを読み込む
        carouselWebView.loadUrl("file:///android_asset/carousel.html")
    }
}

// Mobile Data Campaign呼び出しのアプリ内行動。ここではサンプルとして"App Foreground"を指定
screen.trackAction("App Foreground")

// 対象のMobile Data Campaignの名前
screen.setCampaignHandler(this.handlerPopup, "Targetで指定したキャンペーン名")