オープンソースのアクセス解析ツール「Matomo」を使って、Reactアプリをトラッキングしてみました。
- 環境：Windows 11のWSL（Ubuntu）で作業し、ブラウザのみWindows側を使用しました。
Matomoのインストールと起動
本記事では、Matomoはローカル環境のDockerで起動します。
docker-compose.yml等の準備
WSLのコンソールで作業ディレクトリを作成します。ディレクトリ名は何でも良いです。
cd
mkdir docker_matomo
cd docker_matomo
以下のサイトから、docker-compose.ymlとdb.envを持ってきて、作業ディレクトリに保存します。
docker-compose.ymlの編集
- MYSQL_ROOT_PASSWORDにパスワードを設定します。
- portsはホスト側とコンテナ側で同じ値（80）に設定し直しました。
version: "3"
services:
db:
image: mariadb:10.11
command: --max-allowed-packet=64MB
restart: always
volumes:
- db:/var/lib/mysql:Z
environment:
- - MYSQL_ROOT_PASSWORD=
+ - MYSQL_ROOT_PASSWORD=secret
- MARIADB_AUTO_UPGRADE=1
- MARIADB_DISABLE_UPGRADE_BACKUP=1
env_file:
- ./db.env
app:
image: matomo
restart: always
volumes:
# - ./config:/var/www/html/config:z
# - ./logs:/var/www/html/logs:z
- matomo:/var/www/html:z
environment:
- MATOMO_DATABASE_HOST=db
env_file:
- ./db.env
ports:
- - 8080:80
+ - 80:80
volumes:
db:
matomo:
db.envの編集
- MYSQL_PASSWORDにパスワードを設定します。
- MATOMO_DATABASE_PASSWORDにパスワードを設定します。
-MYSQL_PASSWORD=
+MYSQL_PASSWORD=secret
MYSQL_DATABASE=matomo
MYSQL_USER=matomo
MATOMO_DATABASE_ADAPTER=mysql
MATOMO_DATABASE_TABLES_PREFIX=matomo_
MATOMO_DATABASE_USERNAME=matomo
-MATOMO_DATABASE_PASSWORD=
+MATOMO_DATABASE_PASSWORD=secret
MATOMO_DATABASE_DBNAME=matomo
MARIADB_AUTO_UPGRADE=1
MARIADB_INITDB_SKIP_TZINFO=1
コンテナ群の起動
以下を実行します。
docker compose up -d
ビルドが走って、以下のように表示されました。
[+] Running 28/28
✔ db 8 layers [⣿⣿⣿⣿⣿⣿⣿⣿] 0B/0B Pulled 12.7s
✔ 74ac377868f8 Pull complete 6.4s
✔ 9f8acee20aa1 Pull complete 6.4s
✔ 11b336495e01 Pull complete 6.9s
✔ 20ab1641dd41 Pull complete 6.9s
✔ eaf0c5c99086 Pull complete 7.0s
✔ 239335430207 Pull complete 9.2s
✔ 931baaab2c80 Pull complete 9.2s
✔ f2e86cc8f052 Pull complete 9.3s
✔ app 18 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿] 0B/0B Pulled 9.3s
✔ 26c5c85e47da Pull complete 2.0s
✔ 39c8021d1258 Pull complete 2.1s
✔ dff43c2de684 Pull complete 3.4s
✔ 383987c505e8 Pull complete 3.5s
✔ 3fd742e8a904 Pull complete 3.7s
✔ ccf9807e8362 Pull complete 3.8s
✔ 11cc7ce10028 Pull complete 3.8s
✔ 57c835f75a27 Pull complete 3.9s
✔ 4c8d91ebbe83 Pull complete 4.0s
✔ 48c538ea40cd Pull complete 4.2s
✔ dcf6e657c420 Pull complete 4.3s
✔ 564cd8aea1b3 Pull complete 4.3s
✔ be10554faca5 Pull complete 4.4s
✔ 9b84d91a239c Pull complete 4.5s
✔ a6d225b9a14a Pull complete 4.5s
✔ dfd639ae08f5 Pull complete 5.7s
✔ 8284bbea84df Pull complete 5.8s
✔ 0bf4e56844a0 Pull complete 5.8s
[+] Running 0/1
⠇ Network docker_matomo_default Creating 0.9s
[+] Running 5/5t of type `volume` should not define `bind` option
✔ Network docker_matomo_default Created 0.9s
✔ Volume "docker_matomo_matomo" Created 0.0s
✔ Volume "docker_matomo_db" Created 0.0s
✔ Container docker_matomo-db-1 Started 1.9s
✔ Container docker_matomo-app-1 Started
コンテナ群が起動したか確認します。
docker compose ps
以下のように起動が確認できました。
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
docker_matomo-app-1 matomo "/entrypoint.sh apac…" app 36 seconds ago Up 34 seconds 0.0.0.0:80->80/tcp, :::80->80/tcp
docker_matomo-db-1 mariadb:10.11 "docker-entrypoint.s…" db 36 seconds ago Up 34 seconds 3306/tcp
ブラウザでMatomoサイトに行く
ブラウザで http://localhost にアクセスします。
内容を確認しながら「次へ」ボタンを押します。
「5. スーパーユーザー」の画面で、スーパーユーザーの設定を行いました。
「6. ウェブサイトのセットアップ」の画面で、後ほど作成するReactアプリの情報を入力しました。
「8. おめでとうございます」の画面で、「MATOMOを続ける」ボタンを押します。
以下の画面が出たら、サインインします。
サインインに成功しました。
Matomo等のバージョンは以下の通りです。
Reactアプリの作成
このページを参考に、簡易的なReactアプリを実装しました。
以下、ソースコードだけ載せます。
package.json
{
"name": "try_matomo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@datapunt/matomo-tracker-react": "^0.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0"
},
"devDependencies": {
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}
}
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { MatomoProvider, createInstance } from '@datapunt/matomo-tracker-react'
const instance = createInstance({
urlBase: 'http://localhost',
siteId: 1,
userId: undefined, // optional, default value: `undefined`.
trackerUrl: 'http://localhost/matomo.php', // optional, default value: `${urlBase}matomo.php`
srcUrl: 'http://localhost/matomo.js', // optional, default value: `${urlBase}matomo.js`
disabled: false, // optional, false by default. Makes all tracking calls no-ops if set to true.
heartBeat: { // optional, enabled by default
active: true, // optional, default value: true
seconds: 10 // optional, default value: `15
},
linkTracking: false, // optional, default value: true
configurations: { // optional, default value: {}
// any valid matomo configuration, all below are optional
disableCookies: true,
setSecureCookie: true,
setRequestMethod: 'POST'
}
})
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// @ts-ignore
<MatomoProvider value={instance}>
<App />
</MatomoProvider>
)
App.tsx
import {Page1} from "./pages/Page1"
import {Page2} from "./pages/Page2"
import {BrowserRouter, Route, Routes} from "react-router-dom";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default App
pages/Page1.tsx
import React from "react";
import { useMatomo } from '@datapunt/matomo-tracker-react'
export const Page1 : React.FC = () => {
const { trackPageView, trackEvent } = useMatomo()
React.useEffect(() => {
trackPageView({
documentTitle: 'page1'
});
}, [])
return (
<div>
<button
onClick = {(e) => {
trackEvent({ category: 'page1', action: 'onClick' });
}}
>
page1
</button>
</div>
)
}
Page2.tsxはPage1.tsxからコピーし、1を2に置換しました。
pages/Page2.tsx
import React from "react";
import { useMatomo } from '@datapunt/matomo-tracker-react'
export const Page2 : React.FC = () => {
const { trackPageView, trackEvent } = useMatomo()
React.useEffect(() => {
trackPageView({
documentTitle: 'page2'
});
}, [])
return (
<div>
<button
onClick = {(e) => {
trackEvent({ category: 'page2', action: 'onClick' });
}}
>
page2
</button>
</div>
)
}
Reactアプリの実行とMatomoダッシュボード確認
Reactアプリ起動前は、Matomoのビジット数・アクション数は0になっています。
Reactアプリを起動し、http://localhost:5173/page1 にアクセスします。
Matomoのビジット数・アクション数が1になりました。
Matomoで「ビジター」→「ビジットログ」へ行くと、以下のようにpage1へのアクセスが観測できました。
Reactアプリで「page1ボタン」を2回押した後、http://localhost:5173/page2 にアクセスして「page2ボタン」を3回押しました。
Matomoで「リアルタイム」に行くと、以下のようにアクション数が7に増えたことが確認できました。
Matomoで「ビジットログ」を押すと、以下のように2回のページアクセスと5回のボタン押下が観測できました。
Reactアプリで再び http://localhost:5173/page1 にアクセスし、「page1」ボタンを5回押しました。
Matomoでビジットログを押すと、以下のようにPage1へのアクセスとボタン押下が観測できました。
