在NiceGUI应用中部署Adsense广告

相比于传统网站，在基于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的头部广告条就是这样实现的。