Descripción del problema:
H5 Quick Game actualmente no tiene una interfaz API de publicidad abierta, cómo lograr el acceso a los servicios publicitarios
análisis del problema:
El servicio de publicidad actual solo admite aplicaciones rápidas y juegos rápidos en tiempo de ejecución. Los juegos rápidos H5 temporalmente no admiten el acceso directo a la interfaz de publicidad. Actualmente, se proporciona una solución temporal para resolver este problema. Puede utilizar el componente web en la página de ux del juego rápido y la página web del juego H5. Se realiza el mecanismo de comunicación. La función de ciclo de vida onMessage de la página ux recibe el mensaje de la página H5 y luego accede a la interfaz API de publicidad de la aplicación rápida para obtener la información publicitaria (solo se admiten la publicidad nativa y la publicidad en video recompensada), y finalmente la información publicitaria adquirida se transmite a este. $ Elemento (' web '). postMessage ({mensaje: JSON.stringify (resultado)}); Enviar a la página H5.
Solución:
Se recomienda escribir un paquete de funciones separado para el proceso de creación y solicitud de anuncios, no en la función de ciclo de vida onInit o onMessage. Esto se debe a que la función onInit se llama cuando se inicializa la página, la velocidad de carga es rápida y no es adecuada para procesar lógica compleja; la función onMessage solo es responsable de Reciba el mensaje de cadena pasado por la página web H5, agregue la rama de juicio y llame a la función correspondiente para pasar por el flujo de procesamiento de publicidad correspondiente.
Nota: El marco actual de la aplicación rápida solo admite la creación de objetos publicitarios en la función onInit. Actualmente no admite la creación en funciones como onMessage. Mantenga la posición del código de bloque sin cambios.
Código de muestra de aplicación rápida ux:
<template>
<div class="doc-page">
<web class="web-page" src="{{webUrl}}" type="game" trustedurl="{{list}}" onpagestart="onPageStart"
useragent="default"
onmessage="onMessage"
fullscreendirection="{{fullscreenDirection}}"
jumppolicy="{{linkJumpPolicy}}"
multiwindow="{{openMultiwindow}}"
onpagefinish="onPageFinish"
ontitlereceive="onTitleReceive"
onerror="onError"
id="web"
allowthirdpartycookies="{{allowThirdPartyCookies}}">
</web>
</div>
</template>
<style>
.doc-page {
flex-direction: column;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.web-page {
width: 100%;
height: 100%;
}
</style>
<script>
import router from "@system.router"
import prompt from '@system.prompt'
import ad from "@service.ad"
let nativeAd
let rewardedVideoAd
export default {
props: ['websrc'],
data: {
native: {
adUnitId: 'testu7m3hc4gvm',
adData: {},
errStr: '',
},
rewarded: {
adUnitId: 'testx9dtjwj8hp',
isShow: 'false',
errStr: ''
},
title: "",
// TODO Replace the link to the H5 game
webUrl: "http://127.0.0.1:8088/wwz/h5_ad_demo.html",
// Attribute allowthirdpartycookies, indicates whether cookies can be delivered in cross-domain mode.
// If you need login Google Account or Other Account, Please set TRUE.
allowThirdPartyCookies: true,
//Attribute fullscreendirection,controls the direction when the webpage requests full screen.
//If you want the full screen orientation to be vertical, please set it to portrait.
//The default value is landscape
fullscreenDirection: "landscape",
//If you want the ads in the game to be opened in the browser, please set the value of openMultiwindow
// to true and the value of linkJumpPolicy to browser
linkJumpPolicy: "default",
openMultiwindow: false,
// Here the whitelist settings, when the loading page has multiple addresses, such as the successful loading of the login address and the inconsistent entry address, it needs to set the whitelist to do so.
list: ["new RegExp('https?.*')"],
},
onInit: function () {
console.info("onInit");
//当前快应用框架只支持在onInit函数中创建广告对象，暂不支持在onMessage等函数中创建，请保持该块代码位置不变
nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })
rewardedVideoAd = ad.createRewardedVideoAd({ adUnitId: this.rewarded.adUnitId })
},
onPageStart(e) {
console.info('pagestart: ' + e.url)
},
// Each page switch triggers
onPageFinish(e) {
console.info('pagefinish: ' + e.url, e.canBack, e.canForward)
},
onTitleReceive(e) {
this.title = e.title;
},
onError(e) {
console.info('pageError : ' + e.errorMsg)
},
onMessage(e) {
console.info('onmessage e = ' + e.message + ", url = " + e.url);
prompt.showToast({
message: e.message + ': ' + e.url
})
var msg=e.message;
if(msg==='requestNativeAd'){
if(this.isSupportAd()){
this.requestNativeAd();
}
}else if(msg==='requestRewardAd'){
if(this.isSupportAd()){
this.requestRewardedAd();
}
}else if(msg==='reqReportNativeAdShow'){
this.reportNativeShow();
}else if(msg==='reqReportNativeAdClick'){
this.reportNativeClick();
}
},
isSupportAd:function(){
let provider = ad.getProvider();
if(provider==='huawei'){
return true;
}
return false ;
},
requestNativeAd() {
console.info("requestNativeAd");
nativeAd.onLoad((data) => {
console.info('nativeAd data loaded: ' + JSON.stringify(data));
this.native.adData = data.adList[0];
if (this.native.adData) {
let nativeAdObj={"nativeAdData":data};
let nativeAdMsg=JSON.stringify(nativeAdObj);
console.info("requestNativeAd onload nativeAdMsg= "+nativeAdMsg);
let senddata={"message":nativeAdMsg};
this.$element('web').postMessage(senddata);
}
})
nativeAd.onError((e) => {
console.error('load ad error:' + JSON.stringify(e));
let nativeAdErrorObj={"nativeAdDataError":e};
let nativeAdErrorMsg=JSON.stringify(nativeAdErrorObj);
console.info("requestNativeAd onError nativeAdErrorMsg= "+nativeAdErrorMsg);
let errordata={"message":nativeAdErrorMsg};
this.$element('web').postMessage(errordata);
})
nativeAd.load()
},
reportNativeShow() {
nativeAd.reportAdShow({ 'adId': this.native.adData.adId })
},
reportNativeClick() {
nativeAd.reportAdClick({ 'adId': this.native.adData.adId })
},
requestRewardedAd() {
console.info("requestRewardedAd");
/**设置广告加载成功回调,然后调用广告show方法展示广告 */
rewardedVideoAd.onLoad(() => {
console.info("rewarded video ad onLoad");
rewardedVideoAd.show();
})
rewardedVideoAd.offLoad(() => {
console.info("rewarded video ad offLoad");
})
/**监听激励视频广告错误事件。 */
rewardedVideoAd.onError((e) => {
console.error('load rewarded video ad error:' + JSON.stringify(e));
this.rewarded.errStr = JSON.stringify(e)
})
/**监听激励视频广告关闭事件 */
rewardedVideoAd.onClose(() => {
console.info("rewarded video ad onClose");
})
rewardedVideoAd.load();
},
onDestroy() {
nativeAd && nativeAd.destroy()
rewardedVideoAd && rewardedVideoAd.destroy()
},
isCanForward() {
this.$element('web').canForward({
callback: function (e) {
if (e) {
this.$element('web').forward();
}
}.bind(this)
})
},
isCanBack() {
this.$element('web').canBack({
callback: function (e) {
if (e) {
this.$element('web').back();
} else {
router.back();
}
}.bind(this)
})
},
onShow: function () {
console.info("onshow");
},
onHide: function () {
console.info("onHide");
},
onBackPress() {
this.isCanBack();
return true
}
}
</script>Para obtener más preguntas frecuentes y casos de acceso a anuncios, consulte:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-access-ads-kit
Se adjunta un archivo HTML de muestra:
<!-- saved from url=(0060)file:///C:/Users/L00504~1/AppData/Local/Temp/h5_ad_demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ad Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.dataintable {
margin-top:10px;
border-collapse:collapse;
border:1px solid #aaa;
width:100%;
}
table.dataintable th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#d5d5d5;
border:1px solid #aaa;
text-align:left;
}
table.dataintable td {
vertical-align:text-top;
padding:6px 15px 6px 6px;
background-color:#efefef;
border:1px solid #aaa;
}
</style>
<script language="javascript">
system.onmessage = function(data) {
console.info("onmessage data="+data);
setResult(data);
var adDataObject=JSON.parse(data);
if(adDataObject.nativeAdData){
var nativeAdList=adDataObject.nativeAdData.adList[0];
if(nativeAdList){
if (nativeAdList.imgUrlList) {
var imgSrc=nativeAdList.imgUrlList[0];
document.getElementById("adImage").src= imgSrc;
console.info('ad data adImgSrc: ' +imgSrc);
}
}
}
}
function reportNativeShow() {
system.postMessage("reqReportNativeAdShow");
}
function reportNativeAdClick() {
console.info("reportNativeAdClick");
system.postMessage("reqReportNativeAdClick");
}
function getNativeAd(){
system.postMessage("requestNativeAd");
}
function getRewardAd(){
system.postMessage("requestRewardAd");
}
function setResult(str) {
document.getElementById("nativeAdDataResult").innerHTML= str
}
function setResultnew(str) {
document.getElementById("resultnew").innerHTML= str
}
function onLoadSuc(){
console.info("onLoadSuc");
reportNativeShow();
}
function openNewWeb(){
system.go("https://www.huawei.com")
}
function openNewWindow(){
window.open("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<p>
H5 ad demo
</p>
<p>
ResultNativeAd: <br> <span id="nativeAdDataResult" style="height:100px;">(unknown)</span>
</p>
<p>
ResultRewardAd: <br> <span id="resultnew" style="height:100px;">(unknown)</span>
</p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p><button onclick="getNativeAd()">Native Ad</button></p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p><button onclick="getRewardAd()">Reward Ad</button></p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p>
<img src="file:///C:/i/eg_tulip.jpg" id="adImage" alt="test ad" onclick="reportNativeAdClick()" onload="onLoadSuc()">
</p><hr style="height:3px;border:none;border-top:3px double red;">
<p></p>
</body></html>Enlace original:https://developer.huawei.com/consumer/cn/forum/topic/0204404950119480220?fid=18
Autor: Mayism