瀏覽代碼

feature:关于matomo的三种demo实现

luoy 1 月之前
父節點
當前提交
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>
 </head>
 
+
 <body>
   这是一个空页面
   <button id="btn">点击我</button>
 </body>
-
+<!-- Matomo -->
 <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>
+<!-- End Matomo Code -->
 </html>

+ 0 - 1
react-test/package.json

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

+ 13 - 0
react-test/src/App.js

@@ -1,7 +1,20 @@
 import logo from './logo.svg';
+import { useEffect } from 'react'
 import './App.css';
 
 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 (
     <div className="App">
       这是个空白页

+ 0 - 6
react-test/src/index.js

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

+ 12 - 48
vue-test/package-lock.json

@@ -9,8 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
-        "posthog-js": "^1.256.1",
-        "vue": "^3.2.13"
+        "vue": "^3.2.13",
+        "vue-matomo": "^4.2.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -5872,12 +5872,6 @@
         "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": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
@@ -8977,40 +8971,6 @@
       "dev": true,
       "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": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11039,6 +10999,16 @@
       "dev": true,
       "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": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -11091,12 +11061,6 @@
         "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": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

+ 2 - 2
vue-test/package.json

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

+ 7 - 6
vue-test/src/main.js

@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
+import VueMatomo from 'vue-matomo'
 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:
     browserslist "^4.25.0"
 
-core-js@^3.38.1, core-js@^3.8.3:
+core-js@^3.8.3:
   version "3.43.0"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.43.0.tgz"
   integrity sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==
@@ -3191,11 +3191,6 @@ faye-websocket@^0.11.3:
   dependencies:
     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:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz"
@@ -4913,21 +4908,6 @@ postcss@^7.0.36:
     picocolors "^0.2.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:
   version "1.2.1"
   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"
     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:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
@@ -5992,11 +5977,6 @@ wcwidth@^1.0.1:
   dependencies:
     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:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz"