推广 热搜:   中国  设备  参数  公司  未来  服务  行业  企业  教师 

uniapp开发的H5页面接入谷歌广告

   日期:2024-12-13     作者:caijiyuan    caijiyuan   评论:0    移动:http://sicmodule.glev.cn/mobile/news/12885.html
核心提示:uniapp开发与js原生开发的其一不同之处在于,前者是SPA单页面开发,每个项目中只有一个index.html文件,所谓

uniapp开发与js原生开发的其一不同之处在于,前者是SPA单页面开发,每个项目中只有一个index.html文件,所谓的页面跳转本质来说是不停重写当前页面来与用户进行交互。原生开发是多个页面进行页面间的跳转,像在script引入外部文件就更加方便高效。

uniapp开发的H5页面接入谷歌广告

了解了uniapp开发与js原生开发的不同,首先我们先从轻松的原生来实现广告功能。正常的html文件,插入广告可以直接在head中写入

 

然后在需要插入广告的部分在body中写入

 

到此,在html文件中就可以插入不同尺寸的banner广告了。

插屏广告与banner广告有所不同,因为插屏广告是在页面跳转的时候展示,所以不需要盒子来让其填充,插屏广告自动全屏填充展示。所以直接在head中放入

 

放在跳转页面中,在页面发生跳转时,插页广告可以自动插入。

声明:作者也是探索出来的笨办法,实现功能为主,肯定有更高效简洁,读起来赏心悦目的代码可以展示广告,欢迎指正。

由于SPA的页面切换是局部刷新而不是整体刷新,Vue Templates中是不允许出现script标签的。虽然我们可以通过type来规避这个报错:type=“application/javascript”,但这并不能彻底解决问题。当你把script标签写在Vue templates中时,因为Vue会根据数据的变化动态渲染页面,会导致多次运行该代码。就会报错。

我们的解决办法是把Google AdSense js文件引入代码,可以放到index.html网页的head中,引入一次即可。然后把需要放在body中的启动代码放在自定义的window全局函数中,最后在vue文件的mounted生命周期中调用。

index.html

 

index.vue(要引入广告的文件

 

插屏广告是在页面跳转过程中默认全屏插入展示,并不是在特定的盒子空间填充,所以只调用插入广告代码即可。这个项目对于插屏广告的需求是:在首页跳转详情页时展示插屏广告,默认五秒之后自动关闭广告,也可自己手动关闭广告。在作者多次尝试后发现:在SPA中,直接在页面里调用插入广告的全局方法,虽然页面跳转之后控制台加载了广告盒子,但是由于被限制了 插屏广告并未展示。最后只能暴力使其展示。

再次声明:作者也是探索出来的笨办法,实现功能为主,肯定有更高效简洁,读起来赏心悦目的代码可以展示广告,欢迎指正。

index.html

 

detialPage.vue(要跳转过来的详情页

 
 

这版是三方给到的广告代码直接是ins代码格式,可以整块放在页面中,操作比较简单。

index.html

 

index.vue(要引入广告的文件

 

三方给的代码,更为简单的版本,直接按照广告位放入,甚至不需要做调用操作。

index.html

 

index.vue

本文地址:http://sicmodule.glev.cn/news/12885.html    歌乐夫 http://sicmodule.glev.cn/ , 查看更多
 
 
更多>同类行业资讯
0相关评论

新闻列表
企业新闻
推荐企业新闻
推荐图文
推荐行业资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2023001713号