为 Hexo icarus 主题优化 AdSense 代码
# 减少 AdSense 的 JS 请求
谷歌官方的代码
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | |
<ins class="adsbygoogle" | |
style="display:block" | |
data-ad-client="ca-pub-id" | |
data-ad-slot="id" | |
data-ad-format="auto" | |
data-full-width-responsive="true"></ins> | |
<script> | |
(adsbygoogle = window.adsbygoogle || []).push({}); | |
</script> |
分解一下,首先通过 async 异步请求加载 adsbygoogle.js 核心文件,待加载完成后再 push 到 ins 内,显示广告内容。
当我们需要放入广告位时,就将该段代码放入。可是如果有多个广告位的时候,就会引用多个相同的 JS。
Q:如果我的网页上有多个广告单元,我是否要为每个广告单元添加
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
A:不,不需要,adsbygoogle.js 可以一次性加载。
上述是谷歌官方给的 QA,由此可知我们不需要多次加载 JS
如果你有多个广告位,那就可以把该段引入 JS 的代码,放到 <head>
里,既可以达到一次载入 JS,所有 <ins>
都可以接到广告。
# JS 监听加载
将代码改为如下
<script> | |
window.onload = function() { | |
setTimeout(function() { | |
let script = document.createElement("script"); | |
script.setAttribute("async", ""); | |
script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; | |
document.body.appendChild(script); | |
}, 2e3); | |
} | |
</script> |
Hexo icarus v3.0 则修改成
const adjs = `window.onload = function() { | |
setTimeout(function() { | |
let script = document.createElement("script"); | |
script.setAttribute("async", ""); | |
script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; | |
document.body.appendChild(script); | |
}, 2e3);}`; | |
{adsenseClientId ? <script dangerouslySetInnerHTML=<!--swig0-->></script> : null} |
转载自 ShenYun,篱落闲栈。