创新互联百度小程序教程:ad广告

  • ad 广告
    • 属性说明
      • type 有效值
      • binderror 事件触发
      • bindstatus 事件触发
    • 示例
      • 代码示例 1:横幅类型
      • 代码示例 2:信息流大图类型
      • 代码示例 3:信息流三图类型
      • 代码示例 4:信息流左图类型
      • 代码示例 5:信息流右图类型
      • 代码示例 6:信息流视频类型
      • 代码示例 7:后贴片类型
      • 代码示例 8:前贴片类型
    • Bug & Tip

    ad 广告

    解释:广告组件,按照流量主开通指引中的操作获取广告组件代码。

    成都创新互联2013年至今,先为大安市等服务建站,大安市等地企业,进行企业商务咨询服务。为大安市企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

    属性说明

    属性名 类型 默认值 必填 说明
    appidString小程序应用 ID
    apidString小程序广告位 ID
    typeStringfeed广告类型:banner、feed ,需和百青藤平台上的代码位类型相匹配
    updatetimeString更改该属性,可以触发广告刷新
    binderrorEventHandle广告组件加载失败时触发
    bindloadEventHandle广告组件加载完成触发
    bindcloseEventHandle关闭广告组件时触发
    bindstatusEventHandle贴片类型广告播放期间触发

    type 有效值

    说明
    banner横幅类型
    feed信息流类型
    pre-roll前贴类型
    post-roll后贴类型

    binderror 事件触发

    触发时机:代码执行异常以及状态不符合广告要求。
    返回参数:

    代码 状态 说明
    1001-1内部错误初始化失败
    1001-2内部错误广告返回执行异常
    1001-3内部错误渲染广告异常
    1001-4内部错误广告异常
    1001-5内部错误广告缓存异常
    1002-1广告请求广告返回异常
    1003-2无可用广告数据层级不对
    1003-3无可用广告广告内容不完整
    1004-1媒体接入异常web 化广告不渲染
    1004-2媒体接入异常视频贴片广告组件放置不在 video 内
    1004-3媒体接入异常视频贴片当前是非同层渲染

    bindstatus 事件触发

    触发时机:事件触发在视频贴片的情况下。
    返回参数:

    • JS
     
     
     
    1. statusFunc(e) {
    2. // e = {status:''} 具体如下
    3. }
    属性 说明
    videoend视频结束,触发时机:1、有广告返回,广告播放结束;2、无广告返回;3、广告被关闭
    show广告视频播放中
    close广告播放结束
    noAd无广告返回

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    以下代码仅做示例,需要在百青藤平台申请代码位替换下方 appid 和 apid ,方可正常显示示例效果。

    代码示例 1:横幅类型

    • SWAN
    • JS
     
     
     
    1. apid="7182322"
    2. type="banner"
    3. data-update="updatetime1"
    4. updatetime="{{updatetime1}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">
     
     
     
    1. Page({
    2. bindload(event) {
    3. console.log(event);
    4. },
    5. binderror(event) {
    6. const update = event.target.dataset.update;
    7. this.setData(update, `${+new Date()}`);
    8. },
    9. bindclose(event) {
    10. console.log(event);
    11. }
    12. });

    代码示例 2:信息流大图类型

    • SWAN
     
     
     
    1. apid="7182323"
    2. type="feed"
    3. data-update="updatetime2"
    4. updatetime="{{updatetime2}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">

    代码示例 3:信息流三图类型

    • SWAN
     
     
     
    1. apid="7182347"
    2. type="feed"
    3. data-update="updatetime3"
    4. updatetime="{{updatetime3}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">

    代码示例 4:信息流左图类型

    • SWAN
     
     
     
    1. apid="7182324"
    2. type="feed"
    3. data-update="updatetime4"
    4. updatetime="{{updatetime4}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">

    代码示例 5:信息流右图类型

    • SWAN
     
     
     
    1. apid="7182325"
    2. type="feed"
    3. data-update="updatetime5"
    4. updatetime="{{updatetime5}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">

    代码示例 6:信息流视频类型

    • SWAN
     
     
     
    1. apid="7182334"
    2. type="feed"
    3. data-update="updatetime6"
    4. updatetime="{{updatetime6}}"
    5. binderror="binderror"
    6. bindload="bindload"
    7. bindclose="bindclose"
    8. bindstatus="bindstatus">

    代码示例 7:后贴片类型

    • SWAN
     
     
     
    1. 注:后贴片广告于视频结束后随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。
    2. apid="7182330"
    3. data-update="updatetime7"
    4. updatetime="{{updatetime7}}"
    5. type="post-roll"
    6. binderror="binderror"
    7. bindload="bindload"
    8. bindclose="bindclose"
    9. bindstatus="bindstatus">

    代码示例 8:前贴片类型

    • SWAN
     
     
     
    1. 注:前贴片广告于视频开始前随机自动播放,且仅支持播放一次;广告未出现或再次观看,请退出页面重新进入。
    2. apid="7183268"
    3. type="pre-roll"
    4. data-update="updatetime8"
    5. updatetime="{{updatetime8}}"
    6. binderror="binderror"
    7. bindload="bindload"
    8. bindclose="bindclose"
    9. bindstatus="bindstatus">

    Bug & Tip

    • Tip:从百青藤获取的代码,是 ad 组件,把这段代码,嵌入到页面中你需要展现广告的位置处,然后给他一些样式就可以,样式控制只能到 ad 这一层,内部的展示效果对小程序的开发者来说没有权限。
    • Tip:banner 样式的背景色默认透明,建议开发者自定义背景色。通过background-color: #fff自行定义。其中#fff代表白色,可以根据广告场景自行修改参数。
    • Tip:信息流广告可在百青藤平台配置四种样式:大图、多图、左图右文、右图左文。
    • Tip:视频贴片类型基于同层渲染,需基础库 3.70.x 版本以上。
    • Tip:视频前贴 iOS 11.17 之前广告的视频播放是和媒体公用一个 video ,会出现 video 事件多次触发,安卓暂无影响。
    • Tip:视频后贴 暂时和媒体公用一个 video,会出现 video 事件多次触发。
    • Tip:视频贴片广告播放期间切换 video 的 src 变化,都会导致广告中止。

    文章名称:创新互联百度小程序教程:ad广告
    文章链接:http://www.csdahua.cn/qtweb/news15/528765.html

    网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网