在 Android 系统中使用原生广告模板

如果出版商想要寻找更简便的原生广告集成方法,他们可以利用自定义的 Audience Network 原生广告模板。您可以根据应用的外观和体验进行搭配,自定义原生广告的尺寸、颜色和字体。

请确保先阅读 Audience Network 入门指南Android 入门指南,然后再继续操作。

为有效利用本指南,您应该熟悉如何实现原生广告原生横幅广告

第 1 步:模板实现

第 2 步:进一步自定义

对 Audience Network SDK 进行初始化

Android Audience Network SDK 5.1 版中已添加此方法。

5.3.0 及以上版本的 Audience Network SDK 需要进行显式初始化。有关如何初始化 Audience Network Android SDK 的信息,请参阅此文档

在创建广告对象和加载广告前,您应初始化 Audience Network SDK。建议您在启动应用时执行这项操作。

public class YourApplication extends Application {
    ...
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the Audience Network SDK
        AudienceNetworkAds.initialize(this);       
    }
    ...
}

第 1 步:模板实现

在 Activity 类的顶部添加以下代码,以便导入 Facebook 广告 SDK:

import com.facebook.ads.*;

原生广告实现。

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

如果您希望广告在加载后立即展示,可在 AdListeneronAdLoaded() 方法中显示自定义模板,并将其添加到您的容器中。

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

如果广告未能在 loaded 完成后立即显示,开发者需要检查广告是否已经失效。广告加载成功后,有效期将为 60 mins。如果您要显示的广告处于 invalidated 状态,则无法获得 paid。请查看广告延迟显示情况的代码示例。

运行此代码,随后您应看到以下内容:




原生横幅广告实现。

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

如果您希望广告在加载后立即展示,可在 AdListeneronAdLoaded() 方法中显示自定义模板,并将其添加到您的容器中。

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

如果广告未能在 loaded 完成后立即显示,开发者需要检查广告是否已经失效。广告加载成功后,有效期将为 60 mins。如果您要显示的广告处于 invalidated 状态,则无法获得 paid。请查看广告延迟显示情况的代码示例。

运行此代码,随后您应看到以下内容:



自定义原生横幅广告格式包含三个模板:

模板视图类型 高度 宽度 包含的属性

NativeBannerAdView.Type .HEIGHT_50

50dp

宽度不限

图标、标题、上下文和行动号召 (CTA) 按钮

NativeBannerAdView.Type .HEIGHT_100

100dp

宽度不限

图标、标题、上下文和行动号召 (CTA) 按钮

NativeBannerAdView.Type .HEIGHT_120

120dp

宽度不限

图标、标题、上下文、描述和行动号召 (CTA) 按钮

第 2 步:进一步自定义

使用原生自定义模板,您可以自定义以下元素:

  • 高度
  • 宽度
  • 背景颜色
  • 标题颜色
  • 标题字体
  • 描述颜色
  • 描述字体
  • 按钮颜色
  • 按钮标题颜色
  • 按钮标题字体
  • 按钮边框颜色

如需自定义特定元素,建议使用适合您应用布局和主题的设计。

您需要构建一个属性对象,并提供一个已加载的原生广告或原生横幅广告,才能显示上述元素:

如需使用十六进制颜色码,请使用 Color.parseColor()

原生广告示例。

构建一个 NativeAdViewAttributes 对象,并将其作为参数放入 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));
}

上述代码呈现的广告如下:




原生横幅广告示例。

构建一个 NativeAdViewAttributes 对象,并将其作为参数放入 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);  
}

上述代码呈现的广告如下:

后续步骤