improved tracking for google analytics

package-lock.json

@@ -10463,6 +10463,11 @@
                 "csstype": "^3.1.0"
             }
         },
+        "vue-analytics": {
+            "version": "5.22.1",
+            "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.22.1.tgz",
+            "integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ=="
+        },
         "vue-feather-icons": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/vue-feather-icons/-/vue-feather-icons-5.1.0.tgz",

package.json

@@ -40,6 +40,7 @@
         "v-click-outside": "^3.2.0",
         "vee-validate": "^3.4.14",
         "vue": "^2.7.8",
+        "vue-analytics": "^5.22.1",
         "vue-feather-icons": "^5.1.0",
         "vue-i18n": "^8.27.2",
         "vue-recaptcha-v3": "^1.9.0",

resources/js/main.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import i18n from './i18n'
 import VueRouter from 'vue-router'
 import router from './router'
+import VueAnalytics from 'vue-analytics'
 import App from './App.vue'
 import store from './store'
 import { events } from './bus'
@@ -21,6 +22,14 @@ Vue.use(functionHelpers)
 Vue.use(AlertHelpers)
 Vue.use(itemHelpers)
 
+// Google Analytics implementation
+if (config.googleAnalytics) {
+    Vue.use(VueAnalytics, {
+        id: config.googleAnalytics,
+        router
+    })
+}
+
 // ReCaptcha configuration
 if (config.allowedRecaptcha) {
     Vue.use(VueReCaptcha, {

resources/views/index.blade.php

@@ -149,6 +149,9 @@
             // App settings
 			userRegistration: {{ $config->registration->allowed }},
 			userVerification: {{ $config->registration->verification }},
+
+            // Google Analytics
+            googleAnalytics: '{{ $config->google_analytics }}',
         }
     </script>
 
@@ -156,18 +159,6 @@
 
         {{--Application production script--}}
         <script src="{{ asset('js/main.js') }}?v={{ get_version() }}"></script>
-
-        {{--Global site tag (gtag.js) - Google Analytics--}}
-        @if($config->google_analytics)
-            <script async src="https://www.googletagmanager.com/gtag/js?id={{ $config->google_analytics }}"></script>
-            <script>
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-
-                gtag('config', '{{ $config->google_analytics }}');
-            </script>
-        @endif
     @else
         {{--Application development script--}}
         <script src="{{ mix('js/main.js') }}"></script>