在NiceGUI应用中部署Adsense广告

2024年6月18日 415点热度 1人点赞 0条评论

相比于传统网站,在基于Vue的应用中部署广告联盟代码多少有一些麻烦,比如谷歌Adsense。不过去网上搜一搜,还是很容易能够找到解决方案。但是尽管NiceGUI的前端也是基于Vue,却不能照搬之前的经验,本文记录我在NiceGUI应用下部署Adsense的方法。

要想在基于Vue的web应用中部署Adsense广告单元,CSDN上给出的解决方案是:Vue3 接入Google AdSense_vue页面中插入多个谷歌广告-CSDN博客 。这个方法我尝试过,是没有问题的。但是这个方法,基于NiceGUI开发的应用却不能直接照搬,因为该文章中addAds函数是作为Vue生命周期函数onMounted的回调调用的,而Vue的生命周期函数在NiceGUI中并没有官方封装的API可用,也就是说,我们目前在NiceGUI中无法直接使用Vue的生命周期函数。

不过虽然官方没有封装,好在NiceGUI提供了很多向网页注入脚本和html的方法,基于此,我们可以向页面注入js脚本实现目的。

这里我踩过一个坑,最开始,我想在需要放置在广告单元的位置使用ui.html方法直接注入广告代码,但运行时提示错误,ui.html方法接收的字符串中,不能存在<script>标签,而 (adsbygoogle = window.adsbygoogle || []).push({}) 这行代码负责实际广告的推送,如果通过ui.add_body_html这个方法放置在body中,因为代码顺序的原因,广告又渲染不出来。

借鉴之前Vue中部署Adsense代码时使用onMounted的思路,我们在页面加载完毕再调用(adsbygoogle = window.adsbygoogle || []).push({}) 应该可以解决问题。

我的解决方案是用javascript监听load事件,将原解决方案中的onMounted回调放在load的监听回调中去,简单实验了一下,问题得到解决。代码示例如下:

1、通过ui.add_body_html,将下面的代码放置在body标签里,该脚本注册addAds函数,并绑定在监听事件load上。

ui.add_body_html(
            """
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
            <script>
                window['addAds'] = function () {
                let chlid = document.getElementsByClassName('ads')
                for (let index = 0; index < chlid.length; index++) {
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    }
                }
                window.addEventListener('load', function() {window.addAds();});
            </script>
            """
        )

2、通过ui.html方法,将广告单元的INS标签放置在需要部署的容器中,然后设置classes为ads,如下:

ui.html(
             """
                <ins class="adsbygoogle"
                style="display:inline-block;width:728px;height:90px"
                data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
                data-ad-slot="xxxxxxxxxxxx"></ins>
             """
       ).classes("ads")

上面的步骤做完,将应用部署在服务器上,应该就可以看到Adsense广告了,如下图,QThinker Plus的头部广告条就是这样实现的。

QThinker

前地产从业者,假装是个程序员,热爱编程与交易 自研QThinker量化交易框架

文章评论