菜单

原生广告

1. 原生广告

在继续之前，请确保已如上所述导入并初始化了SDK。

原生广告SDK的导入：

require("./AnyThinkAds/ATNativeJSSDK");

Android上需要注意的： 使用原生的视频广告必须在AndroidManifest开启硬件加速，处理方式如下：

<application
        android:hardwareAccelerated="true">
        ....
</application>

1.1 加载原生广告

您可以使用以下代码加载原生广告：

// 加载原生广告时需要传入广告展示的宽高
// 特别说明：如果是原生模板广告，传入的size跟后面展示的 nativeAdViewProperty.parent = size最好要一致，不然可能出现裁剪或显示不全的问题。
ATNativeJSSDK.loadNative(this.placementID(), ATNativeJSSDK.createLoadAdSize(cc.view.getFrameSize().width, cc.view.getFrameSize().width * 4/5));

注: 请继续阅读以了解如何在加载成功/失败事件时得到通知。

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

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

ATNativeJSSDK.hasAdReady(this.placementID());

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

ATNativeJSSDK.checkAdStatus(this.placementID());

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

1、isLoading：是否正在加载

2、isReady：是否有广告缓存

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

1.3 展示原生广告

您可以使用以下代码显示原生广告：

var frameSize = cc.view.getFrameSize();
var frameWidth = frameSize.width;
var frameHeight = frameSize.height;
var padding = frameSize.width / 35;

var parentWidth = frameWidth;
var parentHeight = frameWidth * 4/5;
var appIconSize = frameWidth/7;


var nativeAdViewProperty = new ATNativeJSSDK.AdViewProperty();
nativeAdViewProperty.parent = nativeAdViewProperty.createItemViewProperty(0, frameHeight - parentHeight,parentWidth,parentHeight,"#ffffff","",0);

nativeAdViewProperty.appIcon = nativeAdViewProperty.createItemViewProperty(0 ,parentHeight - appIconSize, appIconSize ,appIconSize ,"","",0);

nativeAdViewProperty.cta = nativeAdViewProperty.createItemViewProperty(parentWidth-appIconSize*2 ,parentHeight - appIconSize ,appIconSize*2 ,appIconSize ,"#2095F1" ,"#ffffff" , appIconSize/3);

nativeAdViewProperty.mainImage = nativeAdViewProperty.createItemViewProperty(padding ,padding, parentWidth-2*padding ,parentHeight - appIconSize - 2*padding,"#ffffff","#ffffff",14);

nativeAdViewProperty.title = nativeAdViewProperty.createItemViewProperty(appIconSize + padding ,parentHeight - appIconSize , parentWidth - 3* appIconSize -2 * padding ,appIconSize/2 ,"" ,"#000000" , appIconSize/3);

nativeAdViewProperty.desc = nativeAdViewProperty.createItemViewProperty(appIconSize + padding ,parentHeight - appIconSize/2 , parentWidth - 3* appIconSize -2 * padding ,appIconSize/2 ,"#ffffff" ,"#000000" , appIconSize/4);

// nativeAdViewProperty.adLogo = nativeAdViewProperty.createItemViewProperty(0,0,0,0,"#ffffff","#ffffff",14);
nativeAdViewProperty.elements = nativeAdViewProperty.createItemViewProperty(0, parentHeight - appIconSize/2, parentWidth, appIconSize/2,"#7f000000", "#ffffff",14) 

//Show Ad
ATNativeJSSDK.showAd(this.placementID(), nativeAdViewProperty);

//使用广告场景时调用以下代码：
// ATNativeJSSDK.showAdInScenario(this.placementID(), nativeAdViewProperty, <you scenario id>);

ATNativeJSSDK.AdViewProperty里的属性说明：

•parent：控制的是Native的总体大小，如下图红圈区域：

•appIcon : appIcon属性控制广告的图标属性，如下图1所示：

•mainImage: mainImage控制广告的封面图，如下图2所示：

•title: title控制广告标题，如下图3所示：

•desc : desc控制广告描述文字，如下图4所示

•adLogo : adLogo控制广告标识属性，如下图5所示. 注意：有的平台的广告标识位置是内部固定，不支持开发者指定，比如Admob。

•cta: cta控制点击按钮，如下图6所示

•dislike：关闭按钮

·elementsView：（v6.2.37新增）apk六要素（仅Android中国区SDK生效）

注：上述Native广告元素有返回时均需要渲染

createItemViewProperty(x, y, width, height, backgroundColor, textColor, textSize)函数说明：

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

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

（3）width: 宽度

（4）height: 高度

（5）backgroundColor: 背景颜色

（6）textColor: 字体颜色（只针对有Text的View有效）

（7）textSize: 字体大小（只针对有Text的View有效）

（8）isCustomClick: （v5.7.24新增）是否点击时直接下载（只针对Android且只针对腾讯广告平台的应用类广告有效）

1.3.1 关于颜色的透明的设置：

•Android：可直接在原来设置的设置增加alpha的两位16进制的值即可，比如设置色值“#ffffff”的透明度为0，就设置成“#00ffffff”，这样颜色就是完全透明，透明的值可根据实际情况调整。

•iOS：只能通过设置字符串：“clearColor” 来指定完全透明的颜色，不支持颜色的半透明设置。

1.3.2 关于宽高的设置

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

1.3.3 关于展示原生模板广告注意点

原生模板广告通过设置

var nativeAdViewProperty = new ATNativeJSSDK.AdViewProperty();
// 控制广告整体大小，最好是跟load时传入的size一致，或根据效果进行调整。
nativeAdViewProperty.parent = nativeAdViewProperty.createItemViewProperty(0, frameHeight - parentHeight,parentWidth,parentHeight,"#ffffff","",0);

如果要从屏幕上删除原生广告，请使用以下代码：

ATNativeJSSDK.removeAd(this.placementID());

1.4 实现原生广告的Listener

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

var nativeAdListner = {
    //广告加载成功
    onNativeAdLoaded : function (placementId) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdLoaded(" + placementId + ")");
    },
    //广告加载失败
    onNativeAdLoadFail : function(placementId, errorInfo) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdLoadFail(" + placementId + ", " + errorInfo + ")");   
    },
    //广告展示成功
    onNativeAdShow : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdShow(" + placementId + ", " + callbackInfo + ")");
    },
    //广告被点击
    onNativeAdClick : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdClick(" + placementId + ", " + callbackInfo + ")");
    },
    //广告视频开始播放，部分广告平台有此回调
    onNativeAdVideoStart : function(placementId) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdVideoStart(" + placementId + ")");
    },
    //广告视频结束播放，部分广告平台有此回调
    onNativeAdVideoEnd : function(placementId) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdVideoEnd(" + placementId + ")");
    },
    //广告关闭按钮被点击，部分广告平台有此回调
    onNativeAdCloseButtonTapped : function(placementId, callbackInfo) {
        ATJSSDK.printLog("AnyThinkNativeDemo::onNativeAdCloseButtonTapped(" + placementId + ", " + callbackInfo + ")"); 
    }

    ATNativeJSSDK.setAdListener(nativeAdListner);
}

注:可查看Demo的AnyThinkNativeDemoJS.js使用 demo project.

最近修改: 2025-05-30Powered by

大纲