Plausible のデータを定期的に取得して過去 30 日間のアクセス数を表示する

Plausible Analytics は、プライバシーに配慮した軽量なオープンソースのアクセス解析ツール
このノートは、Plausible からアクセスデータを取得し、各ページのアクセス数を Web ページで動的に表示する方法の覚え書き

アクセス数を表示するまでの基本的な流れ

Python スクリプトを cron で定期的に実行して Plausible API からアクセスデータを取得し、ファイルに保存
JavaScript でファイルに保存したアクセスデータを読み込み、HTML の読み込み後にアクセス数の部分を上書き

Python スクリプトで Plausible API にアクセス

必要なパッケージのインストール

必要があれば、下記の Python ライブラリをインストール
- requests：Python で HTTP リクエストを行うためのライブラリ
- python-dotenv：環境変数を管理するライブラリ

pip install requests python-dotenv

Python スクリプトの作成

Plausible API からアクセスデータを取得し、ファイルに保存するスクリプトを作成
- 過去 30 日間のページビュー数を取得して、plausible_data.json というファイルに JSON 形式で保存する
PLAUSIBLE_API_KEYとPLAUSIBLE_SITE_IDは、環境変数から取得する
- ログインシェルが bash の場合、.bashrc内で設定する
  - 例：export PLAUSIBLE_SITE_ID='yamnor.me'

import requests
from dotenv import load_dotenv
import json
import os

load_dotenv()

PLAUSIBLE_API_KEY = os.getenv('PLAUSIBLE_API_KEY')
PLAUSIBLE_SITE_ID = os.getenv('PLAUSIBLE_SITE_ID')'

def fetch_plausible_data():
  headers = {'Authorization': f'Bearer {PLAUSIBLE_API_KEY}'}
  params = {
    'site_id': PLAUSIBLE_SITE_ID,
    'property': 'event:page',
    'metrics': 'pageviews',
    'period': '30d',
  }
  url = f'https://plausible.io/api/v1/stats/breakdown'
  response = requests.get(url, headers=headers, params=params)

  if response.status_code == 200:
    with open('/path/to/plausible_data.json', 'w') as f:
      json.dump(response.json(), f)
  else:
    print(f'Failed to fetch data: {response.status_code}')

if __name__ == '__main__':
  fetch_plausible_data()

定期実行のための Cron ジョブ

Python スクリプトを毎時実行するために、Linux の cron ジョブを設定する

crontab -e

以下を追加して保存
- この例では、毎時 0 分にスクリプトを実行する

0 * * * * /usr/bin/python3 /path/to/fetch_plausible.py

JavaScript でのアクセスデータの読み込みと表示

JavaScript を使って、JSON 形式のアクセスデータ（plausible_data.json）を読み込み、Web ページに動的に表示する
Web ページ内の li 要素に、各ページの permalink に基づいて id を付与
- permalink に / と - が含まれていたら除去
  - 例：2024-04-30-1234の場合、202404301234に
.pageviewクラスを持つ<span>...</span>の中身をアクセス数で置き換える

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plausible Page Views</title>
</head>
<body>
  <h1>Page Views</h1>
  <ul id="page-views">
    <li id="page1">Page 1: <span class="pageviews"></span></li>
    <li id="page2">Page 2: <span class="pageviews"></span></li>
    <li id="page3">Page 3: <span class="pageviews"></span></li>
  </ul>
  <script src="display_pageviews.js"></script>
</body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  fetch('/plausible_data.json')
  .then(response => response.json())
  .then(data => {
    data.results.forEach(item => {
      const pageId = item.page.replace(/[\/-]/g, ''); // ページの permalink に含まれる "/" と "-" を除去
      const pageElement = document.getElementById(pageId);
      if (pageElement) {
        pageElement.querySelector('.pageviews').textContent = item.pageviews;
      }
    });
  })
  .catch(error => console.error('Failed to load data:', error));
});

Posted : 24.04.30