web H5网页中嵌入优量汇的插屏广告
我们在进入某些App 软件的时候 经常会看到一些插屏广告 , 因为看着些广告可以赚取费用类似于 这样
https://i-blog.csdnimg.cn/direct/b458d5518a074d2ebcf4d0fc077ef2f0.png
起首 我们去 优量汇的官网 进行申请 腾讯交际联盟广告
https://i-blog.csdnimg.cn/direct/1e0acb7f3a2843f0896b49417fecc9b2.png
然后 我们登录进去 我们到紧张 去新建媒体
https://i-blog.csdnimg.cn/direct/ea8698cafb8541fc8ce014a64b3c4918.png
假如你的商品 没有上架应用市场 就选择测试 上架成功之后可以选择正式 媒体审核成功之后 就可以下一步
https://i-blog.csdnimg.cn/direct/7e0d09e1a22a4fb0aa44b314acd02657.png
里面 有很多广告位的选择 我选了此中的一种
https://i-blog.csdnimg.cn/direct/95505974af4740dfa24e830ac221aa24.png
这样的我们可以在页面上固定位置
我们在代码里面 要引进去 我们起首在index.html 进行引入
<script type="text/javascript">
window.TencentGDT = window.TencentGDT || [];
window.gdt_placement_id = "在文档中会有";
// 广告初始化
window.TencentGDT.push({
app_id: "", // {String} - appid - 必填
placement_id: window.gdt_placement_id, // {String} - 广告位id - 必填
type: "native", // {String} - 原生广告类型 - 必填
count: 1, // {Number} - 拉取广告的数量，默认是3，最高支持10 - 选填
onComplete: function (res) {
if (res && res.constructor === Array) {
// containerId：广告容器ID
window.TencentGDT.NATIVE.renderAd(res, "gdtAdFeed1");
} else {
// 加载广告API，如广告回调无广告，可使用loadAd再次拉取广告
// 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
setTimeout(function () {
window.TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
}, 3000);
}
},
});
// H5 SDK接入全局只需运行一次
(function () {
var doc = document,
h = doc.getElementsByTagName("head"),
s = doc.createElement("script");
s.async = true;
s.src = "//qzs.qq.com/qzone/biz/res/i.js";
h && h.insertBefore(s, h.firstChild);
})();
</script> 他是创建好之后 可以获取到代码 我们用就可以
https://i-blog.csdnimg.cn/direct/6414a0caa7b24aad8967842f1558d033.png
其余的就是在页面上了 你想让他在谁人页面展示 就可以在谁人页面写
<!-- 广告模板 -->
<div id="gdtAdFeed1"></div>
mounted() {
// 初始化广告
const startTime = new Date().getTime();
const diff = new Date().getTime() - startTime;
if (diff < 400) {
setTimeout(() => {
if (GDT && GDT.load) {
TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
}
}, 400 - diff);
} else {
if (GDT && GDT.load) {
TencentGDT.NATIVE.loadAd(window.gdt_placement_id);
}
}
},
<style scoped>
#gdtAdFeed1 {
width: 100%;
position: fixed;
/* bottom: 30px; */
}
</style> 这样就可以了 只针对于 H5网页版 安卓手机可以展示出来 ios正常展示不出来
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]