Update GTM Configuration and Dependencies

- Added a new `enabled` property to the GTM configuration in `gtm.js`, allowing for conditional enabling of the GTM plugin.
- Updated the `package-lock.json` to include the latest versions of `@gtm-support/vue-gtm` and `@gtm-support/core`, ensuring compatibility and access to new features.
- Modified the `onMounted` lifecycle hook in `FeatureBase.vue` to include a check for the `user` state, preventing script loading when the user is not available.

These changes aim to enhance the GTM integration by providing more control over its activation and ensuring that the latest dependencies are utilized for improved functionality.

client/components/vendor/FeatureBase.vue

@@ -54,7 +54,7 @@ const setupForUser = () => {
 }
 
 onMounted(() => {
-  if (import.meta.server) return
+  if (import.meta.server || !user.value) return
 
   // Setup base
   if (
@@ -66,7 +66,6 @@ onMounted(() => {
     }
   }
 
-  if (!user.value) return
   loadScript()
   try {
     setupForUser()

client/gtm.js

@@ -1,5 +1,6 @@
 export default {
   id: process.env.NUXT_PUBLIC_GTM_CODE, // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
   debug: false, // Whether or not display console logs debugs (optional)
-  devtools: false, // (optional)
+  devtools: false, // (optional),
+  enabled: false, // Disabled by default, will be enabled conditionally by our plugin
 }

client/package-lock.json

@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
+        "@gtm-support/vue-gtm": "^3.1.0",
         "@iconify-json/material-symbols": "^1.2.4",
         "@nuxt/ui": "^2.19.2",
         "@pinia/nuxt": "^0.11.0",
@@ -1448,26 +1449,24 @@
       "license": "MIT"
     },
     "node_modules/@gtm-support/core": {
-      "version": "2.3.1",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-3.0.1.tgz",
-      "integrity": "sha512-eD0hndQjhgKm5f/7IA9fZYujmHiVMY+fnYv4mdZSmz5XJQlS4TiTmpdZx2l7I2A9rI9J6Ysz8LpXYYNo/Xq4LQ==",
+      "integrity": "sha512-SctcoqvvAbGAgZzOb7DZ4wjbZF3ZS7Las3qIEByv6g7mzPf4E9LpRXcQzjmywYLcUx2jys7PWJAa3s5slvj/0w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@gtm-support/vue-gtm": {
-      "version": "2.2.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@gtm-support/vue-gtm/-/vue-gtm-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@gtm-support/vue-gtm/-/vue-gtm-3.1.0.tgz",
-      "integrity": "sha512-7nhBTRkTG0mD+7r7JvNalJz++YwszZk0oP1HIY6fCgz6wNKxT6LuiXCqdPrZmNPe/WbPIKuqxGZN5s+i6NZqow==",
+      "integrity": "sha512-kGUnCI+Z5lBeCKd7rzgU7UoFU8Q0EkJfh17SgeyAyx8cLdISqeq54BNJKZrME3WXersoigLZVJ1GLs0buYD3lA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@gtm-support/core": "^2.0.0"
+        "@gtm-support/core": "^3.0.1"
       },
       "optionalDependencies": {
-        "vue-router": ">= 4.1.0 < 5.0.0"
+        "vue-router": ">= 4.4.1 < 5.0.0"
       },
       "peerDependencies": {
-        "vue": ">= 3.2.0 < 4.0.0"
+        "vue": ">= 3.2.26 < 4.0.0"
       },
       "peerDependenciesMeta": {
         "vue-router": {
@@ -9117,6 +9116,34 @@
         "nuxt": "^3.0.0"
       }
     },
+    "node_modules/@zadigetvoltaire/nuxt-gtm/node_modules/@gtm-support/core": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-2.3.1.tgz",
+      "integrity": "sha512-eD0hndQjhgKm5f/7IA9fZYujmHiVMY+fnYv4mdZSmz5XJQlS4TiTmpdZx2l7I2A9rI9J6Ysz8LpXYYNo/Xq4LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@zadigetvoltaire/nuxt-gtm/node_modules/@gtm-support/vue-gtm": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@gtm-support/vue-gtm/-/vue-gtm-2.2.0.tgz",
+      "integrity": "sha512-7nhBTRkTG0mD+7r7JvNalJz++YwszZk0oP1HIY6fCgz6wNKxT6LuiXCqdPrZmNPe/WbPIKuqxGZN5s+i6NZqow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@gtm-support/core": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "vue-router": ">= 4.1.0 < 5.0.0"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0 < 4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@zadigetvoltaire/nuxt-gtm/node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",

client/plugins/gtm.client.js

@@ -0,0 +1,31 @@
+import gtmConfig from '../gtm'
+
+export default defineNuxtPlugin(() => {
+  const route = useRoute()
+  const isIframe = useIsIframe()
+  const isPublicFormPage = route.name === 'forms-slug'
+  
+  // Only enable GTM if not in a form page (for respondents) and not in an iframe
+  if (!isPublicFormPage && !isIframe && process.env.NUXT_PUBLIC_GTM_CODE) {
+    // Initialize GTM manually only when needed
+    const gtm = useGtm()
+    
+    // Override the enabled setting to true for this session
+    gtmConfig.enabled = true
+    
+    // Watch for route changes to track page views
+    watch(() => route.fullPath, () => {
+      if (!route.name || route.name !== 'forms-slug') {
+        gtm.trackView(route.name, route.fullPath)
+      }
+    }, { immediate: true })
+    
+    return {
+      provide: {
+        gtm
+      }
+    }
+  }
+  
+  return {}
+})