{"id":38547,"date":"2023-05-25T19:57:13","date_gmt":"2023-12-08T20:03:04","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/"},"modified":"2024-04-30T05:56:14","modified_gmt":"2024-04-29T21:56:14","slug":"%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/","title":{"rendered":"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09"},"content":{"rendered":"<p>\u6211\u4f7f\u7528\u5f00\u6e90\u7684\u8bbf\u95ee\u5206\u6790\u5de5\u5177Matomo\u6765\u8ddf\u8e2aReact\u5e94\u7528\u3002<\/p>\n<ul class=\"post-ul\">\u74b0\u5883\uff1aWindows 11\u306eWSL\uff08Ubuntu\uff09\u3067\u4f5c\u696d\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u307fWindows\u5074\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002<\/ul>\n<h1>\u5b89\u88c5\u548c\u542f\u52a8Matomo<\/h1>\n<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528Docker\u5728\u672c\u5730\u73af\u5883\u4e2d\u542f\u52a8Matomo\u3002<\/p>\n<h2>\u51c6\u5907docker-compose.yml\u7b49\u76f8\u5173\u6587\u4ef6<\/h2>\n<p>\u5728WSL\u7684\u63a7\u5236\u53f0\u4e2d\u521b\u5efa\u5de5\u4f5c\u76ee\u5f55\u3002\u53ef\u4ee5\u4efb\u610f\u547d\u540d\u76ee\u5f55\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"nb\">cd\r\nmkdir <\/span>docker_matomo\r\n<span class=\"nb\">cd <\/span>docker_matomo\r\n<\/code><\/pre>\n<p>\u4ece\u4ee5\u4e0b\u7f51\u7ad9\u83b7\u53d6docker-compose.yml\u548cdb.env\u6587\u4ef6\uff0c\u5e76\u4fdd\u5b58\u5230\u5de5\u4f5c\u76ee\u5f55\u4e2d\u3002<\/p>\n<p>&nbsp;<\/p>\n<h3>\u7f16\u8f91docker-compose.yml\u6587\u4ef6\u3002<\/h3>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">MYSQL_ROOT_PASSWORD\u306b\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">ports\u306f\u30db\u30b9\u30c8\u5074\u3068\u30b3\u30f3\u30c6\u30ca\u5074\u3067\u540c\u3058\u5024\uff0880\uff09\u306b\u8a2d\u5b9a\u3057\u76f4\u3057\u307e\u3057\u305f\u3002<\/ul>\n<pre class=\"post-pre\"><code>\r\n<span class=\"p\">version: \"3\"\r\n<\/span>\r\n<span class=\"p\">services:\r\n<\/span>  db:\r\n    image: mariadb:10.11\r\n    command: --max-allowed-packet=64MB\r\n    restart: always\r\n    volumes:\r\n      - db:\/var\/lib\/mysql:Z\r\n    environment:\r\n<span class=\"gd\">-      - MYSQL_ROOT_PASSWORD=\r\n<\/span><span class=\"gi\">+      - MYSQL_ROOT_PASSWORD=secret\r\n<\/span>      - MARIADB_AUTO_UPGRADE=1\r\n      - MARIADB_DISABLE_UPGRADE_BACKUP=1\r\n    env_file:\r\n      - .\/db.env\r\n\r\n  app:\r\n    image: matomo\r\n    restart: always\r\n    volumes:\r\n#     - .\/config:\/var\/www\/html\/config:z\r\n#     - .\/logs:\/var\/www\/html\/logs:z\r\n      - matomo:\/var\/www\/html:z\r\n    environment:\r\n      - MATOMO_DATABASE_HOST=db\r\n    env_file:\r\n      - .\/db.env\r\n    ports:\r\n<span class=\"gd\">-      - 8080:80\r\n<\/span><span class=\"gi\">+      - 80:80\r\n<\/span>\r\n<span class=\"p\">volumes:\r\n<\/span>  db:\r\n  matomo:\r\n<\/code><\/pre>\n<h3>\u7f16\u8f91db.env<\/h3>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">MYSQL_PASSWORD\u306b\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">MATOMO_DATABASE_PASSWORD\u306b\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/ul>\n<pre class=\"post-pre\"><code>\r\n<span class=\"gd\">-MYSQL_PASSWORD=\r\n<\/span><span class=\"gi\">+MYSQL_PASSWORD=secret\r\n<\/span><span class=\"p\">MYSQL_DATABASE=matomo\r\nMYSQL_USER=matomo\r\nMATOMO_DATABASE_ADAPTER=mysql\r\nMATOMO_DATABASE_TABLES_PREFIX=matomo_\r\nMATOMO_DATABASE_USERNAME=matomo\r\n<\/span><span class=\"gd\">-MATOMO_DATABASE_PASSWORD=\r\n<\/span><span class=\"gi\">+MATOMO_DATABASE_PASSWORD=secret\r\n<\/span><span class=\"p\">MATOMO_DATABASE_DBNAME=matomo\r\nMARIADB_AUTO_UPGRADE=1\r\nMARIADB_INITDB_SKIP_TZINFO=1\r\n<\/span><\/code><\/pre>\n<h2>\u5bb9\u5668\u96c6\u7fa4\u7684\u542f\u52a8<\/h2>\n<p>\u8fdb\u884c\u4ee5\u4e0b\u64cd\u4f5c\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\ndocker compose up <span class=\"nt\">-d<\/span>\r\n<\/code><\/pre>\n<p>\u697c\u5b87\u5df2\u5efa\u6210\uff0c\u5e76\u4ee5\u4ee5\u4e0b\u65b9\u5f0f\u663e\u793a\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n[+] Running 28\/28\r\n \u2714 db 8 layers [\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff]      0B\/0B      Pulled                                                                  12.7s\r\n   \u2714 74ac377868f8 Pull complete                                                                                    6.4s\r\n   \u2714 9f8acee20aa1 Pull complete                                                                                    6.4s\r\n   \u2714 11b336495e01 Pull complete                                                                                    6.9s\r\n   \u2714 20ab1641dd41 Pull complete                                                                                    6.9s\r\n   \u2714 eaf0c5c99086 Pull complete                                                                                    7.0s\r\n   \u2714 239335430207 Pull complete                                                                                    9.2s\r\n   \u2714 931baaab2c80 Pull complete                                                                                    9.2s\r\n   \u2714 f2e86cc8f052 Pull complete                                                                                    9.3s\r\n \u2714 app 18 layers [\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff\u28ff]      0B\/0B      Pulled                                                       9.3s\r\n   \u2714 26c5c85e47da Pull complete                                                                                    2.0s\r\n   \u2714 39c8021d1258 Pull complete                                                                                    2.1s\r\n   \u2714 dff43c2de684 Pull complete                                                                                    3.4s\r\n   \u2714 383987c505e8 Pull complete                                                                                    3.5s\r\n   \u2714 3fd742e8a904 Pull complete                                                                                    3.7s\r\n   \u2714 ccf9807e8362 Pull complete                                                                                    3.8s\r\n   \u2714 11cc7ce10028 Pull complete                                                                                    3.8s\r\n   \u2714 57c835f75a27 Pull complete                                                                                    3.9s\r\n   \u2714 4c8d91ebbe83 Pull complete                                                                                    4.0s\r\n   \u2714 48c538ea40cd Pull complete                                                                                    4.2s\r\n   \u2714 dcf6e657c420 Pull complete                                                                                    4.3s\r\n   \u2714 564cd8aea1b3 Pull complete                                                                                    4.3s\r\n   \u2714 be10554faca5 Pull complete                                                                                    4.4s\r\n   \u2714 9b84d91a239c Pull complete                                                                                    4.5s\r\n   \u2714 a6d225b9a14a Pull complete                                                                                    4.5s\r\n   \u2714 dfd639ae08f5 Pull complete                                                                                    5.7s\r\n   \u2714 8284bbea84df Pull complete                                                                                    5.8s\r\n   \u2714 0bf4e56844a0 Pull complete                                                                                    5.8s\r\n[+] Running 0\/1\r\n \u2807 Network docker_matomo_default  Creating                                                                         0.9s\r\n[+] Running 5\/5t of type `volume` should not define `bind` option\r\n \u2714 Network docker_matomo_default  Created                                                                          0.9s\r\n \u2714 Volume \"docker_matomo_matomo\"  Created                                                                          0.0s\r\n \u2714 Volume \"docker_matomo_db\"      Created                                                                          0.0s\r\n \u2714 Container docker_matomo-db-1   Started                                                                          1.9s\r\n \u2714 Container docker_matomo-app-1  Started\r\n<\/code><\/pre>\n<p>\u67e5\u770b\u5bb9\u5668\u7ec4\u662f\u5426\u5df2\u542f\u52a8\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\ndocker compose ps\r\n<\/code><\/pre>\n<p>\u6211\u786e\u8ba4\u542f\u52a8\u5982\u4e0b\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\nNAME                  IMAGE               COMMAND                  SERVICE             CREATED             STATUS              PORTS\r\ndocker_matomo-app-1   matomo              \"\/entrypoint.sh apac\u2026\"   app                 36 seconds ago      Up 34 seconds       0.0.0.0:80-&gt;80\/tcp, :::80-&gt;80\/tcp\r\ndocker_matomo-db-1    mariadb:10.11       \"docker-entrypoint.s\u2026\"   db                  36 seconds ago      Up 34 seconds       3306\/tcp\r\n<\/code><\/pre>\n<h2>\u7528\u6d4f\u89c8\u5668\u8bbf\u95eeMatomo\u7f51\u7ad9<\/h2>\n<p>\u5728\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95ee http:\/\/localhost\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/26-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5728\u67e5\u770b\u5185\u5bb9\u65f6\u70b9\u51fb\u201c\u4e0b\u4e00\u6b65\u201d\u6309\u94ae\u3002<br \/>\n\u5728\u201c5.\u8d85\u7ea7\u7528\u6237\u201d\u9875\u9762\u4e0a\uff0c\u8fdb\u884c\u4e86\u8d85\u7ea7\u7528\u6237\u8bbe\u7f6e\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/28-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u6211\u5728\u300c\u521b\u5efa\u7f51\u7ad9\u8bbe\u7f6e\u300d\u754c\u9762\u4e0a\u8f93\u5165\u4e86\u4ee5\u540e\u5c06\u8981\u521b\u5efa\u7684React\u5e94\u7528\u7a0b\u5e8f\u7684\u4fe1\u606f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/30-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5728\u300c\u606d\u559c\u60a8\u300d\u7684\u753b\u9762\u4e0a\uff0c\u70b9\u51fb\u300c\u7ee7\u7eed\u4f7f\u7528MATOMO\u300d\u6309\u94ae\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/32-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5f53\u51fa\u73b0\u4ee5\u4e0b\u753b\u9762\u65f6\uff0c\u8bf7\u767b\u5f55\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/34-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u767b\u5f55\u6210\u529f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/36-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u4ee5\u4e0b\u662fMatomo\u7b49\u7684\u7248\u672c\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/38-0.png\" alt=\"image.png\" \/><\/div>\n<h1>\u521b\u5efa\u4e00\u4e2aReact\u5e94\u7528\u7a0b\u5e8f<\/h1>\n<p>\u6211\u6839\u636e\u8fd9\u4e2a\u9875\u9762\u7684\u53c2\u8003\uff0c\u5b9e\u73b0\u4e86\u4e00\u4e2a\u7b80\u5355\u7684React\u5e94\u7528\u3002<br \/>\n\u4ee5\u4e0b\u53ea\u5c55\u793a\u6e90\u4ee3\u7801\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"try_matomo\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"private\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"version\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"0.0.0\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"module\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"dev\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"vite\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"build\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"tsc &amp;&amp; vite build\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"preview\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"vite preview\"<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"dependencies\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"@datapunt\/matomo-tracker-react\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^0.5.1\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"react\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^18.2.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"react-dom\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^18.2.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"react-router-dom\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^6.10.0\"<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"devDependencies\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"@types\/react\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^18.0.27\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@types\/react-dom\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^18.0.10\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"@vitejs\/plugin-react\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^3.1.0\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"typescript\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^4.9.3\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"vite\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"^4.1.0\"<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-dom\/client<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">App<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/App<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MatomoProvider<\/span><span class=\"p\">,<\/span> <span class=\"nx\">createInstance<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@datapunt\/matomo-tracker-react<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">instance<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createInstance<\/span><span class=\"p\">({<\/span>\r\n    <span class=\"na\">urlBase<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">siteId<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, default value: `undefined`.<\/span>\r\n    <span class=\"na\">trackerUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost\/matomo.php<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, default value: `${urlBase}matomo.php`<\/span>\r\n    <span class=\"na\">srcUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost\/matomo.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, default value: `${urlBase}matomo.js`<\/span>\r\n    <span class=\"na\">disabled<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, false by default. Makes all tracking calls no-ops if set to true.<\/span>\r\n    <span class=\"na\">heartBeat<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"c1\">\/\/ optional, enabled by default<\/span>\r\n        <span class=\"na\">active<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, default value: true<\/span>\r\n        <span class=\"na\">seconds<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"c1\">\/\/ optional, default value: `15<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"na\">linkTracking<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ optional, default value: true<\/span>\r\n    <span class=\"na\">configurations<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"c1\">\/\/ optional, default value: {}<\/span>\r\n        <span class=\"c1\">\/\/ any valid matomo configuration, all below are optional<\/span>\r\n        <span class=\"na\">disableCookies<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">setSecureCookie<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">setRequestMethod<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">})<\/span>\r\n\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">createRoot<\/span><span class=\"p\">(<\/span><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span><span class=\"p\">).<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"c1\">\/\/ @ts-ignore<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">MatomoProvider<\/span> <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">instance<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">App<\/span> <span class=\"o\">\/&gt;<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/MatomoProvider<\/span><span class=\"err\">&gt;\r\n<\/span><span class=\"p\">)<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Page1<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Page1<\/span><span class=\"dl\">\"<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Page2<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Page2<\/span><span class=\"dl\">\"<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">BrowserRouter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">BrowserRouter<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Routes<\/span><span class=\"o\">&gt;<\/span>\r\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/page1<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">element<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Page1<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/page2<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">element<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Page2<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Routes<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/BrowserRouter<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMatomo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@datapunt\/matomo-tracker-react<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Page1<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">trackPageView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">trackEvent<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMatomo<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nf\">trackPageView<\/span><span class=\"p\">({<\/span>\r\n            <span class=\"na\">documentTitle<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">page1<\/span><span class=\"dl\">'<\/span>\r\n        <span class=\"p\">});<\/span>\r\n    <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\r\n\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\r\n                <span class=\"nx\">onClick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n                    <span class=\"nf\">trackEvent<\/span><span class=\"p\">({<\/span> <span class=\"na\">category<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">page1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">action<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">onClick<\/span><span class=\"dl\">'<\/span> <span class=\"p\">});<\/span>\r\n                <span class=\"p\">}}<\/span>\r\n            <span class=\"o\">&gt;<\/span>\r\n                <span class=\"nx\">page1<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u4ecePage1.tsx\u4e2d\u590d\u5236\u4e86Page2.tsx\uff0c\u5e76\u5c06\u5176\u4e2d\u76841\u66ff\u6362\u4e3a\u4e862\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMatomo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@datapunt\/matomo-tracker-react<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Page2<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">trackPageView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">trackEvent<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMatomo<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nf\">trackPageView<\/span><span class=\"p\">({<\/span>\r\n            <span class=\"na\">documentTitle<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">page2<\/span><span class=\"dl\">'<\/span>\r\n        <span class=\"p\">});<\/span>\r\n    <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\r\n\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\r\n                <span class=\"nx\">onClick<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n                    <span class=\"nf\">trackEvent<\/span><span class=\"p\">({<\/span> <span class=\"na\">category<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">page2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">action<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">onClick<\/span><span class=\"dl\">'<\/span> <span class=\"p\">});<\/span>\r\n                <span class=\"p\">}}<\/span>\r\n            <span class=\"o\">&gt;<\/span>\r\n                <span class=\"nx\">page2<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h1>\u6267\u884cReact\u5e94\u7528\u7a0b\u5e8f\u5e76\u786e\u8ba4Matomo\u4eea\u8868\u677f<\/h1>\n<p>\u5728 React \u5e94\u7528\u542f\u52a8\u4e4b\u524d\uff0cMatomo \u7684\u8bbf\u95ee\u91cf\u548c\u64cd\u4f5c\u6b21\u6570\u90fd\u4e3a\u96f6\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/49-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u542f\u52a8React\u5e94\u7528\u7a0b\u5e8f\uff0c\u8bbf\u95eehttp:\/\/localhost:5173\/page1\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/51-0.png\" alt=\"image.png\" \/><\/div>\n<p>Matomo\u7684\u8bbf\u95ee\u6b21\u6570\u548c\u64cd\u4f5c\u6b21\u6570\u53d8\u4e3a\u4e861\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/53-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u6211\u901a\u8fc7Matomo\u8fdb\u5165&#8221;\u8bbf\u5ba2&#8221;\u2192&#8221;\u8bbf\u95ee\u65e5\u5fd7&#8221;\uff0c\u53ef\u4ee5\u89c2\u5bdf\u5230\u5bf9page1\u7684\u8bbf\u95ee\u60c5\u51b5\u5982\u4e0b\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/55-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5728React\u5e94\u7528\u4e2d\uff0c\u6211\u5148\u70b9\u51fb\u4e86\u300cpage1\u6309\u94ae\u300d\u4e24\u6b21\uff0c\u7136\u540e\u8bbf\u95ee\u4e86http:\/\/localhost:5173\/page2\uff0c\u5e76\u70b9\u51fb\u4e86\u300cpage2\u6309\u94ae\u300d\u4e09\u6b21\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/57-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u901a\u8fc7Matomo\u5b9e\u65f6\u67e5\u770b\uff0c\u6211\u4eec\u53ef\u4ee5\u786e\u8ba4\u64cd\u4f5c\u6b21\u6570\u589e\u52a0\u5230\u4e867\u6b21\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/59-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5728Matomo\u4e2d\u70b9\u51fb&#8221;\u8bbf\u95ee\u65e5\u5fd7&#8221;\uff0c\u53ef\u4ee5\u89c2\u5bdf\u5230\u67092\u6b21\u9875\u9762\u8bbf\u95ee\u548c5\u6b21\u6309\u94ae\u70b9\u51fb\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/61-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u6211\u5728React\u5e94\u7528\u7a0b\u5e8f\u4e2d\u518d\u6b21\u8bbf\u95ee\u4e86 http:\/\/localhost:5173\/page1\uff0c\u5e76\u70b9\u51fb\u4e86\u201cpage1\u201d\u6309\u94ae\u4e94\u6b21\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/63-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u5f53\u4f7f\u7528Matomo\u67e5\u770b\u8bbf\u95ee\u65e5\u5fd7\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u89c2\u5bdf\u5230\u8bbf\u95eePage1\u548c\u6309\u94ae\u70b9\u51fb\u7684\u60c5\u51b5\u5982\u4e0b\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/65-0.png\" alt=\"image.png\" \/><\/div>\n<h1>\u53c2\u8003\u7f51\u7ad9\uff08\u975e\u5e38\u611f\u8c22\uff09<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">MatomoJa<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Matomo Analytics<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Matomo Tracker (React)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Adding Matomo tracker to React App with Typescript<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6211\u4f7f\u7528\u5f00\u6e90\u7684\u8bbf\u95ee\u5206\u6790\u5de5\u5177Matomo\u6765\u8ddf\u8e2aReact\u5e94\u7528\u3002 \u74b0\u5883\uff1aWindows 11\u306eWSL\uff08Ubuntu\uff09 [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38547","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u7740\u7528matomo\u8ddf\u8e2areact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\" \/>\n<meta property=\"og:description\" content=\"\u6211\u4f7f\u7528\u5f00\u6e90\u7684\u8bbf\u95ee\u5206\u6790\u5de5\u5177Matomo\u6765\u8ddf\u8e2aReact\u5e94\u7528\u3002 \u74b0\u5883\uff1aWindows 11\u306eWSL\uff08Ubuntu\uff09 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u7740\u7528matomo\u8ddf\u8e2areact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-08T20:03:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T21:56:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/26-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u5b87\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u5b87\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/\",\"name\":\"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-12-08T20:03:04+00:00\",\"dateModified\":\"2024-04-29T21:56:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\",\"name\":\"\u6e05, \u5b87\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u5b87\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u7740\u7528matomo\u8ddf\u8e2areact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09","og_description":"\u6211\u4f7f\u7528\u5f00\u6e90\u7684\u8bbf\u95ee\u5206\u6790\u5de5\u5177Matomo\u6765\u8ddf\u8e2aReact\u5e94\u7528\u3002 \u74b0\u5883\uff1aWindows 11\u306eWSL\uff08Ubuntu\uff09 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u7740\u7528matomo\u8ddf\u8e2areact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-12-08T20:03:04+00:00","article_modified_time":"2024-04-29T21:56:14+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d34ff37434c4406c6aeb0\/26-0.png"}],"author":"\u6e05, \u5b87","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u5b87","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/","name":"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-12-08T20:03:04+00:00","dateModified":"2024-04-29T21:56:14+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u8bd5\u7740\u7528Matomo\u8ddf\u8e2aReact\u5e94\u7528\u7a0b\u5e8f\uff08\u8bbf\u95ee\u5206\u6790\uff09"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e","name":"\u6e05, \u5b87","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","caption":"\u6e05, \u5b87"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e7%9d%80%e7%94%a8matomo%e8%b7%9f%e8%b8%aareact%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e8%ae%bf%e9%97%ae%e5%88%86%e6%9e%90%ef%bc%89%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38547"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38547\/revisions"}],"predecessor-version":[{"id":90108,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38547\/revisions\/90108"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}