AdMob(GAM)のネイティブ広告のカスタマイズ表示 - glossom-dev/AdfurikunSDK-Android GitHub Wiki

AdMob(GAM)のネイティブ広告のカスタマイズ表示

AdMob(GAM)のネイティブ広告では、インフィード広告実装方法で説明した標準的な表示方法に加えて、
AdMobが提供するUIコンポーネント（以下、カスタムコンポーネント）を使用することで、
アプリケーションのデザインに合わせた柔軟な広告表示が可能です。

カスタムコンポーネントの取得

ロードされたネイティブ広告がカスタムコンポーネントをサポートしているかどうかは、
AdfurikunNativeAdLoadListener.onNativeAdLoadFinish関数の引数adInfoから確認できます。

  • adInfo.partsがnullでない場合、その広告はカスタムコンポーネントをサポートしています。
  • adInfo.partsをAdMobPartsにキャストし、
    その後AdMobParts.detailをcom.google.android.gms.ads.nativead.NativeAd
    （AdMobバージョン20.0.0未満の場合はUnifiedNativeAd）にキャストすることで、
    カスタムコンポーネントの詳細を取得できます。

実装例

新しいAdMobバージョン(20.0.0以上)を使用している場合 
private AdfurikunNativeAdLoadListener mLoadListener = new AdfurikunNativeAdLoadListener() {
    @Override
    public void onNativeAdLoadFinish(AdfurikunNativeAdInfo adInfo, String appId) {
        val parts : Object = adInfo.parts
        if (parts != null) {
            val components = parts as AdMobParts
    
            // AdMobのカスタムコンポーネントを取得
            val nativeAd : com.google.android.gms.ads.nativead.NativeAd = components.detail as com.google.android.gms.ads.nativead.NativeAd
// ...
古いAdMobバージョン(20.0.0未満)を使用している場合 
private AdfurikunNativeAdLoadListener mLoadListener = new AdfurikunNativeAdLoadListener() {
    @Override
    public void onNativeAdLoadFinish(AdfurikunNativeAdInfo adInfo, String appId) {
        val parts : Object = adInfo.parts
        if (parts != null) {
            val components = parts as AdMobParts
    
            // AdMobのComponents情報を取る
            val nativeAd : UnifiedNativeAd = components.detail as UnifiedNativeAd
// ...

カスタムコンポーネントを使用した広告表示の実装

com.google.android.gms.ads.nativead.NativeAd
（AdMobバージョン20.0.0未満の場合はUnifiedNativeAd）から、
広告を構成する各パーツ（静止画、テキスト、URLなど）を取得し、表示をカスタマイズできます。
詳細については、AdMobの公式ドキュメントをご確認ください。

さらに、ユーザーが広告を視聴したかどうかを判定するためには、
AdMobPartsのsetVimpTargetView関数に、広告の表示ビューを引数として渡す必要があります。

実装例

新しいAdMobバージョン(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
    }
古いAdMobバージョン(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
    }

Note

詳しい実装例は、サンプルアプリのプロジェクトフォルダの
jp/tjkapp/adfurikunmovierewardsample/NativeAdUtils.ktを参考してください。

AdChoicesアイコンの配置設定

AdfurikunNativeAdクラスの初期化時に、AdChoicesアイコンの配置情報を指定した
Bundleインスタンスを作成し、addCustomEventExtras関数を使って渡す必要があります。
特に指定しない場合、デフォルトでアイコンは右上に表示されます。

AdChoicesの配置オプション 説明
NativeAdOptions.ADCHOICES_TOP_LEFT 左上
NativeAdOptions.ADCHOICES_TOP_RIGHT 右上（デフォルト）
NativeAdOptions.ADCHOICES_BOTTOM_LEFT 左下
NativeAdOptions.ADCHOICES_BOTTOM_RIGHT 右下

実装例

val nativeAd = AdfurikunNativeAd(activity, "広告枠ID", width, height)
        
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)
        
nativeAd.addCustomEventExtras(parent)
⚠️ **GitHub.com Fallback** ⚠️