Nuxt3集成AdSense广告代码

---

theme: github

为什么要单独写出来这样一篇文章呢？之前已经有写过Nuxt3继承51la统计代码了，按道理来讲在Nuxt3中加入Google AdSense广告代码的原理应该一样，但是如今却单独拉出来记录一下，自然是因为在实际使用的过程中发现做法并不相同。

获取广告代码

第一步自然是获取到广告代码，这里的广告代码有两种：

1. 自动广告
2. 广告单元

自动广告

所谓的自动广告就是Google AdSense的智能广告，它可以智能的分析出网站dom结构，然后在已有的网站结构中添加一个类似于原生广告的一个dom节点，对于一般网站来说，这种广告形式非常棒。

优势

像集成统计代码一样，引入一段JavaScript代码就行了。

劣势

经过测试，本站或者可能类似于这种基于flex布局的网站很有可能会出现布局错乱的问题，导致网站布局被破坏，也因此我拒绝了使用自动广告。

广告单元

这种广告单元相对来说就比较传统了，首先创建广告单元，一共有四种：

1. 展示广告
2. 信息流广告
3. 文章内嵌广告
4. 多重广告

这里简单说一下展示广告和信息流广告好了，所谓的展示广告，就是一个带有文字的图片广告单元，你可以把你的广告div用展示广告代码直接替换掉；信息流广告主要与信息流相关，所谓的信息流最简单的解释就是类似于现在的小红书、今日头条的列表：图文列表，像掘金，知乎的首页也是一样的，当然包括本站的文章列表，因此这种信息流广告就出现在列表之中，在循环遍历列表时，可以输出这个广告单元。

新建两个广告单元，分别是展示广告和信息流广告，然后分别拿到他们的广告代码。

Nuxt3集成

想要在Nuxt3中集成这种广告，我的第一反应是像之前所说的 Nuxt3接入51la等网站统计 一样，然后发现并非这样。

集成自动广告

经过研究发现，Nuxt3集成自动广告还是非常简单的： 在根目录下的 app.vue中的script标签中加入：

useHead({
    script: [
        { async: "async", src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx', crossorigin: "anonymous" }
    ]
})

仅此而已，其中src链接地址请参考：

集成单元广告

学会上面的集成自动广告，我们就了解了原理，因此集成单元广告也就变得非常简单了，不过集成单元广告分为三步：

1. 引入script
2. 插入dom
3. 使用js代码启动广告

我们以文章页面为例： 在 pages\read\post\[id].vue中添加：

useHead({
    script: [
        { async: "async", src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx', crossorigin: "anonymous" }
    ]
})

之后在右侧广告位置添加代码：

<ins class="adsbygoogle mt-6" style="display:block" data-ad-client="ca-pub-xxx"
                        data-ad-slot="8157000731" data-ad-format="auto" data-full-width-responsive="true"></ins>

最后在onMounted中添加启动代码：

onMounted(() => {
    //@ts-ignore
    (adsbygoogle = window.adsbygoogle || []).push({});
})

//@ts-ignore 是什么？这是一个忽略报错的注释，因为当前代码中不存在adsbygoogle，所以正常情况下会报错，但是我们知道这个adsbygoogle是上面引入的js代码中的，因此为了“好看”，直接忽略掉报错就可以了。