靜態原生廣告（單個） - IDroi/AdZodiac GitHub Wiki

AdZodiac靜態原生廣告應用程式介面(單個)

靜態原生廣告的目的在於讓廣告可以無縫地與你應用程式的資料完美融合。你可以自行定義廣告的佈局，讓此佈局與你本身專案的資料相近，剩下的就只需要使用AdZodiacSingleNative物件呼叫loadAd()來下載廣告。我們提供NativeAdListener回調方法介面提供你追蹤廣告生命週期，當廣告被成功下載時， 可以在回調方法裡拿到最後生成的圖層View，最後再加在自己的ViewGroup即完成下載並呈現靜態原生廣告。

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

  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.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並且註冊到AdZodiacSingleNative

    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);
mAdZodiacSingleNative = new AdZodiacSingleNative(getActivity(), adUnitId);
mAdZodiacSingleNative.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. 下載靜態原生廣告於你的應用程式

    mAdZodiacSingleNative.loadAd();

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

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

    @Override
public void onNativeLoaded(View view) {
  // The static native ad content has been loaded.
    Toast.makeText(getContext(), "Native Ad Loaded.", Toast.LENGTH_SHORT).show();
    View fragmentView = getView();
    if(fragmentView != null) {
        LinearLayout linearLayout = (LinearLayout) fragmentView.findViewById(R.id.native_ad_layout);
        linearLayout.removeAllViews();
        linearLayout.addView(view,
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    }
}

@Override
public void onNativeFailed(AdZodiacError error) {
    // The static native ad content has failed to load.
    // Check AdZodiacError for additional information.
    // It is a good place for you to reload ad content if it is a temporary failure.
    Toast.makeText(getContext(), "Native Ad Failed. " + error.toString(), Toast.LENGTH_SHORT).show();
}

  5. 綁定回調方法

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

    mAdZodiacSingleNative.setNativeAdListener(this);

  6. (選擇性)添加其他渲染器

    若你使用打開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);

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

範例程式：

public class NativeSingleFragment extends Fragment implements NativeAdListener{

    private AdZodiacSingleNative mAdZodiacSingleNative;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.sample_single_fragment, container, false);
        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();
                mAdZodiacSingleNative.loadAd(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);
        mAdZodiacSingleNative = new AdZodiacSingleNative(getActivity(), adUnitId);
        mAdZodiacSingleNative.registerAdRenderer(renderer);

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

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

        mAdZodiacSingleNative.setNativeAdListener(this);

        return view;
    }

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

    @Override
    public void onNativeLoaded(View view) {
      // The static native ad content has been loaded.
        Toast.makeText(getContext(), "Native Ad Loaded.", Toast.LENGTH_SHORT).show();
        View fragmentView = getView();
        if(fragmentView != null) {
            LinearLayout linearLayout = (LinearLayout) fragmentView.findViewById(R.id.native_ad_layout);
            linearLayout.removeAllViews();
            linearLayout.addView(view,
                    new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        }
    }

    @Override
    public void onNativeFailed(AdZodiacError error) {
        // The static native ad content has failed to load.
        // Check AdZodiacError for additional information.
        // It is a good place for you to reload ad content if it is a temporary failure.
        Toast.makeText(getContext(), "Native Ad Failed. " + error.toString(), Toast.LENGTH_SHORT).show();
    }
}