Banner广告

Banner广告是在应用程序顶部、中部或底部占据一个位置的矩形图片,广告内容每隔一段时间会自动刷新,点击内容时通常会链接到广告主的页面。

1. 添加Banner广告

步骤一:添加BannerView

HUAWEI Ads SDK支持以下两种方式添加BannerView来展示Banner广告:

  • 通过配置XML布局文件添加

在XML布局文件中添加BannerView,并通过配置hwads:adId和hwads:bannerSize属性,来设置广告位ID和尺寸。

以下示例代码中展示了如何在XML布局文件中添加BannerView

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.    xmlns:hwads="http://schemas.android.com/apk/res-auto"
  4.    ...
  5.    <com.huawei.hms.ads.banner.BannerView
  6.       android:id="@+id/hw_banner_view"
  7.       android:layout_width="match_parent"
  8.       android:layout_height="wrap_content"
  9.       android:layout_alignParentBottom="true"
  10.       android:layout_centerHorizontal="true"
  11.       hwads:adId="testw6vs28auh3"
  12.       hwads:bannerSize="BANNER_SIZE_360_57"/>
  13. </RelativeLayout>

以下示例代码展示了如何获取BannerView

  1. BannerView bannerView = findViewById(R.id.hw_banner_view);
  •  通过编程方式添加

在代码中添加BannerView,并设置广告位ID和尺寸。

  1. BannerView bannerView = new BannerView(this);
  2. // "testw6vs28auh3"为专用的测试广告位ID。
  3. bannerView.setAdId("testw6vs28auh3");
  4. bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_360_57);
  5. FrameLayout adFrameLayout = findViewById(R.id.ad_frame);
  6. adFrameLayout.addView(bannerView);

步骤二:获取广告

BannerView创建好之后,通过BannerView类的loadAd()方法来获取广告。

  1. import com.huawei.hms.ads.AdParam;
  2. import com.huawei.hms.ads.BannerAdSize;
  3. import com.huawei.hms.ads.banner.BannerView;
  4. public class MainActivity extends AppCompatActivity {
  5.    @Override
  6.    protected void onCreate(Bundle savedInstanceState) {
  7.        super.onCreate(savedInstanceState);
  8.        setContentView(R.layout.activity_main);
  9.        // 获取BannerView
  10.        BannerView bannerView = findViewById(R.id.hw_banner_view);
  11.        // 设置广告位ID和大小,"testw6vs28auh3"为专用的测试广告位ID
  12.        bannerView.setAdId("testw6vs28auh3");
  13.        bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_360_57);
  14.        // 创建广告请求,获取广告
  15.        AdParam adParam = new AdParam.Builder().build();
  16.        bannerView.loadAd(adParam);
  17.    }
  18. }

步骤三:监听广告事件(可选)

通过实现AdListener类中的方法来监听广告事件。

  1. bannerView.setAdListener(adListener);
  2. private AdListener adListener = new AdListener() {
  3.    @Override
  4.    public void onAdLoaded() {
  5.        // 广告获取成功调用
  6.    }
  7.    @Override
  8.    public void onAdFailed(int errorCode) {
  9.        // 广告获取失败时调用
  10.    }
  11.    @Override
  12.    public void onAdOpened() {
  13.        // 广告打开时调用
  14.    }
  15.    @Override
  16.    public void onAdClicked() {
  17.        // 广告点击时调用
  18.    }
  19.    @Override
  20.    public void onAdLeave() {
  21.        // 广告离开应用时调用
  22.    }
  23.    @Override
  24.    public void onAdClosed() {
  25.        // 广告关闭时调用
  26.    }
  27. };

了解详细方法,请参见API文档中的AdListener类。

2. 广告尺寸

常用的标准横幅广告尺寸如下表所示:

类型

尺寸(宽*高 以dp为单位)

说明

BANNER_SIZE_320_50

320x50

普通Banner广告,适用于手机设备。

BANNER_SIZE_320_10

320x100

大型Banner广告,适用于手机设备。

BANNER_SIZE_300_250

300x250

中矩形Banner广告,适用于手机设备。

BANNER_SIZE_360_57

360x57

普通Banner广告,适用于1080*170px的广告素材。

BANNER_SIZE_360_144

360x144

大型Banner广告,适用于1080*432px的广告素材。

BANNER_SIZE_SMART

屏幕宽度 x 32|50|90

自适应Banner广告,根据设备的宽高比自动调整广告尺寸,适用于手机设备。

注意:

在中国大陆区域暂只支持BANNER_SIZE_360_57和BANNER_SIZE_360_144。

3. Smart Banner

Smart Banner是一种在任何屏幕尺寸、任何屏幕方向的设备上展示与屏幕等宽的Banner广告。获取广告时HUAWEI Ads SDK会根据当前设备屏幕方向,创建与屏幕等宽的广告视图,而广告高度是根据当前屏幕方向的高度来决定。

Smart Banner可实现三种广告高度:

广告高度

屏幕高度

32dp

≤ 400dp

50dp

> 400dp 且 <= 720dp

90dp

> 720dp

在手机上,通常情况下当屏幕为纵向时Smart Banner广告高度为 50dp;当屏幕为横向时,广告高度为 32dp。在平板电脑上,不论屏幕是纵向还是横向,广告高度通常均为 90dp。

当广告图片素材不足以占据所分配的整个空间时,系统会居中放置图片,然后填充两侧剩余的空间。

使用Smart Banner时,需要将BannerView的广告尺寸指定常量BANNER_SIZE_SMART,并将宽度设置为match_parent,同时应考虑在不同设备上会存在不同的广告高度,需要将BannerView的高度设置为wrap_content。

注意:

Smart Banner广告在中国大陆区域暂未支持,中国大陆区域的用户可能不会收到Smart Banner广告。

4. 测试Banner广告

测试Banner广告时,需要使用专门的测试广告位ID来获取测试广告,以避免在测试过程中产生无效的广告点击量。Banner测试广告位ID仅作为功能调试使用,不可用于广告变现。开发者应在应用发布前申请真实的广告位ID并替换测试广告位ID。

以下表格中提供了Banner广告的专用测试广告位ID:

广告形式

展示形式

测试广告位ID

Banner

纯图

testw6vs28auh3

下载Banner广告的示例代码并运行,可以看到如下效果图:

搜索
请输入您想要搜索的关键词