feat(survey): Add GTM and MS Clarity with cookie consent, code refact…

…ored
MRC-Epid-it24 · Feb 11, 2025 · 8819b78 · 8819b78
1 parent 4d57b91
commit 8819b78
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 2 deletions.
diff --git a/apps/docs/config/survey/index.md b/apps/docs/config/survey/index.md
@@ -132,6 +132,10 @@ Captcha provider sitekey. Please refer to your provider, how to obtain the key.
 
 Google Analytics ID. Disabled if not set.
 
+### VITE_GTM_CONTAINER_ID
+
+Google Tag Manger Container ID. Disabled if not set.
+
 ### VITE_WEBPUSH_PUBLIC_KEY
 
 Webpush public key for we-push notifications.
diff --git a/apps/survey/.env-template b/apps/survey/.env-template
@@ -38,6 +38,7 @@ VITE_CAPTCHA_SITEKEY=
 
 # Services
 VITE_GOOGLE_ANALYTICS_ID=
+VITE_GTM_CONTAINER_ID=
 VITE_STRICH_KEY=
 
 # WEB-PUSH settings

diff --git a/apps/survey/src/main.ts b/apps/survey/src/main.ts
@@ -11,6 +11,7 @@ import router from './router';
 import { errorHandler, httpService } from './services';
 import { cookieConsentConfig, cookieConsentPlugin } from '@intake24/ui';
 import { createManager } from '@vue-youtube/core';
+import { createGtm } from '@gtm-support/vue-gtm';
 
 import { useAuth } from './stores';
 
@@ -31,6 +32,7 @@ app.use(vuetify);
 app.use(VueGtag, { bootstrap: false }, router);
 app.use(cookieConsentPlugin, cookieConsentConfig());
 app.use(createManager({ deferLoading: { enabled: true, autoLoad: true } }));
+app.use(createGtm({ id: import.meta.env.VITE_GTM_CONTAINER_ID, enabled: false, debug: import.meta.env.DEV, vueRouter: router }));
 
 app.mount('#app');
 

diff --git a/apps/survey/src/types/vite-env.d.ts b/apps/survey/src/types/vite-env.d.ts
@@ -14,6 +14,7 @@ interface ImportMetaEnv {
   readonly VITE_CAPTCHA_SITEKEY: string;
 
   readonly VITE_GOOGLE_ANALYTICS_ID: string;
+  readonly VITE_GTM_CONTAINER_ID: string;
   readonly VITE_STRICH_KEY: string;
   readonly VITE_WEBPUSH_PUBLIC_KEY: string;
 

diff --git a/packages/i18n/src/shared/en/legal.json b/packages/i18n/src/shared/en/legal.json
@@ -68,6 +68,26 @@
                   "name": "^_gid",
                   "exp": "1 day",
                   "desc": "Unique ID that is used to create statistical data about how visitors use the websites."
+                },
+                {
+                  "name": "^_CLID",
+                  "exp": "1 year",
+                  "desc": "Unique ID that is used to create statistical data about how visitors use the websites."
+                },
+                {
+                  "name": "^_MUID",
+                  "exp": "390 days",
+                  "desc": "Unique ID that is used to create statistical data about how visitors use the websites."
+                },
+                {
+                  "name": "^_clck",
+                  "exp": "30 days",
+                  "desc": "Unique ID that is used to create statistical data about how visitors use the websites."
+                },
+                {
+                  "name": "^_clsk",
+                  "exp": "1 day",
+                  "desc": "Unique ID that is used to create statistical data about how visitors use the websites."
                 }
               ]
             }

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -17,6 +17,7 @@
   "scripts": {},
   "dependencies": {
     "@ericblade/quagga2": "^1.8.4",
+    "@gtm-support/vue-gtm": "^3.1.0",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@pinia/plugin-debounce": "^1.0.1",
     "@pixelverse/strichjs-sdk": "^1.7.0",

diff --git a/packages/ui/src/cookie-consent/config.ts b/packages/ui/src/cookie-consent/config.ts
@@ -1,5 +1,6 @@
 import type { CookieConsentConfig } from 'vanilla-cookieconsent';
 import type { PluginOptions } from 'vue-gtag';
+import { useGtm } from '@gtm-support/vue-gtm';
 import { bootstrap, optIn, optOut, setOptions } from 'vue-gtag';
 
 export function gTagConfig(): PluginOptions {
@@ -21,7 +22,9 @@ async function toggleGA(enabled: boolean) {
   setOptions(gTagConfig());
   await bootstrap();
 }
-
+async function toggleGTM(enabled: boolean) {
+  useGtm()?.enable(enabled);
+}
 export function cookieConsentConfig(translations: CookieConsentConfig['language']['translations'] = {}): CookieConsentConfig {
   return ({
     cookie: {
@@ -44,9 +47,11 @@ export function cookieConsentConfig(translations: CookieConsentConfig['language'
     },
     onChange: ({ cookie }) => {
       toggleGA(cookie.categories.includes('analytics'));
+      toggleGTM(cookie.categories.includes('analytics'));
     },
     onFirstConsent: ({ cookie }) => {
       toggleGA(cookie.categories.includes('analytics'));
+      toggleGTM(cookie.categories.includes('analytics'));
     },
   });
 }
diff --git a/packages/ui/src/cookie-consent/cookie-consent.vue b/packages/ui/src/cookie-consent/cookie-consent.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useGtm } from '@gtm-support/vue-gtm';
 import { onMounted } from 'vue';
 import { bootstrap, setOptions } from 'vue-gtag';
 import { gTagConfig } from './config';
@@ -18,7 +19,7 @@ async function enableAnalytics() {
   const on = cc.getUserPreferences().acceptedCategories.includes('analytics');
   if (!on)
     return;
-
+  useGtm()?.enable(true);
   setOptions(gTagConfig());
   await bootstrap();
 };