Gitbook 静态站点 加入谷歌分析等网站统计代码

Gitbook生成的网站怎么添加网站数据统计？Gitbook怎么加入谷歌分析？Gitbook怎么加入百度统计？Gitbook怎么加入cnzz数据统计？

Gitbook提供了灵活的引入插件的功能，这个需求我们可以通过使用插件实现。

插件地址：https://github.com/xzghua/gitbook-plugin-statistics

npm安装：

npm i gitbook-plugin-statistics

进入Gitbook书籍目录，编辑book.json配置文件，在括号{}里面引入插件，不需要的统计可以将那一行删除或者注释。

gitbook-plugin-statistics使用方法：

1. 如果你添加了百度的参数(token),那么将会用百度统计
2. 如果你添加了cnzz的参数(cnzz_id),那么将会用cnzz统计
3. 如果你添加了google分析的参数(google_id),那么将会用谷歌分析
4. 如果你三者都添加了,那么三个统计就都会用到

"plugins": [
        "statistics"
    ],
    "pluginsConfig": {
        "statistics": {
              "bd_token": "百度token",
              "cnzz_id": xxxxxxx
              "google_id": "google analytics 追踪ID"
            }
    }

示例：

比如我只需要用到谷歌分析，那么cnzz和百度统计我就把他都删了，然后填入我的谷歌分析代码的id

谷歌分析的代码大概是这样的：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XXXXXX');
</script>

https://www.googletagmanager.com/gtag/js?id=XXXXXX这个链接里面的XXXXXX就是你的追踪ID，将其复制填入上面的google analytics 追踪ID即可。

"plugins": [
        "statistics"
    ],
    "pluginsConfig": {
        "statistics": {
              "google_id": "XXXXXX"
            }
    }

然后是book.json的完整代码

{
  "title": "我是标题",
  "description": "我是描述",

  "plugins": [
    "statistics"
  ],
  "pluginsConfig": {
    "statistics": {
          "google_id": "XXXXXX"
        }
  }
}

配置完book.json后在书籍目录执行下面命令就可以生成静态网站了。

gitbook install
gitbook serve
gitbook build

生成的静态网站输出在书籍目录的_book文件夹里面。

参考：

learn-gitbook.gitbook.io/gitbook/

yangjh.oschina.io/gitbook/