feat: add OpenPanel analytics via @openpanel/web SDK

This commit is contained in:
Julien Calixte
2026-04-04 13:31:09 +02:00
parent eb2004f062
commit d976ca811c
4 changed files with 110 additions and 60 deletions

View File

@@ -16,6 +16,7 @@
"commit": "cz"
},
"dependencies": {
"@openpanel/web": "^1.3.0",
"@vueuse/core": "^10.7.2",
"@vueuse/math": "^10.7.2",
"bulma": "^0.9.4",
@@ -30,12 +31,12 @@
"vue-router": "^4.6.4"
},
"devDependencies": {
"@types/md5": "^2.3.6",
"@faker-js/faker": "^10.2.0",
"@pinia/testing": "^0.1.3",
"@rushstack/eslint-patch": "^1.15.0",
"@tsconfig/node18": "^18.2.6",
"@types/jsdom": "^27.0.0",
"@types/md5": "^2.3.6",
"@types/node": "^25.0.10",
"@vitejs/plugin-vue": "^5.0.4",
"@vitest/browser": "^1.3.0",

158
pnpm-lock.yaml generated
View File

@@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@openpanel/web':
specifier: ^1.3.0
version: 1.3.0
'@vueuse/core':
specifier: ^10.7.2
version: 10.7.2(vue@3.5.27(typescript@5.9.3))
@@ -244,10 +247,6 @@ packages:
resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.21.5':
resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.27.1':
resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
engines: {node: '>=6.9.0'}
@@ -276,11 +275,6 @@ packages:
resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
engines: {node: '>=6.9.0'}
'@babel/parser@7.23.9':
resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
engines: {node: '>=6.0.0'}
hasBin: true
'@babel/parser@7.28.6':
resolution: {integrity: sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==}
engines: {node: '>=6.0.0'}
@@ -705,10 +699,6 @@ packages:
resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==}
engines: {node: '>=6.9.0'}
'@babel/types@7.21.5':
resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==}
engines: {node: '>=6.9.0'}
'@babel/types@7.28.6':
resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
engines: {node: '>=6.9.0'}
@@ -954,6 +944,12 @@ packages:
'@one-ini/wasm@0.1.1':
resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
'@openpanel/sdk@1.3.0':
resolution: {integrity: sha512-VK/1oawBjGdxA+oYtqcWlNXlLT1zRJ9tslHoMvqqsqlcLNOhH26ltcHpyGp5RhtIF7uIkCltiicALfFN7fyldw==}
'@openpanel/web@1.3.0':
resolution: {integrity: sha512-geUPcn35oMqWlBS7rB4ejP6qzKGs4VDAZhoSw9MD3q/UYkD/pfTEx70z1ydGVJMjHREdXoAL1XVhBLdZmu1gsw==}
'@parcel/watcher-android-arm64@2.5.6':
resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
engines: {node: '>= 10.0.0'}
@@ -1171,6 +1167,12 @@ packages:
cpu: [x64]
os: [win32]
'@rrweb/types@2.0.0-alpha.20':
resolution: {integrity: sha512-RbnDgKxA/odwB1R4gF7eUUj+rdSrq6ROQJsnMw7MIsGzlbSYvJeZN8YY4XqU0G6sKJvXI6bSzk7w/G94jNwzhw==}
'@rrweb/utils@2.0.0-alpha.20':
resolution: {integrity: sha512-MTQOmhPRe39C0fYaCnnVYOufQsyGzwNXpUStKiyFSfGLUJrzuwhbRoUAKR5w6W2j5XuA0bIz3ZDIBztkquOhLw==}
'@rushstack/eslint-patch@1.15.0':
resolution: {integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==}
@@ -1197,6 +1199,9 @@ packages:
'@types/conventional-commits-parser@5.0.0':
resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
'@types/css-font-loading-module@0.0.7':
resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
'@types/estree@0.0.39':
resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
@@ -1490,6 +1495,9 @@ packages:
resolution: {integrity: sha512-PJcP4d1Fr8Zp+YIfGN93G0fjDj/6J0I6Gf6p0IpJk8qKQpdFDm4gB+lc202iv2YkyC+oT6b4Ik2W9LzvpSKNoQ==}
engines: {node: ^16.13 || >=18}
'@xstate/fsm@1.6.5':
resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
abbrev@2.0.0:
resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -1643,6 +1651,10 @@ packages:
bare-path@2.1.0:
resolution: {integrity: sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==}
base64-arraybuffer@1.0.2:
resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
engines: {node: '>= 0.6.0'}
base64-js@1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -3537,9 +3549,18 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
rrdom@2.0.0-alpha.20:
resolution: {integrity: sha512-hoqjS4662LtBp82qEz9GrqU36UpEmCvTA2Hns3qdF7cklLFFy3G+0Th8hLytJENleHHWxsB5nWJ3eXz5mSRxdQ==}
rrweb-cssom@0.6.0:
resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
rrweb-snapshot@2.0.0-alpha.20:
resolution: {integrity: sha512-YTNf9YVeaGRo/jxY3FKBge2c/Ojd/KTHmuWloUSB+oyPXuY73ZeeG873qMMmhIpqEn7hn7aBF1eWEQmP7wjf8A==}
rrweb@2.0.0-alpha.20:
resolution: {integrity: sha512-CZKDlm+j1VA50Ko3gnMbpvguCAleljsTNXPnVk9aeNP8o6T6kolRbISHyDZpqZ4G+bdDLlQOignPP3jEsXs8Gg==}
run-async@2.4.1:
resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
engines: {node: '>=0.12.0'}
@@ -3858,10 +3879,6 @@ packages:
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
engines: {node: '>=0.6.0'}
to-fast-properties@2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
@@ -4376,10 +4393,10 @@ snapshots:
'@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.8)
'@babel/helper-module-transforms': 7.21.5
'@babel/helpers': 7.21.5
'@babel/parser': 7.23.9
'@babel/parser': 7.28.6
'@babel/template': 7.20.7
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
convert-source-map: 1.9.0
debug: 4.3.4
gensync: 1.0.0-beta.2
@@ -4390,18 +4407,18 @@ snapshots:
'@babel/generator@7.21.5':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.18
jsesc: 2.5.2
'@babel/helper-annotate-as-pure@7.18.6':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-builder-binary-assignment-operator-visitor@7.21.5':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-compilation-targets@7.21.5(@babel/core@7.21.8)':
dependencies:
@@ -4451,19 +4468,19 @@ snapshots:
'@babel/helper-function-name@7.21.0':
dependencies:
'@babel/template': 7.20.7
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-hoist-variables@7.18.6':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-member-expression-to-functions@7.21.5':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-module-imports@7.21.4':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-module-transforms@7.21.5':
dependencies:
@@ -4471,16 +4488,16 @@ snapshots:
'@babel/helper-module-imports': 7.21.4
'@babel/helper-simple-access': 7.21.5
'@babel/helper-split-export-declaration': 7.18.6
'@babel/helper-validator-identifier': 7.19.1
'@babel/helper-validator-identifier': 7.28.5
'@babel/template': 7.20.7
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
transitivePeerDependencies:
- supports-color
'@babel/helper-optimise-call-expression@7.18.6':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-plugin-utils@7.21.5': {}
@@ -4490,7 +4507,7 @@ snapshots:
'@babel/helper-annotate-as-pure': 7.18.6
'@babel/helper-environment-visitor': 7.21.5
'@babel/helper-wrap-function': 7.20.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
transitivePeerDependencies:
- supports-color
@@ -4501,23 +4518,21 @@ snapshots:
'@babel/helper-optimise-call-expression': 7.18.6
'@babel/template': 7.20.7
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
transitivePeerDependencies:
- supports-color
'@babel/helper-simple-access@7.21.5':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-skip-transparent-expression-wrappers@7.20.0':
dependencies:
'@babel/types': 7.21.5
'@babel/types': 7.28.6
'@babel/helper-split-export-declaration@7.18.6':
dependencies:
'@babel/types': 7.21.5
'@babel/helper-string-parser@7.21.5': {}
'@babel/types': 7.28.6
'@babel/helper-string-parser@7.27.1': {}
@@ -4532,7 +4547,7 @@ snapshots:
'@babel/helper-function-name': 7.21.0
'@babel/template': 7.20.7
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
transitivePeerDependencies:
- supports-color
@@ -4540,7 +4555,7 @@ snapshots:
dependencies:
'@babel/template': 7.20.7
'@babel/traverse': 7.21.5
'@babel/types': 7.21.5
'@babel/types': 7.28.6
transitivePeerDependencies:
- supports-color
@@ -4550,10 +4565,6 @@ snapshots:
chalk: 2.4.2
js-tokens: 4.0.0
'@babel/parser@7.23.9':
dependencies:
'@babel/types': 7.21.5
'@babel/parser@7.28.6':
dependencies:
'@babel/types': 7.28.6
@@ -4871,7 +4882,7 @@ snapshots:
'@babel/helper-hoist-variables': 7.18.6
'@babel/helper-module-transforms': 7.21.5
'@babel/helper-plugin-utils': 7.21.5
'@babel/helper-validator-identifier': 7.19.1
'@babel/helper-validator-identifier': 7.28.5
transitivePeerDependencies:
- supports-color
@@ -5033,7 +5044,7 @@ snapshots:
'@babel/plugin-transform-unicode-escapes': 7.21.5(@babel/core@7.21.8)
'@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.21.8)
'@babel/preset-modules': 0.1.5(@babel/core@7.21.8)
'@babel/types': 7.21.5
'@babel/types': 7.28.6
babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.21.8)
babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.21.8)
babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.21.8)
@@ -5048,7 +5059,7 @@ snapshots:
'@babel/helper-plugin-utils': 7.21.5
'@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.21.8)
'@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.21.8)
'@babel/types': 7.21.5
'@babel/types': 7.28.6
esutils: 2.0.3
'@babel/regjsgen@0.8.0': {}
@@ -5060,8 +5071,8 @@ snapshots:
'@babel/template@7.20.7':
dependencies:
'@babel/code-frame': 7.21.4
'@babel/parser': 7.23.9
'@babel/types': 7.21.5
'@babel/parser': 7.28.6
'@babel/types': 7.28.6
'@babel/traverse@7.21.5':
dependencies:
@@ -5071,19 +5082,13 @@ snapshots:
'@babel/helper-function-name': 7.21.0
'@babel/helper-hoist-variables': 7.18.6
'@babel/helper-split-export-declaration': 7.18.6
'@babel/parser': 7.23.9
'@babel/types': 7.21.5
'@babel/parser': 7.28.6
'@babel/types': 7.28.6
debug: 4.3.4
globals: 11.12.0
transitivePeerDependencies:
- supports-color
'@babel/types@7.21.5':
dependencies:
'@babel/helper-string-parser': 7.21.5
'@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0
'@babel/types@7.28.6':
dependencies:
'@babel/helper-string-parser': 7.27.1
@@ -5253,7 +5258,7 @@ snapshots:
'@jridgewell/gen-mapping@0.3.3':
dependencies:
'@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/sourcemap-codec': 1.5.5
'@jridgewell/trace-mapping': 0.3.18
'@jridgewell/resolve-uri@3.1.0': {}
@@ -5290,6 +5295,14 @@ snapshots:
'@one-ini/wasm@0.1.1': {}
'@openpanel/sdk@1.3.0': {}
'@openpanel/web@1.3.0':
dependencies:
'@openpanel/sdk': 1.3.0
'@rrweb/types': 2.0.0-alpha.20
rrweb: 2.0.0-alpha.20
'@parcel/watcher-android-arm64@2.5.6':
optional: true
@@ -5461,6 +5474,10 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.12.0':
optional: true
'@rrweb/types@2.0.0-alpha.20': {}
'@rrweb/utils@2.0.0-alpha.20': {}
'@rushstack/eslint-patch@1.15.0': {}
'@sinclair/typebox@0.27.8': {}
@@ -5487,6 +5504,8 @@ snapshots:
'@types/node': 25.0.10
optional: true
'@types/css-font-loading-module@0.0.7': {}
'@types/estree@0.0.39': {}
'@types/estree@1.0.1': {}
@@ -5882,6 +5901,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@xstate/fsm@1.6.5': {}
abbrev@2.0.0: {}
acorn-jsx@5.3.2(acorn@8.11.3):
@@ -6054,6 +6075,8 @@ snapshots:
bare-os: 2.2.0
optional: true
base64-arraybuffer@1.0.2: {}
base64-js@1.5.1: {}
basic-ftp@5.0.4: {}
@@ -8085,8 +8108,27 @@ snapshots:
'@rollup/rollup-win32-x64-msvc': 4.12.0
fsevents: 2.3.3
rrdom@2.0.0-alpha.20:
dependencies:
rrweb-snapshot: 2.0.0-alpha.20
rrweb-cssom@0.6.0: {}
rrweb-snapshot@2.0.0-alpha.20:
dependencies:
postcss: 8.5.6
rrweb@2.0.0-alpha.20:
dependencies:
'@rrweb/types': 2.0.0-alpha.20
'@rrweb/utils': 2.0.0-alpha.20
'@types/css-font-loading-module': 0.0.7
'@xstate/fsm': 1.6.5
base64-arraybuffer: 1.0.2
mitt: 3.0.0
rrdom: 2.0.0-alpha.20
rrweb-snapshot: 2.0.0-alpha.20
run-async@2.4.1: {}
run-parallel@1.2.0:
@@ -8416,8 +8458,6 @@ snapshots:
dependencies:
os-tmpdir: 1.0.2
to-fast-properties@2.0.0: {}
to-regex-range@5.0.1:
dependencies:
is-number: 7.0.0
@@ -8531,7 +8571,7 @@ snapshots:
dependencies:
browserslist: 4.21.5
escalade: 3.1.1
picocolors: 1.0.0
picocolors: 1.1.1
uri-js@4.4.1:
dependencies:

View File

@@ -5,6 +5,7 @@ import App from './App.vue'
import { router } from './router'
import VueDiff from 'vue-diff'
import './openpanel'
import './assets/main.scss'
import 'vue-diff/dist/index.css'

8
src/openpanel.ts Normal file
View File

@@ -0,0 +1,8 @@
import { OpenPanel } from '@openpanel/web'
export const op = new OpenPanel({
clientId: '00b205e9-2993-4124-9290-bb45851f5967',
trackScreenViews: true,
trackOutgoingLinks: true,
trackAttributes: true
})