theme: github
为什么要单独写出来这样一篇文章呢？之前已经有写过Nuxt3继承51la统计代码了，按道理来讲在Nuxt3中加入Google AdSense广告代码的原理应该一样，但是如今却单独拉出来记录一下，自然是因为在实际使用的过程中发现做法并不相同。
获取广告代码
第一步自然是获取到广告代码，这里的广告代码有两种：
- 自动广告
- 广告单元
自动广告
所谓的自动广告就是Google AdSense的智能广告，它可以智能的分析出网站dom结构，然后在已有的网站结构中添加一个类似于原生广告的一个dom节点，对于一般网站来说，这种广告形式非常棒。
优势
像集成统计代码一样，引入一段JavaScript代码就行了。
劣势
经过测试，本站或者可能类似于这种基于flex布局的网站很有可能会出现布局错乱的问题，导致网站布局被破坏，也因此我拒绝了使用自动广告。
广告单元
这种广告单元相对来说就比较传统了，首先创建广告单元，一共有四种：
- 展示广告
- 信息流广告
- 文章内嵌广告
- 多重广告
这里简单说一下展示广告和信息流广告好了，所谓的展示广告，就是一个带有文字的图片广告单元，你可以把你的广告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链接地址请参考：
集成单元广告
学会上面的集成自动广告，我们就了解了原理，因此集成单元广告也就变得非常简单了，不过集成单元广告分为三步：
- 引入script
- 插入dom
- 使用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代码中的，因此为了“好看”，直接忽略掉报错就可以了。
