首页 发现 帮助
登录
luoy
/
buried-point
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

feature：关于matomo的三种demo实现

luoy 1 月之前
父节点
62598905c2
当前提交
c75c489036
共有 9 个文件被更改，包括 54 次插入 和 103 次删除
合并视图 显示文件统计
  1. 14 3
      main.html
  2. 0 1
      react-test/package.json
  3. 13 0
      react-test/src/App.js
  4. 0 6
      react-test/src/index.js
  5. 12 48
      vue-test/package-lock.json
  6. 2 2
      vue-test/package.json
  7. 7 6
      vue-test/src/main.js
  8. 0 11
      vue-test/src/usePosthog.js
  9. 6 26
      vue-test/yarn.lock

+ 14 - 3
main.html
查看文件 

@@ -5,13 +5,24 @@
 
   <title>Document</title>
 
   <title>Document</title>
 
 </head>
 
 </head>
 
 
 
+
 
 <body>
 
 <body>
 
   这是一个空页面
 
   这是一个空页面
 
   <button id="btn">点击我</button>
 
   <button id="btn">点击我</button>
 
 </body>
 
 </body>
 
-
 
+<!-- Matomo -->
 
 <script>
 
 <script>
 
-    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
 
-    posthog.init('phc_5YuF937Fs3N0djI4XFThsGAZfgaciU9pjKw6T3SQjvV',{api_host:'https://us.i.posthog.com', defaults:'2025-05-24'})
 
+  var _paq = window._paq = window._paq || [];
 
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
 
+  _paq.push(['trackPageView']);
 
+  _paq.push(['enableLinkTracking']);
 
+  (function() {
 
+    var u="https://192168316.matomo.cloud/";
 
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
 
+    _paq.push(['setSiteId', '1']);
 
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 
+    g.async=true; g.src='https://cdn.matomo.cloud/192168316.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
 
+  })();
 
 </script>
 
 </script>
 
+<!-- End Matomo Code -->
 
 </html>
 
 </html>

+ 0 - 1
react-test/package.json
查看文件 

@@ -7,7 +7,6 @@
 
     "@testing-library/jest-dom": "^6.6.3",
 
     "@testing-library/jest-dom": "^6.6.3",
 
     "@testing-library/react": "^16.3.0",
 
     "@testing-library/react": "^16.3.0",
 
     "@testing-library/user-event": "^13.5.0",
 
     "@testing-library/user-event": "^13.5.0",
 
-    "posthog-js": "^1.256.1",
 
     "react": "^19.1.0",
 
     "react": "^19.1.0",
 
     "react-dom": "^19.1.0",
 
     "react-dom": "^19.1.0",
 
     "react-scripts": "5.0.1",
 
     "react-scripts": "5.0.1",

+ 13 - 0
react-test/src/App.js
查看文件 

@@ -1,7 +1,20 @@
 
 import logo from './logo.svg';
 
 import logo from './logo.svg';
 
