Analytics

package.json

@@ -14,6 +14,7 @@
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.2.2",
     "lodash-es": "^4.17.21",
+    "plausible-tracker": "^0.3.5",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.12"

pnpm-lock.yaml

@@ -25,6 +25,7 @@ specifiers:
   eslint-plugin-vue: ^8.5.0
   jsdom: ^19.0.0
   lodash-es: ^4.17.21
+  plausible-tracker: ^0.3.5
   postcss: ^8.4.6
   prettier: ^2.5.1
   prettier-eslint: ^13.0.0
@@ -44,6 +45,7 @@ dependencies:
   date-fns: 2.28.0
   date-fns-tz: 1.2.2_date-fns@2.28.0
   lodash-es: 4.17.21
+  plausible-tracker: 0.3.5
   vue: 3.2.31
   vue-i18n: 9.1.9_vue@3.2.31
   vue-router: 4.0.12_vue@3.2.31
@@ -4418,6 +4420,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /plausible-tracker/0.3.5:
+    resolution: {integrity: sha512-6c6VPdPtI9KmIsfr8zLBViIDMt369eeaNA1J8JrAmAtrpSkeJWvjwcJ+cLn7gVJn5AtQWC8NgSEee2d/5RNytA==}
+    engines: {node: '>=10'}
+    dev: false
+
   /postcss-js/4.0.0_postcss@8.4.6:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
     engines: {node: ^12 || ^14 || >= 16}

src/App.vue

@@ -20,8 +20,14 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
 import AppHeader from '@/components/AppHeader.vue'
 import SideMenu from '@/components/SideMenu.vue'
 import ToastMessage from '@/components/ToastMessage.vue'
+import { plausible } from '@/analytics'
 
+onMounted(() => {
+  plausible.enableAutoPageviews()
+})
 </script>

src/analytics.ts

@@ -0,0 +1,7 @@
+import Plausible from 'plausible-tracker'
+
+// Setup tracking
+export const plausible = Plausible({
+  domain: 'n0mbers.scambier.xyz',
+  apiHost: 'https://stats.scambier.xyz',
+})