Mobile Carousel iOS

発火条件

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

設定方法

1. ドキュメントを参考にMobile SDKを設定する
2. トップページ からダウンロードしたファイルを展開
3. mobile 下の carousel.html をローカルファイルとしてプロジェクトディレクトリに配置
4. Storyboardで"webview"を設定
5. @IBOutlet weak var webView: WKWebView!としてViewControllerファイルにOutletを設置
6. ViewControllerファイルに下記ソースを追加

func handleCarouselCampaign(campaign: EVGCampaign) {
    // カルーセル
    /// カルーセルに渡すデータ
    var itemData: [Codable] = []
    /// カルーセルのタイトル
    let recCampaignSubItem = CampaignItem(
        titleText: campaign.data["RecItemTitle"] as! String,
        titleSize: campaign.data["RecItemTitleFontSize"] as! String,
        titleColor: campaign.data["RecItemTitleFontColor"] as! String,
        titleAlign: campaign.data["RecItemTitleAlign"] as! String
    )
    let campObject = encodeJson(campData: recCampaignSubItem)
    itemData.append( campObject )

    /// カルーセルのコンテンツ
    let recitems: Array = campaign.data["RecItems"] as! Array<[String: Any]>
    
    for recitem: [String: Any] in recitems {
        let recommendItem = RecommendItem(
            id: recitem["_id"] as! String,
            name: recitem["name"] as! String,
            imageUrl: recitem["imageUrl"] as! String,
            price: "\(recitem["price"]!)"
        )

        let jsonObject = encodeJson(campData: recommendItem)
        itemData.append( jsonObject )
    }

    carouselView = CarouselController(
        webView: webView!,
        webViewFile: "carousel",
        campData: itemData
    )
    // / カルーセル

    evergageScreen?.trackImpression(campaign)

    // Only display the campaign if the user is not in the control group.
    if (!campaign.isControlGroup) {
        NSLog("New active campaign name %@ for target %@ with data %@",
                campaign.campaignName, campaign.target, campaign.data)
    }
}

プレビュー