admob_custom_component

AdMob(GAM) Custom Component連携について

ネイティブ広告

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

Custom Component情報取得

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

AdfurikunNativeAdInfo.parts

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

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

    // AdMobのComponents情報を取る
    val nativeAd : UnifiedNativeAd = components.detail as UnifiedNativeAd
}

Custom Componentの組立て

Custom Component情報から画面を構成するパーツを使ってCustomizeすることが出来ます。 詳しくはAdMobの公式ドキュメントをご参照ください https://developers.google.com/admob/android/native/advanced?hl=ja
※アドフリくんのViewable Impressionを発生させるためにAdMobPartsのsetVimpTargetViewに広告ビューをセットアップする必要があります。

新しいバージョン(20.0.0以上)

    fun adMobRegisterViewFromNativeAd(context: Context, adMobParts: AdMobParts?, adfurikunNativeAd: AdfurikunNativeAd? = null): View? {
        adMobParts?.let { parts ->
            (parts.detail as? com.google.android.gms.ads.nativead.NativeAd)?.let { nativeAd ->
                val adView = LayoutInflater.from(context).inflate(R.layout.admob_custom_view, null) as NativeAdView

                adView.mediaView = adView.findViewById(R.id.ad_media)
                adView.headlineView = adView.findViewById(R.id.ad_headline)
                adView.bodyView = adView.findViewById(R.id.ad_body)
                adView.callToActionView = adView.findViewById(R.id.ad_call_to_action)
                adView.iconView = adView.findViewById(R.id.ad_app_icon)
                adView.priceView = adView.findViewById(R.id.ad_price)
                adView.starRatingView = adView.findViewById(R.id.ad_stars)
                adView.storeView = adView.findViewById(R.id.ad_store)
                adView.advertiserView = adView.findViewById(R.id.ad_advertiser)

                // メディアサイズを設定する
                val width = Utils.convertDpToPx(context, 320)
                val height = Utils.convertDpToPx(context, 180)
                adView.mediaView?.layoutParams = LinearLayout.LayoutParams(width, height)

                (adView.headlineView as TextView).text = nativeAd.headline ?: ""
                (adView.bodyView as TextView).text = nativeAd.body ?: ""

                nativeAd.callToAction?.let { callToAction ->
                    (adView.callToActionView as TextView).text = callToAction
                    adView.callToActionView?.visibility = View.VISIBLE
                } ?: run {
                    adView.callToActionView?.visibility = View.GONE
                }

                nativeAd.icon?.drawable?.let { icon ->
                    (adView.iconView as ImageView).setImageDrawable(icon)
                    adView.iconView?.visibility = View.VISIBLE
                } ?: run {
                    adView.iconView?.visibility = View.GONE
                }

                (adView.priceView as TextView).text = nativeAd.price ?: ""

                nativeAd.starRating?.let { starRating ->
                    (adView.starRatingView as RatingBar).rating = starRating.toFloat()
                    adView.starRatingView?.visibility = View.VISIBLE
                } ?: run {
                    adView.starRatingView?.visibility = View.GONE
                }

                (adView.storeView as TextView).text = nativeAd.store ?: ""

                (adView.advertiserView as TextView).text = nativeAd.advertiser ?: ""

                nativeAd.mediaContent?.let { mediaContent ->
                    adView.mediaView?.setMediaContent(mediaContent)
                }

                adView.setNativeAd(nativeAd)
                // アドフリくんのViewable Impressionを発生させるための広告ビューを設定する
                parts.setVimpTargetView(adView)
                parts.prepareVideoListener(adfurikunNativeAd)
                return adView
            }
        }
        return null
    }

古いバージョン(20.0.0未満)

    fun adMobRegisterViewFromNativeAd(context: Context, adMobParts: AdMobParts?, nativeAd: AdfurikunNativeAd? = null): View? {
        adMobParts?.let { parts ->
            (parts.detail as? UnifiedNativeAd)?.let { unifiedNativeAd ->
                val adView = LayoutInflater.from(context).inflate(R.layout.admob_custom_view, null) as UnifiedNativeAdView

                adView.mediaView = adView.findViewById(R.id.ad_media)
                adView.headlineView = adView.findViewById(R.id.ad_headline)
                adView.bodyView = adView.findViewById(R.id.ad_body)
                adView.callToActionView = adView.findViewById(R.id.ad_call_to_action)
                adView.iconView = adView.findViewById(R.id.ad_app_icon)
                adView.priceView = adView.findViewById(R.id.ad_price)
                adView.starRatingView = adView.findViewById(R.id.ad_stars)
                adView.storeView = adView.findViewById(R.id.ad_store)
                adView.advertiserView = adView.findViewById(R.id.ad_advertiser)

                // メディアサイズを設定する
                val width = Utils.convertDpToPx(context, 320)
                val height = Utils.convertDpToPx(context, 180)
                adView.mediaView.layoutParams = LinearLayout.LayoutParams(width, height)

                (adView.headlineView as TextView).text = unifiedNativeAd.headline ?: ""
                (adView.bodyView as TextView).text = unifiedNativeAd.body ?: ""

                unifiedNativeAd.callToAction?.let { callToAction ->
                    (adView.callToActionView as TextView).text = callToAction
                    adView.callToActionView.visibility = View.VISIBLE
                } ?: run {
                    adView.callToActionView.visibility = View.GONE
                }

                unifiedNativeAd.icon?.drawable?.let { icon ->
                    (adView.iconView as ImageView).setImageDrawable(icon)
                    adView.iconView.visibility = View.VISIBLE
                } ?: run {
                    adView.iconView.visibility = View.GONE
                }

                (adView.priceView as TextView).text = unifiedNativeAd.price ?: ""

                unifiedNativeAd.starRating?.let { starRating ->
                    (adView.starRatingView as RatingBar).rating = starRating.toFloat()
                    adView.starRatingView.visibility = View.VISIBLE
                } ?: run {
                    adView.starRatingView.visibility = View.GONE
                }

                (adView.storeView as TextView).text = unifiedNativeAd.store ?: ""

                (adView.advertiserView as TextView).text = unifiedNativeAd.advertiser ?: ""

                adView.setNativeAd(unifiedNativeAd)
                // アドフリくんのViewable Impressionを発生させるための広告ビューを設定する
                parts.setVimpTargetView(adView)
                parts.prepareVideoListener(nativeAd)
                return adView
            }
        }
        return null
    }

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

AdChoices配置設定について

広告読み込みを開始する前にBundleの形でAdChoices配置情報を渡す必要があります。 ※デフォルトでは右上に配置されます。

AdChoices配置値	説明
NativeAdOptions.ADCHOICES_TOP_LEFT	左上
NativeAdOptions.ADCHOICES_TOP_RIGHT	右上
NativeAdOptions.ADCHOICES_BOTTOM_LEFT	左下
NativeAdOptions.ADCHOICES_BOTTOM_RIGHT	右下

val option = Bundle()
option.putInt("adChoices_placement", AdChoices配置値)
// アドネットワークキー設定について（AdMob：6019、GAM：6060)
val adNetworkKey = Bundle()
adNetworkKey.putBundle("6060", option)
val parent = Bundle()
parent.putBundle("adnetwork_parameter", adNetworkKey)
val nativeAd = AdfurikunNativeAd(activity, "appId", width, height)
nativeAd.addCustomEventExtras(parent)