我试着用Matomo跟踪React应用程序（访问分析）
我使用开源的访问分析工具Matomo来跟踪React应用。
- 環境：Windows 11のWSL（Ubuntu）で作業し、ブラウザのみWindows側を使用しました。
安装和启动Matomo
在这篇文章中，我们将使用Docker在本地环境中启动Matomo。
准备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.超级用户”页面上，进行了超级用户设置。
我在「创建网站设置」界面上输入了以后将要创建的React应用程序的信息。
在「恭喜您」的画面上，点击「继续使用MATOMO」按钮。
当出现以下画面时，请登录。
登录成功。
以下是Matomo等的版本。
创建一个React应用程序
我根据这个页面的参考，实现了一个简单的React应用。
以下只展示源代码。
{
"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"
}
}
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>
)
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
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>
)
}
我从Page1.tsx中复制了Page2.tsx，并将其中的1替换为了2。
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 的访问量和操作次数都为零。
启动React应用程序，访问http://localhost:5173/page1。
Matomo的访问次数和操作次数变为了1。
我通过Matomo进入”访客”→”访问日志”，可以观察到对page1的访问情况如下。
在React应用中，我先点击了「page1按钮」两次，然后访问了http://localhost:5173/page2，并点击了「page2按钮」三次。
通过Matomo实时查看，我们可以确认操作次数增加到了7次。
在Matomo中点击”访问日志”，可以观察到有2次页面访问和5次按钮点击。
我在React应用程序中再次访问了 http://localhost:5173/page1，并点击了“page1”按钮五次。
当使用Matomo查看访问日志时，我们可以观察到访问Page1和按钮点击的情况如下。
参考网站（非常感谢）
-
- MatomoJa
-
- Matomo Analytics
-
- Matomo Tracker (React)
- Adding Matomo tracker to React App with Typescript
