横幅广告

1. 横幅广告

Banner广告SDK的导入：

require("./AnyThinkAds/ATBannerJSSDK"); 

1.1 加载横幅广告

使用以下代码加载Banner广告

//v5.6.8新增
var setting = {};
setting[ATBannerJSSDK.kATBannerAdLoadingExtraBannerAdSizeStruct] =                ATBannerJSSDK.createLoadAdSize(cc.view.getFrameSize().width, 150);
//只针对Admob的自适应banner
setting[ATBannerJSSDK.kATBannerAdAdaptiveWidth] = cc.view.getFrameSize().width;
setting[ATBannerJSSDK.kATBannerAdAdaptiveOrientation] = ATBannerJSSDK.kATBannerAdAdaptiveOrientationCurrent;
// setting[ATBannerJSSDK.kATBannerAdAdaptiveOrientation] = ATBannerJSSDK.kATBannerAdAdaptiveOrientationPortrait;
// setting[ATBannerJSSDK.kATBannerAdAdaptiveOrientation] = ATBannerJSSDK.kATBannerAdAdaptiveOrientationLandscape;

ATBannerJSSDK.loadBanner(this.placementID(), setting);

ATBannerJSSDK.createLoadAdSize(width, height)函数说明：

•width：Banner展示区域的宽度

•height：Banner展示区域的高度

注意：加载Banner广告时必须传入改参数设置，否则会出现Banner不能达到预期展示效果。

请继续阅读以了解如何获得有关Banner广告事件的通知，例如加载成功/失败，展示和点击。

1.2 判断是否有广告缓存以及获取广告状态

使用以下代码判断是否有广告缓存：

ATBannerJSSDK.hasAdReady(this.placementID());

使用以下代码获取广告状态（返回值类型为Json字符串）：

ATBannerJSSDK.checkAdStatus(this.placementID());

广告状态Json字符串key-value如下：

1、isLoading：是否正在加载

2、isReady：是否有广告缓存

3、adInfo：当前优先级最高的广告缓存信息

1.3 展示横幅广告

目前可以用两种方法来展示banner广告。

1.3.1 用预定义的位置来展示横幅广告

1）把banner展示在屏幕顶部

ATBannerJSSDK.showAdInPosition(this.placementID(), ATBannerJSSDK.kATBannerAdShowingPositionTop);

2）把banner展示在屏幕底部

ATBannerJSSDK.showAdInPosition(this.placementID(), ATBannerJSSDK.kATBannerAdShowingPositionBottom);

当使用预定义位置来展示banner广告的时候，AnyThinkSDK已经考虑了刘海屏等Safe Area相关空白区域了。

3）使用广告场景时，调用以下代码：

ATBannerJSSDK.showAdInPositionAndScenario(this.placementID(), ATBannerJSSDK.kATBannerAdShowingPositionBottom, <you scenario id>);

1.3.2 用位置和宽高属性来展示横幅广告

ATBannerJSSDK.showAdInRectangle(this.placementID(), ATBannerJSSDK.createShowAdRect(0, 0, cc.view.getFrameSize().width, 60 * cc.view.getFrameSize().height/800));

//（v5.7.24新增） 使用广告场景时
//ATBannerJSSDK.showAdInRectangleAndScenario(this.placementID(), ATBannerJSSDK.createShowAdRect(0, 0, cc.view.getFrameSize().width, 60 * cc.view.getFrameSize().height/800), <you scenario id>);

ATBannerJSSDK.createShowAdRect(x, y, width, height)函数说明：

（1）x:横坐标位置（以左上角为原点）

（2）y:纵坐标位置（以左上角为原点）

（3）width: 宽度

（4）height: 高度

1.3.2.1 关于宽高的设置

通过使用 cc.view.getFrameSize(); 来获取屏幕的宽高，尽通过使用宽高比来进行元素的位置以及宽高的设置，避免固定像素导致在其他手机出现变形，具体可参考Demo。

如果需要，请使用以下代码从屏幕上移除Banner：

ATBannerJSSDK.removeAd(this.placementID());

如果您只想暂时隐藏 Banner（而不是从屏幕上移除），请在此处使用代码：

ATBannerJSSDK.hideAd(this.placementID());

隐藏Banner后，可以使用以下代码重新显示它：

ATBannerJSSDK.reShowAd(this.placementID());

1.4 实现横幅的监听器

要获得有关各种Banner广告事件（加载成功/失败，展示和点击）的通知，示例代码如下（全局只能设置一个监听对象）：

var bannerListener = {
    //广告加载成功
    onBannerAdLoaded : function (placementId) {
         ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdLoaded(" + placementId + ")");
    },
    //广告加载失败
    onBannerAdLoadFail : function(placementId, errorInfo) {
        ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdLoadFail(" + placementId + ", " + errorInfo + ")");   
    },
    //广告展示成功
    onBannerAdShow : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdShow(" + placementId  + ", " + callbackInfo + ")");
    },
    //广告被点击
    onBannerAdClick : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdClick(" + placementId  + ", " + callbackInfo + ")");
    },
    //广告自动刷新成功
    onBannerAdAutoRefresh : function(placementId, callbackInfo) {
       ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdAutoRefresh(" + placementId  + ", " + callbackInfo + ")");
    },
    //广告自动刷新失败
    onBannerAdAutoRefreshFail : function(placementId, errorInfo) {
        ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdAutoRefreshFail(" + placementId + ", " + errorInfo + ")");   
    },
    //广告关闭按钮被点击
    onBannerAdCloseButtonTapped : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkBannerDemo::onBannerAdCloseButtonTapped(" + placementId  + ", " + callbackInfo + ")");
    }   
};

ATBannerJSSDK.setAdListener(bannerListener);

注: 可查看我们Demo的AnyThinkBannerDemoJS.cs demo project.