Nuxt整合google adsnse解决方案

一、前言

可喜可贺，网站终于通过google adsense审核了。各种艰辛，他日我们发文再叙，今天讲一下Nuxt项目如何整合google adsense。

二、解决方案

2.1、广告代码

在google adsense通过审核后，会给你一个广告代码,我们只需要放置在网页中就可以了。其内容大致如下：


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXX"
     data-ad-slot="XXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2.2、普通的整合方案

我们知道Nuxt是服务端渲染，不是一个个的静态Html，那我们如何把代码放置到我们的Html中呢？

其实我们在Nuxt项目中都会有一个 app.html，如下图：

这是一个默认模板，我们可以把一些基础类的东西放置在这里，那同样的我们可以把广告的代码直接放置到head中。

PS：使用该方法，广告代码会渲染到你的每一个页面中

2.3、进阶整理方案

我们上面提到，app.html会让我们的所有页面都放置广告代码，这本质上时不友好的。通过对广告代码的分析我们可以发现，

他是由两个script和一个ins的dom组成的。两个script负责引入相关js，ins的dom就承载了广告元素。

有鉴于此，我们可以把两个script放置在app.html中，把ins的dom放置在任意一个template中，就能是的广告放置在自定义的页面中。

2.4、终极解决方案

因为app.html是基础模板，虽然我们的广告dom没有放置在每一个页面，但是我们的js存在于所有页面了，对于有些微强迫症的热来说是不可忍的！

于是乎，通过网上的资源找到了一款vue插件，可以比较好的解决上述所有问题，那就是：

vue-google-adsense，这里附上其github地址：https://github.com/mazipan/vue-google-adsense#readme

2.5、整合vue-google-adsense

首先安装依赖：npm install vue-script2 vue-google-adsense --save

然后再plugins下创建googleAds.js，其内容如下：


import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'));
Vue.use(Ads.Adsense);
Vue.use(Ads.InArticleAdsense);
Vue.use(Ads.InFeedAdsense);
Vue.use(Ads.AutoAdsense, {adClient: 'ca-pub-XXX'})

紧接着，在nuxt.config.js中配置插件：


plugins: [
    {src: '~/plugins/googleAds.js',ssr: false}
  ],

最后再需要放置广告的页面中放置元素

            
            <Adsense
              data-ad-client="ca-pub-XXX"
              data-ad-slot="71XXXX">
            </Adsense>