がいへきの電脳
About Contact Category Tag
🐐

VuePressブログにGoatCounterを導入する

Web サイトのアクセス解析は Google Analytics(以下 GA)が主流です。しかし、GA はプライバシーの面で問題が指摘され、EU 域へページを公開する場合には GDPR の同意が必要となっています。

このブログには GA ではなく、OSS の計測ツール、GoatCounter を設定することにしたので、そのやり方を残しておきます。

# GoatCounter とは

GoatCounter はオープンソースで開発されているアクセス解析ツールです。各ページへのアクセス数とアクセス元を計測できます。

loading...

OSS の解析ツールでは自分でホストする必要があるものが多いのですが、GoatCounter では個人利用なら無料で SaaS として利用することができます。制限は月間 10 万 PV です。

GDPR に関しては以下のページで解説されています。個人特定できる情報を収集しないので問題ないと考えている…とのことです。

loading...

# 登録方法

登録に関しては Gigazine で解説されていたので貼っておきます。

loading...

ここで入力を求められるコードと言うのは、いわゆるユーザ ID のことです。自分のダッシュボードの URL として使われます。

またロボット弾きとして 9 を入力する欄があります面白いですね

登録後のページではタグを入力していないと何も出ないので次にタグを設定します

# VuePress への導入方法

公式ページに書かれているとおり、以下の計測タグを設置すれば OK です。

loading...
 
<script
  data-goatcounter="https://yoursite.goatcounter.com/count"
  async
  src="//gc.zgo.at/count.js"
></script>
1
2
3
4
5

「どこでも動くけど</body>直前が良いかな」とのことなので、enhanceApp を使ってタグを設置します。

loading...

VuePress 管理化、.vuepress/enhanceApp.jsに DOM 操作のコードを追加します。このファイルは自動では作られないので、存在していない場合はファイルの作成を行ってください。

// .vuepress/enhanceApp.js
export default () => {
  if (process.env.NODE_ENV === "production" && typeof window !== "undefined") {
    const body = document.getElementsByTagName("body")[0];
    const goat = document.createElement("script");
    goat.setAttribute(
      "data-goatcounter",
      "https://your-code.goatcounter.com/count"
    );
    goat.src = "//gc.zgo.at/count.js";
    goat.async = 1;
    body.insertBefore(goat, null);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

やっていることは以下のようになります。本番環境でのみ動作します。

  1. <script></script>のタグを作成
  2. そこに属性を設定
  3. <body></body>の最後に追加

または、Plugin API を使用し、自作プラグインとして記述することもできます。

// .vuepress/plugin-goatcounter
const goatcounter = {
  name: "goatcounter",
  content: `export default () => {  
    if (typeof window !== "undefined") {  
      const body = document.getElementsByTagName("body")[0];  
      const goat = document.createElement("script");  
      goat.setAttribute(  
        "data-goatcounter",  
        "https://your-code.goatcounter.com/count"  
      );  
      goat.src = "//gc.zgo.at/count.js";  
      goat.async = 1;  
      body.insertBefore(goat, null);  
    }  
  }`,
};

module.exports = (options, ctx) => {
  return {
    name: "plugin-goatcounter",

    enhanceAppFiles() {
      if (!ctx.isProd) {
        return;
      }
      return goatcounter;
    },
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

この場合、.vuepress/config.jsにて、作成したプラグインの有効化を行ってください。

// .vuepress/config.js
module.exports = {
  plugins: [require("./plugin-goatcounter.js")],
  // ...
};
1
2
3
4
5

これでプロジェクトを本番にデプロイし、タグが設定されたことを確認できれば完了です。

以上、GoatCounter を VuePress へ導入する方法でした。

どのように計測されるか、しばらくは様子を見てみようと思います。