一、前言
可喜可贺，网站终于通过google adsense审核了。各种艰辛，他日我们发文再叙，今天讲一下Nuxt项目如何整合google adsense。
二、解决方案2.1、广告代码
在google adsense通过审核后，会给你一个广告代码,我们只需要放置在网页中就可以了。其内容大致如下：
(adsbygoogle = window.adsbygoogle || []).push({});
Java
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地址：#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}
],
Java
最后再需要放置广告的页面中放置元素
原文链接：http://www.wzcl.net/social/youtube/9410.html，转载请注明出处~~~
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。敬请谅解！
评论0