Vue添加Adsense及样式调整

没玩过前端，对前端各类框架比较好奇，用vue试水一个服务页面。

VUE的语法规范（设计哲学），导致本来很简单的Adsense的事，变得有点烦。

试水玩玩，还没有理解vue的哲学，但有点过度封装的感觉：封装应该带来显著的知识收敛，封装前和封装后的表达信息量几乎相同。
对vue其它还挺满意，但明明很简单的代码还必须封装（否则必须workround）。对比react没有这种感觉，增强居多，限制更少。
通过vue组件引入的方式，可以参考链接一链接二。但不太喜欢，用源生workround。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2768427184203598" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="<client_id>"
     data-ad-slot="<slot_id>"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

一个JS资源引入；一个广告DOM声明；一段触发加载广告的Inline Script。

JS脚本引入：在vue文件里声明式加载不方便（编程式加载肯定行），还好可在index.html中统一声明引入
DOM声明：可以需要使用的地方直接声明，没有限制
Inline Script：不能在DOM部分声明否则报错，要在VUE script部分找到触发时机执行
SyntaxError: Tags with side effect (<script> and <style>) are ignored in client component templates.

需要在VUE的脚本部分编辑程式加载，最常用的就是放在onMount方法中

<script setup lang="ts">
onMounted( () => {
     let inlineScript   = document.createElement("script");
     inlineScript.type  = "text/javascript";
     inlineScript.text  = '(adsbygoogle = window.adsbygoogle || []).push({});'
     document.getElementsByTagName('body')[0].appendChild(inlineScript);
})
</script>

其实就是把源生web里资源引入/DOM声明 /脚本三个可集中搞定的事，分折到三个不同地方。workround的方法还不少，比如这个。源生很简单事情，可以封装但如果能保留源生方式就好了，而是被逼workround。

Adsense隐藏未加载广告及自适应 #

Adsense有时不会如架广告，会导致页面出现较大的留白，官方指引是是通过css覆盖掉未加载成功的广告。

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

官方的解释：当未召回广告时Adsense会自动折叠空白区域。但只有当隐藏告不引起页面reflow时（页面变化）才自动隐藏，所以只有展示区域之外的广告才会自动折叠隐藏。
When AdSense ad units are "unfilled", we try to either collapse the ad unit or show a blank space. We only collapse ad units when they are not going to cause page reflow, meaning only ad units outside of the viewport are collapsed....

平滑未加载成功时的隐藏效果 #

但也有些问题，css叠加的方式会有些跳跃：先展示出空间区域，然后突然隐藏，很突兀。想平滑一下，但display:none似乎是不支持transition的，最后换成了height:0px和transition配合。

ins.adsbygoogle[data-ad-status="unfilled"] {
    height: 0px !important;
    transition: all 0.3s ease-out;
    overflow: hidden;
}

如果原意写更多js代码可以更好，比如先后台加载，有召回再展示，插入效果（其实就是段代码，就是懒不想写）。以及官方也建议可以在广告加载失败时展示图片占位。

最后就是google官方工具提升的广告自动生成工具不太灵活，比如同时适配桌面及移动版时，想长度固定但宽度自适应。adsense自己本来是比较灵活的，但生成工具可选项没那么多

可直接在<ins>源生css属性限定（可以用源生属性就是好），并删掉data-ad-format="auto"和data-full-width-responsive="true"（如有的话）

<ins class="adsbygoogle"
style="display:block;width:98%;max-height:90px;height:90px;"
data-ad-client="<client_id>"
data-ad-slot="<slot_id>"></ins>

Google Adsense 官方的引入代码 #

Adsense隐藏未加载广告及自适应 #

平滑未加载成功时的隐藏效果 #