请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

一个页面中存在多个广告时,只有最后一个广告点击能跳...

1
回复
421
查看
[复制链接]

46

主题

47

帖子

465

积分

 楼主| 2021-7-23 09:31:04 显示全部楼层 |阅读模式

现象描述

一个页面存在多个原生广告子组件时,只有最后一个原生广告点击能跳转落地页。

问题代码如下。

广告子组件nativeAd.ux代码:

<template>
<div>
<div>
<image src="{{native.adImgSrc}}" @click="reportNativeClick"></image>
<div if="isShow">
<div>
<text if="isShowTitle">{{native.title}}</text>
<div>
<text if="isShowSource">{{native.source}}</text>
<text>广告</text>
</div>
</div>
<div if="native.creativeType === 3" @click="reportNativeClick">
<image src="../../assets/img/Public_qus.png"></image>
<text>{{native.btnTxt}}</text>
</div>
<div if="native.creativeType > 100">
<input type="button" />
<div style="{{progress}}"></div>
<text>{{native.btnTxt}}</text>
</div>
</div>
</div>
</div>
</template>
<style>
  .item-container {
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
  .img{
    width: 100%;
    background-size: cover;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .container {
    width: 100%;
    padding: 8px 12px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background-color: #fff;
  }
  .container-left {
    flex-direction: column;
    flex: 1;
  }
  .title {
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    lines: 1;
    text-overflow: ellipsis;
  }
  .source {
    text {
      font-size: 12px;
      color: #999;
    }
  }
  .known-more-btn {
    flex-direction: row;
    align-content: center;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background-color: rgba(#FF7500, 0.1);
    padding: 6px 10px;
    margin-right: 8px;
    text {
      color: #FF7500;
      font-size: 12px;
    }
    image {
      margin-right: 5px;
    }
  }
  .ad-btn {
    width: 60px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    margin-right: 8px;
  }
  .btn {
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #FF7500;
    border-radius: 14px;
    background-color: rgba(#FF7500, 0.2);
  }
  .btn-text {
    font-size: 12px;
    color: #FF7500;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    text-align: center;
  }
  .progress {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(#fff, 0.3);
  }
  .more {
    width: 24px;
    height: 24px;
    background-size: contain;
    opacity: 0.6;
    transform:rotate(90deg);
  }
  .not-like {
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    position: absolute;
    bottom: 50px;
    right: 16px;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
    background-color: #fff;
    border: 1px solid #ddd;
  }
</style>
<script>
  import ad from "@service.ad";
  let TAG = "nativeAd";
  let nativeAd;
  export default {
    data: {
      componentName: "ad",
      provider: "",
      isShow: false,
      isShowAd: true,
      style: {},
      isShowLike: false,
      isShowTitle: false,
      isShowSource: false,
      progress: {},
      native: {
        adId: "",
        title: "",
        source: "",
        adImgSrc: "",
        btnTxt: "",
        creativeType: null,
        adData: {},
        adUnitId: "testb65czjivt9", //大图文广告类型 testu7m3hc4gvm; 大图文带下载按钮 testb65czjivt9
      }
    },
    props: {
      advertId: String, //@default: ''  description: 广告ID
    },
    onInit() {
      this.$page.setTitleBar({ text: "Native Ad" });
    },
    onReady() {
      this.showNativeAd();
    },
    showNativeAd() {
      //获取服务提供商 如果获取到的 不是“huawei”,则表示不支持广告。
      this.provider = ad.getProvider();
      if (this.provider !== "huawei") {
        return;
      }
      //创建广告组件
      nativeAd = ad.createNativeAd({ adUnitId: this.advertId });
      nativeAd.onLoad(data => {
        //成功回调
        this.native.adData = data.adList[0];
        if (this.native.adData) {
          if (this.native.adData.imgUrlList && this.native.adData.imgUrlList.length > 0) {
            this.native.adImgSrc = this.native.adData.imgUrlList[0];
          } else {
            this.native.adImgSrc = "";
            this.isShowAd = false;
          }
          this.native.creativeType = this.native.adData.creativeType || null;
          this.native.title = this.native.adData.title || "";
          this.native.adId = this.native.adData.adId || "";
          if (!this.native.title) {
            //标题为空时不显示
            this.isShowTitle = false;
          }
          if (!this.native.adData.source) {
            //来源为空时不显示 “广告”两个字就顶格显示
            this.isShowSource = false;
          } else {
            this.native.source = this.native.adData.source + ' '
          }
          if (this.native.creativeType === 3) {
            //大图文广告类型
            if (this.native.adData.clickBtnTxt) {
              this.native.btnTxt = this.native.adData.clickBtnTxt;
            } else {
              this.native.btnTxt = "了解详情";
            }
          }
          if (this.native.creativeType === 103) {
            //大图文带下载按钮
            if (this.native.adData.clickBtnTxt) {
              this.native.btnTxt = this.native.adData.clickBtnTxt;
            } else {
              this.native.btnTxt = "下载";
            }
          }
          this.isShowTitle = true;
          this.isShowSource = true;
          this.reportNativeShow();
        }
      });
      nativeAd.onError(e => {
        console.error(TAG," load ad fail:" + JSON.stringify(e));
        //失败回调
        this.isShowAd = false;
      });
      //获取广告数据
      nativeAd.load();
    },
    reportNativeShow() {
      if (nativeAd) {
        console.log(TAG,"nativeAd reportAdShow");
        nativeAd.reportAdShow({ adId: this.native.adId });
      }
    },
    reportNativeClick() {
      console.log(TAG,"nativeAd reportAdClick");
      nativeAd.reportAdClick({
        adId: this.native.adId
      });
    },
    onDestroy() {
      if (nativeAd) {
        //销毁广告组件 取消下载
        nativeAd.destroy();
        nativeAd.cancelDownload({
          adId: this.native.adId
        });
      }
    },
  };
</script>

页面hello.ux代码:

<import name="native-ad" src="../compoment/nativeAd.ux"></import>
<template>
<!-- Only one root node is allowed in template. -->
<div>
<native-ad advert-id="testu7m3hc4gvm"></native-ad>
<native-ad advert-id="testu7m3hc4gvm"></native-ad>
</div>
</template>
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 100px;
  }
</style>
<script>
  module.exports = {
    data: {
      componentData: {},
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    }
  }
</script>


回复

使用道具 举报

23

主题

142

帖子

825

积分

2021-7-23 12:46:23 显示全部楼层

问题分析

此问题与广告对象nativeAd定义有关,该对象定义为页面全局对象,导致ad.createNativeAd接口创建的对象被最新的创建结果覆盖。由于每个广告组件返回的adId值不一样,当点击上一个广告时,引擎内部获取不到对应的对象,导致无法响应。

解决方法

在子组件中将广告对象nativeAd绑定到this对象上,即可实现独立的对象,不会被覆盖。修改nativeAd.ux代码如下:

<script>
  import ad from "@service.ad";
  let TAG = "nativeAd";
 // let nativeAd;
  export default {
    data: {
      componentName: "ad",
      provider: "",
      isShow: false,
      isShowAd: true,
      style: {},
      isShowLike: false,
      isShowTitle: false,
      isShowSource: false,
      progress: {},
      native: {
        adId: "",
        title: "",
        source: "",
        adImgSrc: "",
        btnTxt: "",
        creativeType: null,
        adData: {},
        adUnitId: "testb65czjivt9", //大图文广告类型 testu7m3hc4gvm; 大图文带下载按钮 testb65czjivt9
      }
    },
    props: {
      advertId: String, //@default: ''  description: 广告ID
    },
    onInit() {
      this.$page.setTitleBar({ text: "Native Ad" });
    },
    onReady() {
      this.showNativeAd();
    },
    showNativeAd() {
      //获取服务提供商 如果获取到的 不是“huawei”,则表示不支持广告。
      this.provider = ad.getProvider();
      if (this.provider !== "huawei") {
        return;
      }
      //创建广告组件
     this.nativeAd = ad.createNativeAd({ adUnitId: this.advertId });
      this.nativeAd.onLoad(data => {
        //成功回调
        this.native.adData = data.adList[0];
        if (this.native.adData) {
          if (this.native.adData.imgUrlList && this.native.adData.imgUrlList.length > 0) {
            this.native.adImgSrc = this.native.adData.imgUrlList[0];
          } else {
            this.native.adImgSrc = "";
            this.isShowAd = false;
          }
          this.native.creativeType = this.native.adData.creativeType || null;
          this.native.title = this.native.adData.title || "";
          this.native.adId = this.native.adData.adId || "";
          if (!this.native.title) {
            //标题为空时不显示
            this.isShowTitle = false;
          }
          if (!this.native.adData.source) {
            //来源为空时不显示 “广告”两个字就顶格显示
            this.isShowSource = false;
          } else {
            this.native.source = this.native.adData.source + ' '
          }
          if (this.native.creativeType === 3) {
            //大图文广告类型
            if (this.native.adData.clickBtnTxt) {
              this.native.btnTxt = this.native.adData.clickBtnTxt;
            } else {
              this.native.btnTxt = "了解详情";
            }
          }
          if (this.native.creativeType === 103) {
            //大图文带下载按钮
            if (this.native.adData.clickBtnTxt) {
              this.native.btnTxt = this.native.adData.clickBtnTxt;
            } else {
              this.native.btnTxt = "下载";
            }
          }
          this.isShowTitle = true;
          this.isShowSource = true;
          this.reportNativeShow();
        }
      });
      this.nativeAd.onError(e => {
        console.error(TAG," load ad fail:" + JSON.stringify(e));
        //失败回调
        this.isShowAd = false;
      });
      //获取广告数据
      this.nativeAd.load();
    },
    reportNativeShow() {
      if (this.nativeAd) {
        console.log(TAG,"nativeAd reportAdShow");
        this.nativeAd.reportAdShow({ adId: this.native.adId });
      }
    },
    reportNativeClick() {
      console.log(TAG,"nativeAd reportAdClick");
      this.nativeAd.reportAdClick({
        adId: this.native.adId
      });
    },
    onDestroy() {
      if (this.nativeAd) {
        //销毁广告组件 取消下载
        this.nativeAd.destroy();
        this.nativeAd.cancelDownload({
          adId: this.native.adId
        });
      }
    },
  };
</script>


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册