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
2025-05-19 15:54:35 +02:00
parent 1c26e282c5
commit 1b67cd808b
4 changed files with 72 additions and 14 deletions

31
client/plugins/gtm.client.js vendored Normal file
View File

@@ -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 {}
})