靜態原生廣告(結合Adapter使用,例如ListView或GridView) - IDroi/AdZodiac GitHub Wiki

AdZodiac靜態原生廣告應用程式介面(結合Adapter使用,例如ListView, GridView)

靜態原生廣告讓你可以透過跟訊息流一致的設計版樣呈現給使用者來為你的應用程式獲得收益。靜態原生廣告應用程式介面提供AdZodiacAdAdapter,他可以囊括你原本訊息流的Adapter,並且把廣告插入ListViewGridView或者其他使用Adapter實作的View物件。使用這個類別,AdZodiac自動會幫你處理圖片的快取機制與收益追蹤,這樣你就可以專注在如何呈現廣告這個議題上。

加入靜態原生廣告於你的應用程式只需要下面幾個步驟:

  1. 定義你的ViewBinder來創造廣告內容的圖層View
  2. 創立AdZodiacAdAdapter來囊括原本訊息流的Adapter
  3. 使用API下載靜態原生廣告

預先準備

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

下載靜態原生廣告於你的應用程式

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

    需要更新你的AndroidManifest.xml裡的 PermissionActivity 來整合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.flurry.android.FlurryFullscreenTakeoverActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/>
    
    <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/>
    
    <activity android:name="com.facebook.ads.AudienceNetworkActivity" android:configChanges="keyboardHidden|orientation|screenSize" />
    
    <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並註冊到AdapterAdAdapter

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

    // set up your original adapter
    final ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_1);
    for (int i = 0; i < 100; ++i) {
        adapter.add("Item " + i);
    }
    
    // set up AdZodiacAdAdpter
    mAdZodiacAdAdapter = new AdZodiacAdAdapter(getActivity(), adapter);
    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);
    mAdZodiacAdAdapter.registerAdRenderer(renderer);
    
    // bind AdZodiacAdZdapter to your original ListView
    listView.setAdapter(mAdZodiacAdAdapter);

    在你的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. 下載靜態原生廣告於你的應用程式

    String adUnitId = "YOUR_STATIC_NATIVE_AD_UNIT_ID";
    mAdZodiacAdAdapter.loadAds(adUnitId);
  4. (選擇性)添加其他渲染器

    若你使用打開Facebook, Google, Flurry廣告網路來源,那麼你就要額外註冊以下的渲染器:

    FacebookAdRenderer facebookAdRenderer = new FacebookAdRenderer(viewBinder);
    GooglePlayServicesAdRenderer googlePlayServicesAdRenderer = new GooglePlayServicesAdRenderer(viewBinder);
    FlurryViewBinder flurryViewBinder = new FlurryViewBinder.Builder(viewBinder)
            .videoViewId(R.id.native_main_video)
            .build();
    FlurryNativeAdRenderer flurryNativeAdRenderer = new FlurryNativeAdRenderer(flurryViewBinder);
    
    mAdZodiacSingleNative.registerAdRenderer(facebookAdRenderer);
    mAdZodiacSingleNative.registerAdRenderer(googlePlayServicesAdRenderer);
    mAdZodiacSingleNative.registerAdRenderer(flurryNativeAdRenderer);
  5. 記得在Activity裡的onDestroy()Fragment裡的onDestroyView()呼叫AdZodiacAdAdapter物件的destroy()方法。

範例程式:

public class NativeListViewFragment extends Fragment{

    private AdZodiacAdAdapter mAdZodiacAdAdapter;

    @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_list_view_fragment, container, false);
        final ListView listView = (ListView) view.findViewById(R.id.native_list_view);
        AdZodiacSample adZodiacSample = AdZodiacSample.fromBundle(getArguments());

        final String adUnitId = adZodiacSample.getAdUnitId();
        final DetailFragmentViewHolder views = DetailFragmentViewHolder.fromView(view);
        views.mAdUnitIdView.setText(adUnitId);
        views.mDescription.setText(adZodiacSample.getDescription());
        views.mLoadAdButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                KeywordParameters parameters = new KeywordParameters.Builder()
                        .setRankingMethod((KeywordParameters.RankMethods) views.mRankingMethodSpinner.getSelectedItem())
                        .setAge((KeywordParameters.Age) views.mAgeSpinner.getSelectedItem())
                        .setAppCategory((KeywordParameters.AppCategories) views.mCategorySpinner.getSelectedItem())
                        .setTime((KeywordParameters.Time) views.mTimeSpinner.getSelectedItem())
                        .setGender((KeywordParameters.Gender) views.mGenderSpinner.getSelectedItem())
                        .build();
                if(mAdZodiacAdAdapter != null){
                    mAdZodiacAdAdapter.loadAds(adUnitId, parameters);
                }
            }
        });

        final ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_1);
        for (int i = 0; i < 100; ++i) {
            adapter.add("Item " + i);
        }
        mAdZodiacAdAdapter = new AdZodiacAdAdapter(getActivity(), adapter);

        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);

        /* Optional */
        FacebookAdRenderer facebookAdRenderer = new FacebookAdRenderer(viewBinder);
        GooglePlayServicesAdRenderer googlePlayServicesAdRenderer = new GooglePlayServicesAdRenderer(viewBinder);
        FlurryViewBinder flurryViewBinder = new FlurryViewBinder.Builder(viewBinder)
                .videoViewId(R.id.native_main_video)
                .build();
        FlurryNativeAdRenderer flurryNativeAdRenderer = new FlurryNativeAdRenderer(flurryViewBinder);

        mAdZodiacAdAdapter.registerAdRenderer(facebookAdRenderer);
        mAdZodiacAdAdapter.registerAdRenderer(googlePlayServicesAdRenderer);
        mAdZodiacAdAdapter.registerAdRenderer(flurryNativeAdRenderer);
        /* Optional */

        mAdZodiacAdAdapter.registerAdRenderer(renderer);
        listView.setAdapter(mAdZodiacAdAdapter);
        mAdZodiacAdAdapter.loadAds(adUnitId);

        return view;
    }

    @Override
    public void onDestroyView() {
        mAdZodiacAdAdapter.destroy();
        super.onDestroyView();
    }
}
⚠️ **GitHub.com Fallback** ⚠️