余温旧梦-王世彪的博客
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者

王世彪

努力做个影响他人滴人
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者
  • css

  • 游戏开发

  • android

  • golang

  • javascript

  • vuejs

  • 小程序

  • cdn

  • seo

  • vuepress

    • vuepress如何生成目录
    • vuepress支持搜索
    • vuepress支持全文搜索
    • vuepress配置主题vdoing
    • vuepress自定义vue组件
    • vuepress配置百度广告
    • vuepress配置谷歌广告adsense
    • vuepress配置谷歌广告-通过vue-google-adsense库
      • 1. 申请广告代码
      • 2. 安装依赖
      • 3. 修改 docs/.vuepress/enhanceApp.js
      • 4. 插入广告
      • 5. 自定义广告位组件
      • 6. Pin码
    • vuepress的seo优化
    • vuepress集成第三方搜索引擎
    • vuepress配置谷歌统计
    • vuepress配置百度统计
    • vuepress配置cnzz统计
    • vuepress配置侧边栏
    • vuepress支持评论
    • vuepress 资源站
    • vuepress部署为静态网站
    • vuepress支持复制代码块
  • 移动端真机调试方法
  • 前端
  • vuepress
王世彪
2020-09-01
目录

vuepress配置谷歌广告-通过vue-google-adsense库

# vuepress 配置谷歌广告-通过 vue-google-adsense 库

本文讲述如何为 vuepress 站点配置"按广告单元"申请的 adsense 谷歌广告,从而可以在文章的任意位置插入广告。这里采用的技术方案是 vue-google-adsense 依赖库。

提示

本文仅介绍"vue-google-adsense 库"的使用, 作为基础教程vuepress 配置谷歌广告 adsense的补充。
建议您先阅读完vuepress 配置谷歌广告 adsense后再回到本教程。

# 1. 申请广告代码

前往adsense 官网 (opens new window)申请广告代码,本文以”文章内嵌广告“为例。

<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-2310202030754639"
     data-ad-slot="1631732635"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

提示

记录广告代码中的 data-ad-client 和 data-ad-slot, 后续步骤用到。

# 2. 安装依赖

yarn add -D vue-script2 vue-google-adsense

# 3. 修改 docs/.vuepress/enhanceApp.js

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  if (typeof window !== 'undefined') {
    import('vue-google-adsense')
      .then(module => {
        const Ads = module.default
        Vue.use(require('vue-script2'))
        Vue.use(Ads.Adsense)
        Vue.use(Ads.InArticleAdsense)
        Vue.use(Ads.InFeedAdsense)
      })
      .catch(e => {
        console.log(e)
      })
  }
}

# 4. 插入广告

编辑想要插入广告的 md 文档, 在合适的位置插入如下代码即可。

<InArticleAdsense
    data-ad-client="ca-pub-id"
    data-ad-slot="slot_id">
</InArticleAdsense>

提示

将 data-ad-client 和 data-ad-slot 替换为第 1 步得到的值即可。

# 5. 自定义广告位组件

提示

为了方便文档的书写,以及方便广告的管理,建议将广告代码进一步封装为广告位组件。
我们可以定义多个广告位组件, 每个广告位组件唯一对应 adsense 广告的 1 个 slotId。这样就可以把 data-ad-client 和 data-ad-slot 的取值都封装到组件中。
当站点申请了很多的 slotId 时,通过"自定义广告位组件"的方法实现插入广告, 管理或修改广告数据会非常方便。

本章节假定您已掌握"如何自定义组件",否则请先阅读完vuepress 自定义 vue 组件后, 再浏览本章节。

# 1. 创建广告位组件,如 ArticleTopAd.vue, 内容如下:

<template>
  <InArticleAdsense data-ad-client="ca-pub-2310202030754639" data-ad-slot="1631732639"></InArticleAdsense>
</template>

<script>
export default {};
</script>

提示

将 data-ad-client 和 data-ad-slot 的参数值替换为实际取值。

# 2. 插入广告

在文档的对应广告位处, 注入广告位组件 ArticleTopAd 即可。

# js 模板引擎 mustache 用法

<ArticleTopAd></ArticleTopAd>

## 一. 使用步骤

### 1. 引入 mustachejs 库

# 6. Pin码

当您的收入达到10美元后,谷歌会要求您验证PIN码,否则会终止向您的网站投放广告。

详情如下: 当您的广告收入达到10美元后,谷歌会通过email通知您,正在向您账号中指定的付款地址邮递一个PIN码,收到PIN码后,点击email中的“验证您的地址”,在显示的页面中,填写收到的PIN码完成验证。若您当前的收货地址已无效,那么只能等3周后再申请新的PIN码。具体事宜请前往官方文档 (opens new window)。

填写PIN码的页面路径:登录adsense (opens new window) -> 付款 (opens new window) -> 验证检查 (opens new window)

注意:PIN 码是指在您的帐号余额达到进行验证所需的最低限额时生成的 6 位数字。PIN 码与发布商 ID 不同。请仅在 PIN 码验证卡片中输入正确的 PIN 码。请勿输入随机数字。如果 PIN 码输错三次,您的帐号将停止展示广告。
#adsense#广告#谷歌
上次更新: 2022-08-17 22:28:19
vuepress配置谷歌广告adsense
vuepress的seo优化

← vuepress配置谷歌广告adsense vuepress的seo优化→

最近更新
01
mysql创建用户
04-09
02
golang错误处理最佳实践
03-17
03
基于proto文件生成rpc接口定义文档
03-11
更多文章>
Theme by Vdoing | Copyright © 2019-2022 王世彪 | MIT License
冀ICP备19016776号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式