lap_custom_component

LAP Custom Component連携について

ネイティブ広告

広告が表示されるAdfurikunNativeAdを使う方法以外にもUIを構成するComponentを利用してアプリケーションのUIと合わせて広告表示をCustomizeすることが出来ます。

Custom Component情報取得

次のパラメータで取得した広告情報からCustom Componentがサポートされているか否かを判断することが出来ます。

AdfurikunNativeAdInfo.parts

結果nullではないの場合、結果をObjectからFanPartsにキャストしますと、Custom Component情報になります。

// adInfoはコールバックonNativeAdLoadFinishで返すAdfurikunNativeAdInfoのインスタンスです
val result : Object = adInfo.parts
if (result != null) {
    val components = result as FiveParts

    // LAPのComponents情報を取る
    val fiveAdNative = components.detail as FiveAdNative
}

Custom Componentの組立て

Custom Component情報から画面を構成するパーツを使ってCustomizeすることが出来ます。
※アドフリくんのViewable Impressionを発生させるためにFivePartsのsetVimpTargetViewに広告ビューをセットアップする必要があります。

    fun fiveRegisterView(context: Context, fiveParts: FiveParts?, nativeAd: AdfurikunNativeAd?): View? {
        fiveParts?.let { parts ->
            (parts.detail as? FiveAdNative)?.let { fiveAdNative ->
                val parent = LayoutInflater.from(context).inflate(R.layout.five_native_ad_template, null)
                val adTitleView = parent.findViewById<TextView>(R.id.ad_title)
                val adMediaView = parent.findViewById<FrameLayout>(R.id.ad_media)
                val adDescriptionView = parent.findViewById<TextView>(R.id.ad_description)
                val adIconView = parent.findViewById<ImageView>(R.id.ad_icon)
                val adAdvertiserNameView = parent.findViewById<TextView>(R.id.ad_advertiser_name)
                val adButtonView = parent.findViewById<Button>(R.id.ad_button)
                // タイトル
                adTitleView.text = fiveAdNative.adTitle
                // 静止画・動画
                fiveAdNative.adMainView.layoutParams = FrameLayout.LayoutParams(
                        Utils.convertDpToPx(context, 320),
                        Utils.convertDpToPx(context, 180),
                        Gravity.CENTER_HORIZONTAL)
                adMediaView.addView(fiveAdNative.adMainView)
                // 説明文
                adDescriptionView.text = fiveAdNative.descriptionText
                // アイコン
                fiveAdNative.loadIconImageAsync {
                    it?.let { icon ->
                        adIconView.setImageBitmap(icon)
                    }
                }
                // 広告主名
                adAdvertiserNameView.text = fiveAdNative.advertiserName
                // ボタンテキスト
                adButtonView.text = fiveAdNative.buttonText
                // クリック対象ビューを設定する
                val clickableView = arrayListOf<View>()
                clickableView.add(fiveAdNative.adMainView)
                clickableView.add(adIconView)
                clickableView.add(adButtonView)

                fiveAdNative.registerViews(fiveAdNative.adMainView, null, clickableView)

                // アドフリくんのViewable Impressionを発生させるための広告ビューを設定する
                parts.setVimpTargetView(parent)
                // 再生リスナーをセットする（AdfurikunLightNativeAdを利用した時には設定が必要なし）
                parts.prepareVideoListener(nativeAd)

                return parent
            }
        }
        return null
    }

詳しい内容は、SDK Sample（KotlinSample）ProjectにあるNativeAdUtils.ktを参考してください。