推薦列表廣告 - IDroi/AdZodiac GitHub Wiki

AdZodiac推薦列表廣告應用程式介面

推薦列表廣告應用程式介面提供你得到某個特定類別廣告的認列圖層，此種類廣告適合在應用程式商店內。舉例來說，你如果正在開發販賣體育用品的應用程式，那你就可以考慮下載運動類型應用程式廣告（例如：跑步計步器）。你可以使用AdZodiacRecommendation物件以及相關的回調方法來下載廣告並且展示在你的應用程式。

加入推薦列表廣告於你的應用程式只需要下面幾個步驟：

  1. 定義你的ViewBinder來創造廣告內容的圖層View
  2. 使用API下載靜態原生廣告
  3. 設定回調方法來處理事件

預先準備

在你下載AdZodiac靜態原生廣告之前，你需要先依照快速入門內的流程完成創立AdZodiac帳號與廣告單位識別碼，並且整合AdZodiac Android API到你的專案。

下載橫幅廣告於你的應用程式

  1. 檢查你的安卓應用程式的Manifest

    需要更新你的AndroidManifest.xml裡的 Permission 和 Activity 來整合AdZodiac應用程式介面進你的應用程式。

    宣告下列的uses-permission標籤：

    <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    宣告下列的activity標籤於你的<application>：

    <activity android:name="com.adzodiac.common.AdZodiacBrowser" android:configChanges="keyboardHidden|orientation|screenSize"/>
<activity android:name="com.adzodiac.mobileads.AdZodiacActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>
<activity android:name="com.adzodiac.mobileads.MraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>
<activity android:name="com.adzodiac.mobileads.MraidVideoPlayerActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>
<activity android:name="com.adzodiac.mobileads.RewardedMraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>

<meta-data android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
<!--當開發者已經有使用卓易BaaS服務時可以不用填下列應用程式識別碼-->
<meta-data android:name="com.droi.sdk.application_id" 
        android:value="hlqvmbzhC6LuapuYJPwEVziIUxMql1MAlQDblHgI" />
<!--當開發者有開啟One by AOL網路時需要加入的provider-->
<provider
        android:name="com.millennialmedia.internal.utils.MediaContentProvider"
        android:authorities="${applicationId}.MediaContentProvider"
        android:grantUriPermissions="true"
        android:exported="false" />

  2. 定義你的ViewBinder從廣告內容創造圖層View

    AdZodiac的廣告渲染器將會使用你的ViewBinder來渲染你的廣告內容，你必須在Activity onCreate() 或者 Fragment onCreateView()定義它。

    ViewBinder viewBinder = new ViewBinder.Builder(R.layout.native_ad_list_item)
            .titleId(R.id.native_title)
            .textId(R.id.native_text)
            .mainImageId(R.id.native_main_image)
            .iconImageId(R.id.native_icon_image)
            .callToActionId(R.id.native_cta)
            .starRatingId(R.id.native_star)
            .privacyInformationIconImageId(R.id.native_privacy_information_icon_image)
            .build();

AdZodiacStaticNativeAdRenderer renderer = new AdZodiacStaticNativeAdRenderer(viewBinder);
mAdZodiacBatchNative = new AdZodiacBatchNative(getActivity(), adUnitId);
mAdZodiacBatchNative.registerAdRenderer(renderer);

    在你的native_ad_list_item.xml:

    <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="@+id/native_outer_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:clickable="true">
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/native_icon_image"
    android:layout_width="64dp"
    android:layout_height="wrap_content"
    android:background="@null"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:contentDescription="@string/native_icon_image"
    />

<TextView android:id="@+id/native_title"
    android:layout_width="match_parent"
    android:layout_marginLeft="84dp"
    android:layout_marginTop="32dp"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:textColor="@android:color/darker_gray"
    android:textStyle="bold"
    android:textSize="@dimen/native_ad_title_size"/>

<TextView android:id="@+id/native_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/native_icon_image"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:textColor="@android:color/darker_gray"
    android:maxLines="2"/>

<com.adzodiac.nativeads.MediaLayout
    android:id="@+id/native_main_video"
    android:gravity="center"
    android:scaleType="centerCrop"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/native_main_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_below="@+id/native_text"
    android:layout_alignParentLeft="true"
    android:contentDescription="@string/native_main_image"
    />

<RatingBar
    android:id="@+id/native_star"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_marginLeft="20dp"
    android:layout_below="@+id/native_main_image"
    android:isIndicator="true"
    android:maxHeight="16dp"
    android:minHeight="16dp"
    android:numStars="5"
    android:rating="0" />

<Button
    android:id="@+id/native_cta"
    android:layout_width="wrap_content"
    android:layout_height="35dp"
    android:text="@string/learn_more"
    android:textColor="@android:color/black"
    android:textStyle="bold"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:layout_below="@+id/native_main_image"
    android:textSize="12sp"
    android:layout_alignParentRight="true"
    android:clickable="true"
    android:paddingBottom="10dp" />

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/native_privacy_information_icon_image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="10dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/native_privacy_information_icon_image"
    />