+import { useEffect } from 'react'
 
 import './App.css';
 
 import './App.css';
 
 
 
 function App() {
 
 function App() {
 
+  useEffect(() => {
 
+    // var _mtm = window._mtm = window._mtm || [];
 
+    // _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
 
+    var _paq = window._paq = window._paq || [];
 
+    _paq.push(['trackPageView']);
 
+    _paq.push(['enableLinkTracking']);
 
+    var u="https://192168316.matomo.cloud/";
 
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
 
+    _paq.push(['setSiteId', '1']);
 
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 
+    g.async=true; g.src='https://cdn.matomo.cloud/192168316.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
 
+  }, [])
 
   return (
 
   return (
 
     <div className="App">
 
     <div className="App">
 
       这是个空白页
 
       这是个空白页

+ 0 - 6
react-test/src/index.js
查看文件 

@@ -3,17 +3,11 @@ import ReactDOM from 'react-dom/client';
 
 import './index.css';
 
 import './index.css';
 
 import App from './App';
 
 import App from './App';
 
 import reportWebVitals from './reportWebVitals';
 
 import reportWebVitals from './reportWebVitals';
 
-import { PostHogProvider } from 'posthog-js/react'
 
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
-const options = {
 
-  api_host: process.env.REACT_APP_POSTHOG_HOST,
 
-}
 
 root.render(
 
 root.render(
 
   <React.StrictMode>
 
   <React.StrictMode>
 
-    <PostHogProvider apiKey={process.env.REACT_APP_POSTHOG_KEY} options={options}>
 
       <App />
 
       <App />
 
-    </PostHogProvider>
 
   </React.StrictMode>
 
   </React.StrictMode>
 
 );
 
 );

+ 12 - 48
vue-test/package-lock.json
查看文件 

@@ -9,8 +9,8 @@
 
       "version": "0.1.0",
 
       "version": "0.1.0",
 
       "dependencies": {
 
       "dependencies": {
 
         "core-js": "^3.8.3",
 
         "core-js": "^3.8.3",
 
-        "posthog-js": "^1.256.1",
 
-        "vue": "^3.2.13"
 
+        "vue": "^3.2.13",
 
+        "vue-matomo": "^4.2.0"
 
       },
 
       },
 
       "devDependencies": {
 
       "devDependencies": {
 
         "@babel/core": "^7.12.16",
 
         "@babel/core": "^7.12.16",
 
@@ -5872,12 +5872,6 @@
 
         "node": ">=0.8.0"
 
         "node": ">=0.8.0"
 
       }
 
       }
 
     },
 
     },
 
-    "node_modules/fflate": {
 
-      "version": "0.4.8",
 
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
 
-      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==",
 
-      "license": "MIT"
 
-    },
 
     "node_modules/figures": {
 
     "node_modules/figures": {
 
       "version": "2.0.0",
 
       "version": "2.0.0",
 
       "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
 
@@ -8977,40 +8971,6 @@
 
       "dev": true,
 
       "dev": true,
 
       "license": "MIT"
 
       "license": "MIT"
 
     },
 
     },
 
-    "node_modules/posthog-js": {
 
-      "version": "1.256.1",
 
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.256.1.tgz",
 
-      "integrity": "sha512-cBLc3W1BHHzxYlJc6kIDbbPVUFTRbsObG0Cn1CnEG7lcyWKbalmW1XvUw7+lu/yyHYfCf7hwTTBJF7GgGFFMmw==",
 
-      "license": "SEE LICENSE IN LICENSE",
 
-      "dependencies": {
 
-        "core-js": "^3.38.1",
 
-        "fflate": "^0.4.8",
 
-        "preact": "^10.19.3",
 
-        "web-vitals": "^4.2.4"
 
-      },
 
-      "peerDependencies": {
 
-        "@rrweb/types": "2.0.0-alpha.17",
 
-        "rrweb-snapshot": "2.0.0-alpha.17"
 
-      },
 
-      "peerDependenciesMeta": {
 
-        "@rrweb/types": {
 
-          "optional": true
 
-        },
 
-        "rrweb-snapshot": {
 
-          "optional": true
 
-        }
 
-      }
 
-    },
 
-    "node_modules/preact": {
 
-      "version": "10.26.9",
 
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz",
 
-      "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==",
 
-      "license": "MIT",
 
-      "funding": {
 
-        "type": "opencollective",
 
-        "url": "https://opencollective.com/preact"
 
-      }
 
-    },
 
     "node_modules/prelude-ls": {
 
     "node_modules/prelude-ls": {
 
       "version": "1.2.1",
 
       "version": "1.2.1",
 
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",
 
@@ -11039,6 +10999,16 @@
 
       "dev": true,
 
       "dev": true,
 
       "license": "MIT"
 
       "license": "MIT"
 
     },
 
     },
 
+    "node_modules/vue-matomo": {
 
+      "version": "4.2.0",
 
+      "resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.2.0.tgz",
 
+      "integrity": "sha512-m5hCw7LH3wPDcERaF4sp/ojR9sEx7Rl8TpOyH/4jjQxMF2DuY/q5pO+i9o5Dx+BXLSa9+IQ0qhAbWYRyESQXmA==",
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">= 6.0.0",
 
+        "npm": ">= 3.0.0"
 
+      }
 
+    },
 
     "node_modules/vue-style-loader": {
 
     "node_modules/vue-style-loader": {
 
       "version": "4.1.3",
 
       "version": "4.1.3",
 
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
 
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
 
@@ -11091,12 +11061,6 @@
 
         "defaults": "^1.0.3"
 
         "defaults": "^1.0.3"
 
       }
 
       }
 
     },
 
     },
 
