首页 WebSite

为 Hexo icarus 主题优化 AdSense 代码

# 减少 AdSense 的 JS 请求

谷歌官方的代码

s
<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 监听加载

将代码改为如下

s
<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 则修改成

s head.jsx
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，篱落闲栈。