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

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

类似于 这样

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

 

然后 我们登录进去  我们到主要 去新建媒体

 

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

 

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

 这样的我们可以在页面上固定位置

我们在代码里面 要引进去  我们首先在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[0], "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")[0],
          s = doc.createElement("script");
        s.async = true;
        s.src = "//qzs.qq.com/qzone/biz/res/i.js";
        h && h.insertBefore(s, h.firstChild);
      })();
    </script>

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

 

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

    <!-- 广告模板 -->
    <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正常展示不出来 

 

原文地址：https://blog.csdn.net/m0_73035846/article/details/143788465

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！