web H5网页中嵌入优量汇的插屏广告

我们在进入某些App 软件的时候 经常会看到一些插屏广告 , 因为看着些广告可以赚取费用
类似于 这样

 起首 我们去 优量汇的官网 进行申请  腾讯交际联盟广告 

 

然后 我们登录进去  我们到紧张 去新建媒体

 

假如你的商品 没有上架应用市场 就选择测试 上架成功之后可以选择正式 媒体审核成功之后 就可以下一步

 
里面 有很多广告位的选择 我选了此中的一种

 这样的我们可以在页面上固定位置
我们在代码里面 要引进去  我们起首在index.html 进行引入

1. <script type="text/javascript">
2.       window.TencentGDT = window.TencentGDT || [];
3.       window.gdt_placement_id = "在文档中会有";
4.       // 广告初始化
5.       window.TencentGDT.push({
6.         app_id: "", // {String} - appid - 必填
7.         placement_id: window.gdt_placement_id, // {String} - 广告位id - 必填
8.         type: "native", // {String} - 原生广告类型 - 必填
9.         count: 1, // {Number} - 拉取广告的数量，默认是3，最高支持10 - 选填
10.         onComplete: function (res) {
11.           if (res && res.constructor === Array) {
12.             // containerId：广告容器ID
13.             window.TencentGDT.NATIVE.renderAd(res[0], "gdtAdFeed1");
14.           } else {
15.             // 加载广告API，如广告回调无广告，可使用loadAd再次拉取广告
16.             // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
17.             setTimeout(function () {
18.               window.TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
19.             }, 3000);
20.           }
21.         },
22.       });
24.       // H5 SDK接入全局只需运行一次
25.       (function () {
26.         var doc = document,
27.           h = doc.getElementsByTagName("head")[0],
28.           s = doc.createElement("script");
29.         s.async = true;
30.         s.src = "//qzs.qq.com/qzone/biz/res/i.js";
31.         h && h.insertBefore(s, h.firstChild);
32.       })();
33.     </script>

复制代码

他是创建好之后 可以获取到代码 我们用就可以

 

其余的就是在页面上了  你想让他在谁人页面展示  就可以在谁人页面写

1.     <!-- 广告模板 -->
2.     <div id="gdtAdFeed1"></div>
4.     mounted() {
5.    // 初始化广告
6.     const startTime = new Date().getTime();
7.     const diff = new Date().getTime() - startTime;
8.     if (diff < 400) {
9.       setTimeout(() => {
10.         if (GDT && GDT.load) {
11.           TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
12.         }
13.       }, 400 - diff);
14.     } else {
15.       if (GDT && GDT.load) {
16.         TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
17.       }
18.     }
19.   },
21. <style scoped>
22. #gdtAdFeed1 {
23.   width: 100%;
24.   position: fixed;
25.   /* bottom: 30px; */
26. }
27. </style>

复制代码

这样就可以了 只针对于 H5网页版  安卓手机可以展示出来 ios正常展示不出来 
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。