在 Vuepress 2 中使用 Google Adsense 并配置自适应加载

Posted on In Word count in article: 3.2k Reading time ≈ 3 mins.

在 Vuepress 2 中使用 Google Adsense 并配置自适应加载

迫于服务器续费的压力，最近抽时间和同学一起在社团运营的vuepress中配置了Google Adsense广告，并失陪了微信小程序，令广告只在非小程序环境下加载（由于小程序对域名备案的要求，adsense广告是无法在小程序的webview里面显示，强行显示还会造成小程序直接被「配置业务域名」的弹窗覆盖）。

配置Adsense的自适应加载广告

可参考 https://github.com/SUSTech-CRA/sustech-online-ng/blob/master/docs/.vuepress/public/wx_helper.js#L81-L100 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function isInWechatMP() {
    return navigator.userAgent.match(/miniprogram/i) || window.__wxjs_environment === 'miniprogram';
};

function load_adsense() {
    console.log("判断环境，加载 adsense")

    if (isInWechatMP() === false) {
        console.log("非小程序环境，加载");
        var oScript = document.createElement("script");
        oScript.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        oScript.setAttribute("async", "");
        oScript.setAttribute("data-ad-client", "ca-pub-12345678");
        document.head.appendChild(oScript);
        // <script data-ad-client="ca-pub-12345678" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    } else {
        console.log("小程序环境，跳过");
    }
}
setTimeout("load_adsense()", 500);
  1. 首先通过函数isInWechatMP，通过判断User Agent来判断目前是否处在小程序的环境中。
  2. 如果判断是小程序环境，执行load_adsense，在DOM上引入Adsense的脚本。

配置Adsense广告单元

在注册Adsense账户之后，google会给用户提供一段类似如下结构的代码：

1
2
3
4
5
6
7
8
9
10
11
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-12345678"
     data-ad-slot="12345678"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

随后可以根据上面的代码，建立一个component：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="container">
    <ins class="adsbygoogle"
         style="display:block; text-align:center;"
         data-ad-layout="in-article"
         data-ad-format="fluid"
         data-ad-client="ca-pub-12345678"
         data-ad-slot="12345678"></ins>
  </div>
</template>

<script>
export default {
  name: "adsense-inline",
  mounted() {
    this.adsenseAddLoad();
  },
  methods: {
    adsenseAddLoad() {
      let inlineScript = document.createElement("script");
      inlineScript.type = "text/javascript";
      inlineScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});'
      document.getElementsByTagName('body')[0].appendChild(inlineScript);
    }
  }
}
</script>

把原来的html片段中的脚本改为函数，塞在脚本里面，并在config.js里面导入组件：https://github.com/SUSTech-CRA/sustech-online-ng/blob/master/docs/.vuepress/config.js#L111

1
2
3
4
5
6
7
8
9
[
  '@vuepress/register-components',
  {
    components: {
      Adsense_unit: path.resolve(__dirname, './components/adsense-inline-article.vue'),
      // componentsDir: path.resolve(__dirname, './components')
    },
  },
]

在文章中插入广告单元

在markdown中插入以下标签即可：

1
2
<Adsense_unit>
</Adsense_unit>

渲染之后，插入标签的位置就会显示广告了。

具体的广告效果可以在 sustech.online/#关于广告 的上方进行查看。