</RelativeLayout>

  3. 下載廣告陣列於你的應用程式

    mAdZodiacBatchNative.load()

  4. 將創造出來的圖層加入你的應用程式

    實作BatchNativeAdListener裡面的方法，當下載成功之後我們可以從onBatchNativeAdLoaded得到渲染過的圖層View，之後只需要將此圖層加入ViewGroup即可。

    @Override
public void onBatchNativeAdLoaded(BatchNativeAds list) {
    View fragmentView = getView();
    if(fragmentView != null){
        LinearLayout linearLayout = (LinearLayout) fragmentView.findViewById(R.id.native_ad_layout);
        linearLayout.removeAllViews();
        for(int i = 0; i < list.size(); i++){
            linearLayout.addView(list.get(i));
        }
    }
}

  5. 綁定回調方法

    將剛剛實作的回調方法綁定在AdZodiacBatchNative，我們就可以在廣告下載完成時拿到廣告的圖層了。

    mAdZodiacBatchNative.setNativeAdListener(this);

  6. 記得在Activity裡的onDestroy()或Fragment裡的onDestroyView()呼叫AdZodiacBatchNative物件的destroy()方法。

範例程式：

public class NativeBatchFragment extends Fragment implements BatchNativeAdListener{

    private AdZodiacBatchNative mAdZodiacBatchNative;
    private DetailFragmentViewHolder mViews;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        final View view = inflater.inflate(R.layout.sample_batch_fragment, container, false);
        AdZodiacSample adZodiacSample = AdZodiacSample.fromBundle(getArguments());

        final String adUnitId = adZodiacSample.getAdUnitId();
        mViews = DetailFragmentViewHolder.fromView(view);
        mViews.mAdUnitIdView.setText(adUnitId);
        mViews.mDescription.setText(adZodiacSample.getDescription());

        mViews.mLoadAdButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                KeywordParameters parameters = new KeywordParameters.Builder()
                        .setRankingMethod((KeywordParameters.RankMethods) mViews.mRankingMethodSpinner.getSelectedItem())
                        .setAge((KeywordParameters.Age) mViews.mAgeSpinner.getSelectedItem())
                        .setAppCategory((KeywordParameters.AppCategories) mViews.mCategorySpinner.getSelectedItem())
                        .setTime((KeywordParameters.Time) mViews.mTimeSpinner.getSelectedItem())
                        .setGender((KeywordParameters.Gender) mViews.mGenderSpinner.getSelectedItem())
                        .build();
                mAdZodiacBatchNative.load(10, parameters);
            }
        });

        ViewBinder viewBinder = new ViewBinder.Builder(R.layout.native_ad_list_item)
                .titleId(R.id.native_title)
                .textId(R.id.native_text)
                .mainImageId(R.id.native_main_image)
                .iconImageId(R.id.native_icon_image)
                .callToActionId(R.id.native_cta)
                .starRatingId(R.id.native_star)
                .privacyInformationIconImageId(R.id.native_privacy_information_icon_image)
                .build();

        AdZodiacStaticNativeAdRenderer renderer = new AdZodiacStaticNativeAdRenderer(viewBinder);
        mAdZodiacBatchNative = new AdZodiacBatchNative(getActivity(), adUnitId);
        mAdZodiacBatchNative.registerAdRenderer(renderer);
        mAdZodiacBatchNative.setBatchNativeAdListener(this);

        return view;
    }

    @Override
    public void onDestroyView() {
        mAdZodiacBatchNative.destroy();
        super.onDestroyView();
    }

    @Override
    public void onBatchNativeAdLoaded(BatchNativeAds list) {
        View fragmentView = getView();
        if(fragmentView != null){
            LinearLayout linearLayout = (LinearLayout) fragmentView.findViewById(R.id.native_ad_layout);
            linearLayout.removeAllViews();
            for(int i = 0; i < list.size(); i++){
                linearLayout.addView(list.get(i));
            }
        }
    }

    @Override
    public void onBatchNativeAdFailed(AdZodiacError error) {
        Toast.makeText(getContext(), "Batch Native Ad Failed. " + error.toString(), Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onBatchNativeAdNeedToBeUpdated() {
        KeywordParameters parameters = new KeywordParameters.Builder()
                .setRankingMethod((KeywordParameters.RankMethods) mViews.mRankingMethodSpinner.getSelectedItem())
                .setAge((KeywordParameters.Age) mViews.mAgeSpinner.getSelectedItem())
                .setAppCategory((KeywordParameters.AppCategories) mViews.mCategorySpinner.getSelectedItem())
                .setTime((KeywordParameters.Time) mViews.mTimeSpinner.getSelectedItem())
                .setGender((KeywordParameters.Gender) mViews.mGenderSpinner.getSelectedItem())
                .build();
        mAdZodiacBatchNative.load(10, parameters);
    }
}