广告服务（插屏广告集成- JavaScript）

简介

插屏广告是一种在应用开启、暂停或退出时以全屏的形式弹出的广告形式，展示时机巧妙避开用户对应用的正常体验，尺寸大，曝光效果好。

此codelab将引导您在H5页面中增加插屏广告的展示。在整个过程中，将介绍如何添加代码的详细过程以正确展示插屏广告。

您将建立什么

您将在您的应用中通过HUAWEI Ads JavaScript API获取插屏广告和展示插屏广告。

您将会学到什么

如何在应用的H5页面中集成HUAWEI Ads JavaScript API。
如何在H5页面中获取插屏广告并展示。

硬件要求

支持EMUI 4.0及以上的华为手机、华为平板。

软件要求

JDK 1.7及以上
安装Android Studio 3.X及以上
- minSdkVersion 21及以上
- targetSdkVersion 31（推荐）
- compileSdkVersion 31（推荐）
- Gradle 4.1及以上（推荐）
HMS Core（APK）版本在6.0.0.300及以上
查看方法：设备上点击"设置 > 应用 > 应用管理"搜索HMS Core。

需要的知识点

Android和JavaScript基础开发能力。

在Android Studio中创建项目

打开Android Studio。
创建新项目，选择"Empty Activity"，命名为"InterstitialExample"。
点击"完成"。

配置HUAWEI VAST SDK仓库及依赖包

配置Maven仓地址。

Android Studio的代码库配置在Gradle 插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle 插件版本，选择对应的配置过程。

7.0以下版本

7.0版本

7.1及以上版本

7.0以下版本
i. 打开Android Studio项目级"build.gradle"文件。

ii. 添加Maven代码库。

在"buildscript > repositories"中配置Maven仓地址。
在"allprojects > repositories"中配置Maven仓地址。


buildscript { 
    repositories { 
        google() 
        jcenter() 
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven {url 'https://developer.huawei.com/repo/'} 
    } 
} 
 
allprojects { 
    repositories { 
        google() 
        jcenter() 
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven {url 'https://developer.huawei.com/repo/'} 
    } 
}

7.0版本
i. 打开Android Studio项目级"build.gradle"文件。

ii. 添加Maven代码库。

在"buildscript > repositories"中配置Maven仓地址。


buildscript { 
    repositories { 
        google() 
        jcenter() 
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven {url 'https://developer.huawei.com/repo/'} 
    } 
}

iii. 打开项目级"settings.gradle"文件，配置Maven仓地址。


dependencyResolutionManagement { 
    ... 
    repositories { 
        google() 
        jcenter()  
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven {url 'https://developer.huawei.com/repo/'} 
    } 
}

7.1及以上版本
打开项目级"settings.gradle"文件，配置Maven仓地址。


pluginManagement { 
    repositories { 
        gradlePluginPortal() 
        google() 
        mavenCentral() 
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven { url 'https://developer.huawei.com/repo/' } 
    } 
} 
dependencyResolutionManagement { 
    ... 
    repositories { 
        google() 
        mavenCentral() 
        // 配置HUAWEI Ads SDK的Maven仓地址 
        maven { url 'https://developer.huawei.com/repo/' } 
    } 
}

在应用级"build.gradle"文件中配置依赖包，需添加下面内容，并将{version}替换为实际的HUAWEI Ads SDK版本号，请参见版本更新说明。
```
dependencies { 
    ... 
    implementation 'com.huawei.hms:ads-lite:{version}'     
    ... 
}
```
点击"Sync Now"等待同步完成。

配置混淆脚本

您编译APK前需要配置不要混淆HUAWEI Ads SDK，避免功能异常。
打开Android工程应用级根目录下的"app/proguard-rules.pro"混淆配置文件，添加如下两行代码，加入排除HUAWEI Ads SDK的混淆配置。


-keep class com.huawei.openalliance.ad.** { *; } 
-keep class com.huawei.hms.ads.** { *; }

如果您需要通过HUAWEI Ads JavaScript API获取广告，您必须先在WebView中注册JavaScript Bridge对象。在WebView基础上，通过JavaScript Bridge对象，建立HUAWEI Ads JavaScript API和HUAWEI Ads SDK桥接。


...  
import com.huawei.hms.ads.jsb.PPSJsBridge;  
import com.huawei.hms.ads.jsb.JsbConfig; 
...  
     
public class MainActivity extends AppCompatActivity {  
    ...  
    private void initWebView() {  
        // 初始化JavaScript Bridge配置 
        PPSJsBridge.init(new JsbConfig.Builder() 
            .enableUserInfo(true) 
            .enableLog(true) 
            .build()); 
        // 注入JavaScript Bridge对象到WebView 
        mJsBridge = new PPSJsBridge(mWebview); 
        ...  
    }  
    @Override  
    protected void onDestroy() {  
        // 销毁JavaScript Bridge对象 
        mJsBridge.destroy(); 
        ...  
    }  
    ...  
}

集成HUAWEI Ads JavaScript API，H5页面需嵌入如下代码：


<script src="https://h5hosting.dbankcdn.com/cch5/pps-jssdk/mobile/ppsads.js"></script>

HUAWEI Ads JavaScript API提供createInterstitialAd方法，用于创建插屏广告对象，并通过此方法设置测试广告位ID。在"assets/js"目录下新增"interstitial.js"文件，并在文件添加以下代码：


requestBtn.addEventListener("click",  () => {     
    loadInterstitialAd(getSlotId());   
},false); 
function loadInterstitialAd(slotId) { 
    // 创建插屏广告对象，设置测试广告位ID 
    interstitialAd = ppsads.createInterstitialAd({ 
        slotId: slotId 
    }); 
    ... 
} 
function getSlotId() { 
    for (i = 0; i < slotRadios.length; i++) { 
        if (slotRadios[i].checked) { 
            return slotRadios[i].value;     
        }   
    } 
    return null; 
}

调用InterstitialAd对象的load()方法来获取广告。示例代码如下：


function loadInterstitialAd(slotId) { 
    // 创建插屏广告对象，设置测试广告位ID 
    interstitialAd = ppsads.createInterstitialAd({ 
        slotId: slotId 
    }); 
    interstitialAd.load(); 
    ... 
}

调用InterstitialAd对象的onLoad等方法可以监听广告的状态。示例代码如下：


  ... 
// 获取广告成功监听 
interstitialAd.onLoad(()=>{ 
    $Toast.show("onLoad callback"); 
}); 
// 获取广告失败监听 
interstitialAd.onError( errorCode => { 
    $Toast.show("onError: " + errorCode); 
}); 
// 广告展示监听 
interstitialAd.onShow(()=>{ 
     $Toast.show("onShow callback"); 
}); 
// 广告关闭监听 
interstitialAd.onClose(()=>{ 
    $Toast.show("onClose callback"); 
}) 
...

调用InterstitialAd的show()方法来显示广告，在此之前需要调用isLoaded()方法来确认广告已经加载完成。示例代码如下：


// 展示插屏广告 
if (!interstitialAd&& interstitialAd.isLoaded()) { 
     interstitialAd.show(); 
} else { 
     $Toast.show("Ad did not load"); 
}

运行项目后，您将会在应用中看到插屏广告：

祝贺您，您已经成功完成了codelab并学到了：

如何在应用的H5页面中集成HUAWEI Ads JavaScript API。
如何在H5页面中获取插屏广告并展示。

您可以阅读相关链接，了解更多的信息：开发指南、API文档、FAQ。
您还可以点击源码下载。

Code copied