Sử dụng mẫu quảng cáo tự nhiên trong Android

Để sử dụng hiệu quả hướng dẫn này, bạn nên làm quen với quy trình triển khai quảng cáo tự nhiên và quảng cáo biểu ngữ tự nhiên.

Bước 1: Triển khai mẫu

• Quảng cáo tự nhiên
• Quảng cáo biểu ngữ tự nhiên

Bước 2: Tùy chỉnh thêm

• Quảng cáo tự nhiên
• Quảng cáo biểu ngữ tự nhiên

Bước 1: Triển khai mẫu

Thêm mã sau vào đầu lớp hoạt động để nhập SDK Quảng cáo trên Facebook:

import com.facebook.ads.*;

Triển khai cho Quảng cáo tự nhiên.

private NativeAd nativeAd;

public class NativeAdActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
  }
}        

Nếu muốn quảng cáo hiển thị ngay khi được tải, bạn có thể hiển thị mẫu tùy chỉnh trong phương thức onAdLoaded() của AdListener và thêm vào vùng chứa của mình.

private NativeAd nativeAd;
...
  NativeAdListener nativeAdListener = new NativeAdListener() {
    ...
    @Override
    public void onAdLoaded(Ad ad) {
      // Render the Native Ad Template
      View adView = NativeAdView.render(MainActivity.this, nativeAd);
      LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
      // Add the Native Ad View to your ad container. 
      // The recommended dimensions for the ad container are:
      // Width: 280dp - 500dp
      // Height: 250dp - 500dp
      // The template, however, will adapt to the supplied dimensions.
      nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));  
    }
   ...
  }

Chạy mã và bạn sẽ nhìn thấy nội dung sau:

Triển khai cho Quảng cáo biểu ngữ tự nhiên.

private NativeBannerAd mNativeBannerAd;
...

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeBannerAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    mNativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    mNativeBannerAd.loadAd(
            mNativeBannerAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
  }
}        

Nếu muốn quảng cáo hiển thị ngay khi được tải, bạn có thể hiển thị mẫu tùy chỉnh trong phương thức onAdLoaded() của AdListener và thêm vào vùng chứa của mình.

@Override
public void onAdLoaded(Ad ad) {
  // Render the Native Banner Ad Template
  View adView = NativeBannerAdView.render(MainActivity.this, mNativeBannerAd, NativeBannerAdView.Type.HEIGHT_100);
  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

Chạy mã và bạn sẽ nhìn thấy nội dung sau:

Định dạng quảng cáo biểu ngữ tự nhiên tùy chỉnh có 3 mẫu:

Bước 2: Tùy chỉnh thêm

Với mẫu tùy chỉnh tự nhiên, bạn có thể tùy chỉnh các thành phần sau:

• Chiều cao
• Chiều rộng
• Màu nền
• Màu tiêu đề
• Phông chữ tiêu đề
• Màu nội dung mô tả
• Phông chữ của nội dung mô tả
• Màu nút
• Màu tên nút
• Phông chữ của tên nút
• Màu viền nút

Nếu muốn tùy chỉnh một số thành phần cụ thể, bạn nên sử dụng thiết kế phù hợp với bố cục và chủ đề của ứng dụng.

Bạn cần tạo một đối tượng thuộc tính và cung cấp quảng cáo tự nhiên hoặc quảng cáo biểu ngữ tự nhiên đã tải để hiển thị các thành phần sau:

Ví dụ về quảng cáo tự nhiên.

Tạo một đối tượng NativeAdViewAttributes và cung cấp đối tượng này dưới dạng đối số trong NativeAdView.render():

@Override
public void onAdLoaded(Ad ad) {
  // Set the Native Ad attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);
  
  View adView = NativeAdView.render(MainActivity.this, nativeAd, viewAttributes);

  LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
  // Add the Native Ad View to your ad container
  nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));
}

Mã ở trên sẽ hiển thị quảng cáo như sau:

Ví dụ về quảng cáo biểu ngữ tự nhiên.

Tạo một đối tượng NativeAdViewAttributes và cung cấp đối tượng này dưới dạng đối số trong NativeBannerAdView.render():

@Override
public void onAdLoaded(Ad ad) {
  // Set the NativeAd attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);   
  
  View adView = NativeBannerAdView.render(MainActivity.this, nativeAd, NativeBannerAdView.Type.HEIGHT_100, viewAttributes);

  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

Mã ở trên sẽ hiển thị quảng cáo như sau: