apicloud apicloud

注册
查看: 2740|回复: 11

[其他] tencentYLH腾讯优量汇(腾讯广告,原广点通)模块示例

主题:
93
帖子:
368
云币:
454

[其他] tencentYLH腾讯优量汇(腾讯广告,原广点通)模块示例

2740 11 | 发表于 2020-6-5 22:53:19 |阅读模式 | |
本帖最后由 无意平常心 于 2020-6-6 13:00 编辑

常规的广告模块,在原生信息流方面,融合的不够灵活。问题主要在三个方面:
1. 滑动页面的时候,只要滑动到广告和页面的交界处,会产生误点广告,导致广告的cpm大幅降低。大部分的广告模块都有这样的问题。tencentYLH解决了这个问题,使用流畅,误点率为0。
2. 需要动态改变的情况下,广告的位置需要调整,大部分的广告并没有调整广告位置的方法。比如说:在点击阅读全文后,底部的信息流广告也要随之调整,此时如果没有这个接口,页面和广告将会出现错位。tencentYLH提供的位置调整功能(对广告的x,y,w进行调整),就是为了解决这个问题。
3. 原生信息流广告展示后,页面放置广告的地方需要留出一部分空白区域。由于原生的view无法绑定div,只能绑定页面,所以开发者通常只能事先计算广告的高度,并预留出空白。这样做非常的麻烦。tencentYLH为此提供了解决方案,在渲染信息流广告的时候,提供广告高度回调。开发者可以根据回调的高度,动态设置需要展示广告div的高度,从而实现“间接”的绑定。

使用的具体方法请参考模块的文档。本文举个示例,演示请下载附件的源码。(欢迎留言举报bug,后续会推出ios版)

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        .wrap {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }

        .flex-1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
        }

        .bar {
            height: 50px;
            line-height: 50px;
            background: #81a9c3;
            border-radius: 5px;
            padding: 0 10px;
            margin: 10px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body class="wrap">
    <section class="flex-1">
        <div class="bar">
            打开开屏广告
        </div>
        <div class="bar">
            关闭开屏广告
        </div>
        <div class="ad banner"></div>
        <div class="bar">
            打开横幅广告
        </div>
        <div class="bar">
            关闭横幅广告
        </div>
        <div class="ad native native1"></div>
        <div class="ad native native2"></div>
        <div class="ad native native3"></div>
        <div class="bar">
            打开原生信息流广告(模板渲染)
        </div>
        <div class="bar">
            关闭原生信息流广告(模板渲染)
        </div>
        <div class="ad native adjust"></div>
        <div class="bar">
            调整原生信息流广告(模板渲染)
        </div>
        <div class="bar">
            下载激励视频
        </div>
        <div class="bar">
            显示激励视频
        </div>
        <div class="bar">
            下载并显示激励视频
        </div>
        <div class="bar">
            打开插屏广告
        </div>
        <div class="bar">
            打开Popup插屏广告
        </div>
        <div class="bar">
            关闭插屏广告
        </div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var tencentYLH;
    apiready = function() {
        tencentYLH = api.require("tencentYLH");
    };

    //打开开屏广告
    function showSplash() {
        tencentYLH.openSplash({
            appId: '1101152570', //腾讯优量汇的appId
            posId: '8863364436303842593', //开屏广告位id
            canJump: true //倒计时结束或者用户点击跳过,是否自动关闭广告。如果为false,则通过监听ret.option == 'dismiss'执行下一步
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
            }
            if (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //关闭开屏广告
    function closeSplash() {
        tencentYLH.closeSplash();
    }

    // 打开横幅广告,腾讯的横幅的宽高比固定为6.4:1,高度不用设置
    function showBanner() {
        var y = $api.dom(".banner").offsetTop;
        console.log(y);
        tencentYLH.openBanner({
            rect: {
                x: 20,
                y: y,
                w: 0
            },
            frameName: api.frameName,
            fixed: false, //是否固定在窗口位置,true为固定,false为跟随窗口滑动,必须设置frameName
            refreshTime: 0, //banner刷新的时间,默认是30秒刷新一次新banner。不得小于30秒。
            appId: 1101152570, //腾讯优量汇的appId
            posId: 4080052898050840 //banner2.0广告位的id
        }, function(ret, err) {
            if (ret) {
                console.log("ret" + JSON.stringify(ret));
                $api.dom(".banner").style.height = api.frameWidth / 6.4 + "px";
            }
            if (err) {
                console.log("err" + JSON.stringify(err));
            }
        });
    }

    // 关闭横幅广告
    function closeBanner() {
        tencentYLH.closeBanner();
        $api.dom(".banner").style.height = "0px";
    }

    // 打开插屏广告
    function showInterstitial() {
        tencentYLH.openInterstitial({
            popUp: false, //是否为pop插屏,如果设置为false,当前页面将不能滑动
            appId: 1101152570,
            posId: 8020259898964453
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
            }
            if (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // 打开pop插屏广告
    function showInterstitialPopup() {
        tencentYLH.openInterstitial({
            popUp: true, //是否为pop插屏,如果设置为true,当前页面还能继续滑动
            appId: 1101152570,
            posId: 8020259898964453
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
            }
            if (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // 关闭插屏广告
    function closeInterstitial() {
        tencentYLH.closeInterstitial();
    }

    // 打开原生信息流广告(模板渲染),高度不用填写,自动根据优量汇自己设置的模板,返回高度
    function showNativeRecycle() {
        var y = $api.dom(".native1").offsetTop;
        tencentYLH.openNative({
          rect: {
            x: 20, //左边距
            y: y + 10, //广告距离广告位div上边距为10
            w: 0 //宽度不填或者写0,将自动根据左边距居中对齐
          },
            frameName: api.frameName,
            fixed: false,
            posId: '7030020348049331',
            appId: '1101152570',
            tag: 1
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
                if (ret.option == 'heightchange') {
                  $api.dom(".native1").style.height = ret.height + 20 + "px";
                }
            }
            if (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // 关闭当前页面的所有原生信息流广告(模板渲染)
    function closeNativeRecycle() {
        tencentYLH.closeNative();
        var domList = $api.domAll(".native");
        for (var i = 0; i < domList.length; i++) {
          domList.style.height = "0px";
        }
    }

   
// 调整原生信息流广告的位置 (模板渲染)
    function adjustNativeRecycle() {
      var y = $api.dom(".adjust").offsetTop;
      tencentYLH.adjustNative({
          rect: {
            x: 10, //左边距
            y: y + 10, //广告距离广告位div上边距为10
            w: 0 //宽度不填或者写0,将自动根据左边距居中对齐
          },
          tag: 1
      }, function(ret, err) {
          if (ret) {
            console.log($api.dom(".native1").style.height);
              $api.dom(".adjust").style.height = $api.dom(".native1").style.height;
          }
          if (err) {
              console.log(JSON.stringify(err));
          }
      });
    }

    // 下载激励视频
    function openRewardVideo() {
        tencentYLH.openRewardVideo({
            option: 'download',
            appId: '1101152570',
            posId: '2090845242931421'
        }, function(ret, err) {
            if (ret) {
                console.log("ret" + JSON.stringify(ret));
                if (ret.option == "videoCached") {
                  alert("激励视频下载完成,请点击显示来展示广告");
                }
            }
            if (err) {
                console.log("err" + JSON.stringify(err));
            }
        });
    }

    //展示已经下载的激励视频广告
    function showRewardVideo() {
        tencentYLH.openRewardVideo({
            option: 'show'
        }, function(ret, err) {
            if (ret) {
                console.log("ret" + JSON.stringify(ret));
            }
            if (err) {
                console.log("err" + JSON.stringify(err));
            }
        })
    }

    // 下载并且直接展示激励视频广告
    function openShowRewardVideo() {
        tencentYLH.openRewardVideo({
            option: 'downloadShow',
            appId: '1101152570',
            posId: '2090845242931421'
        }, function(ret, err) {
            if (ret) {
                console.log("ret" + JSON.stringify(ret));
            }
            if (err) {
                console.log("err" + JSON.stringify(err));
            }
        });
    }
</script>

</html>



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
93
帖子:
368
云币:
454
 楼主| 发表于 2020-6-12 20:16:52 |
2012.06.12 修复与穿山甲模块之间的Glide冲突问题。

主题:
110
帖子:
506
云币:
765
发表于 2020-6-12 22:04:26 |
提供下IOS版本吧。不然选择太低

主题:
93
帖子:
368
云币:
454
 楼主| 发表于 2020-6-15 14:08:10 |
飞翔网络 发表于 2020-6-12 22:04
提供下IOS版本吧。不然选择太低

嗯嗯。ios的下个月会上的。

主题:
110
帖子:
506
云币:
765
发表于 2020-6-15 17:46:11 |
无意平常心 发表于 2020-6-15 14:08
嗯嗯。ios的下个月会上的。

期待,上了IOS我会换掉广告模块

主题:
110
帖子:
506
云币:
765
发表于 2020-6-28 11:24:10 |
无意平常心 发表于 2020-6-15 14:08
嗯嗯。ios的下个月会上的。

老兄,IOS出了吗?

主题:
93
帖子:
368
云币:
454
 楼主| 发表于 2020-6-30 22:49:31 |

还没有啦。下个月才能上噢。工作有点忙。

主题:
110
帖子:
506
云币:
765
发表于 2020-7-1 08:31:49 |
无意平常心 发表于 2020-6-30 22:49
还没有啦。下个月才能上噢。工作有点忙。

赶快出吗,等的用你模块

主题:
110
帖子:
506
云币:
765
发表于 2020-7-13 13:16:59 |
IOS 出了没啊?

驾校小白

UID:742581

主题:
3
帖子:
16
云币:
19
发表于 2020-7-28 11:48:58 |
安卓   自定义loader  腾讯优量汇 激励视频监听不到激励视频的播放结束和激励视频关闭状态,视频下载完成可以监听到 。广告不存在这样的问题
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表