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.
This commit is contained in:
JhumanJ
parent
1c26e282c5
commit
1b67cd808b
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
})
|
||||
Loading…
Reference in New Issue