From 1b67cd808b7d6e2ed46f5b839c4781abe14746ba Mon Sep 17 00:00:00 2001 From: JhumanJ Date: Mon, 19 May 2025 15:54:35 +0200 Subject: [PATCH] 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 | 3 +- client/gtm.js | 3 +- client/package-lock.json | 49 ++++++++++++++++++------ client/plugins/gtm.client.js | 31 +++++++++++++++ 4 files changed, 72 insertions(+), 14 deletions(-) create mode 100644 client/plugins/gtm.client.js diff --git a/client/components/vendor/FeatureBase.vue b/client/components/vendor/FeatureBase.vue index 61ec67d1..54a156be 100644 --- a/client/components/vendor/FeatureBase.vue +++ b/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() diff --git a/client/gtm.js b/client/gtm.js index c838cef6..8dce6517 100644 --- a/client/gtm.js +++ b/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 } diff --git a/client/package-lock.json b/client/package-lock.json index d093ec70..b648ab91 100644 --- a/client/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-2.3.1.tgz", - "integrity": "sha512-eD0hndQjhgKm5f/7IA9fZYujmHiVMY+fnYv4mdZSmz5XJQlS4TiTmpdZx2l7I2A9rI9J6Ysz8LpXYYNo/Xq4LQ==", - "dev": true, + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-3.0.1.tgz", + "integrity": "sha512-SctcoqvvAbGAgZzOb7DZ4wjbZF3ZS7Las3qIEByv6g7mzPf4E9LpRXcQzjmywYLcUx2jys7PWJAa3s5slvj/0w==", "license": "MIT" }, "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, + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@gtm-support/vue-gtm/-/vue-gtm-3.1.0.tgz", + "integrity": "sha512-kGUnCI+Z5lBeCKd7rzgU7UoFU8Q0EkJfh17SgeyAyx8cLdISqeq54BNJKZrME3WXersoigLZVJ1GLs0buYD3lA==", "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", diff --git a/client/plugins/gtm.client.js b/client/plugins/gtm.client.js new file mode 100644 index 00000000..d2c8c338 --- /dev/null +++ b/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 {} +}) \ No newline at end of file