カスタマイズ可能な項目についての詳細はこちらのPopデザインガイドで確認できます。

Index

Table of Contents

広告領域のカスタマイズ

Feed広告リスト領域のカスタマイズ

Feedの広告リストアイテムViewをカスタマイズし、広告イベントについてのコールバックを登録することができます。

AdsAdapter を継承したclassを実装します。

onCreateViewHolder, onBindViewHolder を実装しFeedリストに表示するitemView のレイアウトおよびバインディングロジックをカスタマイズします。
CtaViewのgetCtaTextView() および getRewardImageView() 関数を呼び出しCtaViewに表示するテキストおよびリワード画像にのカスタマイズが可能です。(より柔軟なカスタマイズを希望する、またはViewを新たに生成したい場合は下記CtaViewのカスタマイズを参照)

(optional) onImpressed, onClicked, onRewardRequested, onRewarded, onParticipatedをオーバーライドして広告のインプレッション・クリック・リワードリクエスト・リワード付与結果・参加完了についてのコールバックを受け取ることができます。(コールバックの定義および動作についてはBuzzAd Benefit API Callback(AOS 1.5.0, iOS 1.2.0)を参照)

Code Block

language	java

public class CustomAdsAdapter extends AdsAdapter<AdsAdapter.NativeAdViewHolder> {

    @Override
    public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.bz_view_feed_ad, parent, false);
        return new NativeAdViewHolder(feedNativeAdView);
    }

    @Override
    public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {
        final NativeAdView view = (NativeAdView) holder.itemView;

        final Ad ad = nativeAd.getAd();
        final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();

        final MediaView mediaView = view.findViewById(R.id.mediaView);
        final LinearLayout titleLayout = view.findViewById(R.id.titleLayout);
        final TextView titleView = view.findViewById(R.id.textTitle);
        final ImageView iconView = view.findViewById(R.id.imageIcon);
        final TextView descriptionView = view.findViewById(R.id.textDescription);
        final CtaView ctaView = view.findViewById(R.id.ctaView);
        ctaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // (オプション) 変更する"カラーコード"
        final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null
        ctaPresenter.bind(nativeAd);

        if (mediaView != null) {
            mediaView.setCreative(ad.getCreative());
            mediaView.setVideoEventListener(new VideoEventListener() 
                // Override and implement methods
            });
        }
        if (titleView != null) {
            titleView.setText(ad.getTitle());
        }

        if (iconView != null) {
            ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);
        }
        if (descriptionView != null) {
            descriptionView.setText(ad.getDescription());
        }

        final Collection<View> clickableViews = new ArrayList<>();
        clickableViews.add(ctaView);
        clickableViews.add(mediaView);
        clickableViews.add(titleLayout);
        clickableViews.add(descriptionView);

        view.setMediaView(mediaView);
        view.setClickableViews(clickableViews);
        view.setNativeAd(nativeAd);
        view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
            @Override
            public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {

            }

            @Override
            public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {
                ctaPresenter.bind(nativeAd);
            }
        });
    }
}

FeedConfig ビルド時点で該当のAdsAdapter class を指定します。

Code Block

language	java

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
	...
    .adsAdapterClass(CustomAdsAdapter.class)
    .build();

CTA Colorの変更

ここではCTA colorの変更について説明します。カラー変更以外のCtaViewカスタマイズについてはこちらを参照してください。

...

Code Block

language	xml

<resources>
    ...
    <color name="benefit_native_bg_cta_button_normal">#1290FF</color>
    <color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
    <color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>

CtaView(ボタン)のカスタマイズ

CtaViewのデザインをカスタマイズする場合は下記の通り設定を行います。

...

Code Block

language	java

if (reward > 0) {
    customizedCtaVIew.showRewardImage(CtaView.ImageType.Default);
    customizedCtaVIew.setRewardText(String.format(Locale.US, "+%d", reward));
} else {
    customizedCtaVIew.showRewardImage(null);
    customizedCtaVIew.setRewardText(null);
}

カスタムプレビューメッセージ

カスタムプレビューメッセージの表示

CustomPreviewMessage は6時間間隔でサーバーに設定されたCustomPreviewConfigを受け取りフリークエンシーキャップ(配信上限回数)の確認後にPreviewMessageを表示する機能です。したがってこの機能を実装するには CustomPreviewConfigの設定を先に行う必要があります。(フリークエンシーキャップによってCustomPreviewMessageが表示される必要がある場合、AdPreviewとArticlePreviewよりも先に表示されます)

...

図2. PopFeedHeaderにCustomPreviewMessage を表示(アイコンタップ後に表示されるPopfeedの上部に表示)

...

Step 1. ヘッダーのカスタマイズ(オプション)

Status

colour	Blue
title	任意

DefaultPopHeaderViewAdapter を継承したCustomPopHeaderViewAdapter を生成し、
getCustomPreviewMessageLayoutをオーバーライドします。
getCustomPreviewMessageLayoutのパラメータである CustomPreviewMessage にmessage, landingUrl, iconUrl 情報が入っています。
line 9~17 3にて取得した情報をもとに直接レイアウトを構成してclickEventを処理できます。
line 24 FeedConfig.feedHeaderViewAdapterClassを通じて上記1にて生成した CustomPopHeaderViewAdapter を設定します。
line 29 PopConfig.feedConfigを通じて5にて設定したFeedConfigを設定します。

Code Block

language	java

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getCustomPreviewMessageLayout (Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewCustomPreviewMessage = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView textCustomPreviewMessageTitle = viewCustomPreviewMessage.findViewById(R.id.textCustomPreviewMessageTitle);
        textCustomPreviewMessageTitle.setText(customPreviewMessage.getMessage());
        viewCustomPreviewMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, customPreviewMessage.getLandingUrl());
            }
        });
        return viewCustomPreviewMessage;
    }
}

final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
        .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(popFeedConfig)
        ...
        .build();

Step 2. FeedConfigの設定(オプション)

Status

colour	Blue
title	任意

- PopFeedHeader に CustomPreviewMessage を表示しないようにする

PopConfig.feedConfig 設定時に FeedConfig.feedHeaderViewAdapterClass を設定しない場合は PopFeedHeader の CustomPreviewMessage を表示させないように設定できます。

- PopFeedHeader に DefaultPreviewMessage を表示させる

PopConfig.feedConfig 設定時FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) を設定するとデフォルトで提供されるDefaultPreviewMessageを使用できます。 (図 2を参照)

Step 3. プレビューメッセージの表示間隔設定(オプション)

Status

colour	Blue
title	任意

PopConfig.previewIntervalInMillisを通じてプレビューメッセージの表示間隔を設定します。 AdPreview, ContentPreview/CustomPreviewMessage も同様に間隔を設定してください。

...

Versions Compared

Old Version 17

New Version Current

Key

広告領域のカスタマイズ

Feed広告リスト領域のカスタマイズ

CTA Colorの変更

CtaView(ボタン)のカスタマイズ

カスタムプレビューメッセージ

カスタムプレビューメッセージの表示

Page Comparison

Versions Compared

Old Version 17

New Version Current

Key

広告領域のカスタマイズ

Feed広告リスト領域のカスタマイズ

CTA Colorの変更

CtaView(ボタン)のカスタマイズ

カスタムプレビューメッセージ

カスタムプレビューメッセージの表示