-    "node_modules/web-vitals": {
 
-      "version": "4.2.4",
 
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
 
-      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
 
-      "license": "Apache-2.0"
 
-    },
 
     "node_modules/webidl-conversions": {
 
     "node_modules/webidl-conversions": {
 
       "version": "3.0.1",
 
       "version": "3.0.1",
 
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

+ 2 - 2
vue-test/package.json
查看文件 

@@ -9,8 +9,8 @@
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
     "core-js": "^3.8.3",
 
     "core-js": "^3.8.3",
 
-    "posthog-js": "^1.256.1",
 
-    "vue": "^3.2.13"
 
+    "vue": "^3.2.13",
 
+    "vue-matomo": "^4.2.0"
 
   },
 
   },
 
   "devDependencies": {
 
   "devDependencies": {
 
     "@babel/core": "^7.12.16",
 
     "@babel/core": "^7.12.16",

+ 7 - 6
vue-test/src/main.js
查看文件 

@@ -1,9 +1,10 @@
 
 import { createApp } from 'vue'
 
 import { createApp } from 'vue'
 
+import VueMatomo from 'vue-matomo'
 
 import App from './App.vue'
 
 import App from './App.vue'
 
-import posthog from "posthog-js";
 
 
 
-posthog.init("phc_5YuF937Fs3N0djI4XFThsGAZfgaciU9pjKw6T3SQjvV", {
 
-  api_host: "https://us.i.posthog.com",
 
-  defaults: '2025-05-24',
 
-});
 
-createApp(App).provide("posthog", posthog).mount('#app')
 
+createApp(App).use(VueMatomo, {
 
+    // Configure your matomo server and site by providing
 
+    host: 'https://192168316.matomo.cloud/',
 
+    siteId: '3',
 
+}).mount('#app')
 
+window._paq.push(['trackPageView']); //To track pageview

+ 0 - 11
vue-test/src/usePosthog.js
查看文件 

@@ -1,11 +0,0 @@
 
-// src/composables/usePostHog.ts
 
-import posthog from 'posthog-js'
 
-
 
-export function usePostHog() {
 
-  posthog.init('phc_5YuF937Fs3N0djI4XFThsGAZfgaciU9pjKw6T3SQjvV', {
 
-    api_host: 'https://us.i.posthog.com',
 
-    defaults: '2025-05-24',
 
-  })
 
-
 
-  return { posthog }
 
-}

+ 6 - 26
vue-test/yarn.lock
查看文件 

@@ -2401,7 +2401,7 @@ core-js-compat@^3.40.0, core-js-compat@^3.8.3:
 
   dependencies:
 
   dependencies:
 
     browserslist "^4.25.0"
 
     browserslist "^4.25.0"
 
 
 
-core-js@^3.38.1, core-js@^3.8.3:
 
+core-js@^3.8.3:
 
   version "3.43.0"
 
   version "3.43.0"
 
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.43.0.tgz"
 
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.43.0.tgz"
 
   integrity sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==
 
   integrity sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==
 
@@ -3191,11 +3191,6 @@ faye-websocket@^0.11.3:
 
   dependencies:
 
   dependencies:
 
     websocket-driver ">=0.5.1"
 
     websocket-driver ">=0.5.1"
 
 
 
-fflate@^0.4.8:
 
-  version "0.4.8"
 
-  resolved "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz"
 
-  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
 
-
 
 figures@^2.0.0:
 
 figures@^2.0.0:
 
   version "2.0.0"
 
   version "2.0.0"
 
   resolved "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz"
 
   resolved "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz"
 
@@ -4913,21 +4908,6 @@ postcss@^7.0.36:
 
     picocolors "^0.2.1"
 
     picocolors "^0.2.1"
 
     source-map "^0.6.1"
 
     source-map "^0.6.1"
 
 
 
-posthog-js@^1.256.1:
 
-  version "1.256.1"
 
-  resolved "https://registry.npmjs.org/posthog-js/-/posthog-js-1.256.1.tgz"
 
-  integrity sha512-cBLc3W1BHHzxYlJc6kIDbbPVUFTRbsObG0Cn1CnEG7lcyWKbalmW1XvUw7+lu/yyHYfCf7hwTTBJF7GgGFFMmw==
 
-  dependencies:
 
-    core-js "^3.38.1"
 
-    fflate "^0.4.8"
 
-    preact "^10.19.3"
 
-    web-vitals "^4.2.4"
 
-
 
-preact@^10.19.3:
 
-  version "10.26.9"
 
-  resolved "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz"
 
-  integrity sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==
 
-
 
 prelude-ls@^1.2.1:
 
 prelude-ls@^1.2.1:
 
   version "1.2.1"
 
   version "1.2.1"
 
   resolved "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz"
 
   resolved "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz"
 
@@ -5946,6 +5926,11 @@ vue-loader@^17.0.0:
 
     hash-sum "^2.0.0"
 
     hash-sum "^2.0.0"
 
     watchpack "^2.4.0"
 
     watchpack "^2.4.0"
 
 
 
+vue-matomo@^4.2.0:
 
+  version "4.2.0"
 
+  resolved "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.2.0.tgz"
 
+  integrity sha512-m5hCw7LH3wPDcERaF4sp/ojR9sEx7Rl8TpOyH/4jjQxMF2DuY/q5pO+i9o5Dx+BXLSa9+IQ0qhAbWYRyESQXmA==
 
+
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
 
   version "4.1.3"
 
   version "4.1.3"
 
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
 
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
 
@@ -5992,11 +5977,6 @@ wcwidth@^1.0.1:
 
   dependencies:
 
   dependencies:
 
     defaults "^1.0.3"
 
     defaults "^1.0.3"
 
 
 
-web-vitals@^4.2.4:
 
-  version "4.2.4"
 
-  resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz"
 
-  integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
 
-
 
 webidl-conversions@^3.0.0:
 
 webidl-conversions@^3.0.0:
 
   version "3.0.1"
 
   version "3.0.1"
 
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
 
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz"