ga4 with user id

2026-08-19 12:34:18 +00:00 · 2024-06-09 21:25:36 +08:00
3 changed files with 13 additions and 11 deletions
@@ -31,6 +31,7 @@
        "vue": "^2.6.10",
        "vue-avatar": "^2.1.8",
        "vue-debounce": "^2.6.0",
+        "vue-gtag": "^1.16.1",
        "vue-template-compiler": "^2.6.10",
        "vue-the-mask": "^0.11.1",
        "vuelidate": "^0.7.4",
@@ -2,6 +2,7 @@
 /** Dependencies */
 import Vue from 'vue'
 import store from './vuex/store';
+import VueGtag from 'vue-gtag'

 window.route = require('./general/functions/router');

@@ -43,7 +44,7 @@ Vue.mixin({
        route: route
    },
    mixins: [request, crudHandler]
-    });
+});

 /** Components Registrations */
 Vue.component(Avatar);
@@ -51,6 +52,16 @@ Vue.component(Avatar);
 const files = require.context('./', true, /\.vue$/i);
 files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

+// Google Analytics 4 (GA4) Integration
+Vue.use(VueGtag, {
+    property: {
+        id: 'G-SP04J05142',
+        params: {
+            user_id: store.getters.getUserId
+        }
+    }
+});
+
 const app = new Vue({
    el: '#app',
    store,
@@ -4,16 +4,6 @@
    @include('vendor/head')
 </head>
 <body class="horizontal-menu horizontal-app-menu bg-white overflow-hidden">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-SP04J05142"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-SP04J05142');
-</script>
-<!-- End Google Tag Manager -->
    <div id="app" style="min-height: 100%;">
        @yield('content')
    </div>