feat(survey): Clarity integration, add GTM custom event, improved coo…

…kie consent
MRC-Epid-it24 · Feb 14, 2025 · 0689112 · 0689112
1 parent 3445ec5
commit 0689112
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 3 deletions.
diff --git a/apps/docs/config/survey/index.md b/apps/docs/config/survey/index.md
@@ -136,6 +136,10 @@ Google Analytics ID. Disabled if not set.
 
 Google Tag Manger Container ID. Disabled if not set.
 
+### VITE_CLARITY_PROJECT_ID
+
+Microsoft Clarity project 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
@@ -39,6 +39,7 @@ VITE_CAPTCHA_SITEKEY=
 # Services
 VITE_GOOGLE_ANALYTICS_ID=
 VITE_GTM_CONTAINER_ID=
+VITE_CLARITY_PROJECT_ID=
 VITE_STRICH_KEY=
 
 # WEB-PUSH settings

diff --git a/apps/survey/package.json b/apps/survey/package.json
@@ -24,6 +24,7 @@
     "@flatten-js/core": "^1.6.2",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@gtm-support/vue-gtm": "^3.1.0",
+    "@microsoft/clarity": "^1.0.0",
     "@vue-youtube/core": "^0.0.6",
     "@vueuse/core": "^12.5.0",
     "awesome-phonenumber": "^7.2.0",

diff --git a/apps/survey/src/components/handlers/standard/MealTimePromptHandler.vue b/apps/survey/src/components/handlers/standard/MealTimePromptHandler.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
+import { useGtm } from '@gtm-support/vue-gtm';
 import { computed, defineComponent } from 'vue';
 
 import type { Prompts } from '@intake24/common/prompts';
@@ -52,6 +53,17 @@ export default defineComponent({
       if (type === 'cancel') {
         survey.deleteMeal(meal.value.id);
         ctx.emit('action', 'next');
+
+        useGtm()?.trackEvent({
+          event: 'meal_cancelled',
+          category: 'Survey',
+          action: 'Cancel Meal',
+          label: meal.value.name.en,
+          value: 1,
+          noninteraction: false,
+        });
+        console.log('Meal cancelled event tracked');
+
         return;
       }
 

diff --git a/apps/survey/src/main.ts b/apps/survey/src/main.ts
@@ -12,6 +12,7 @@ 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 Clarity from '@microsoft/clarity';
 
 import { useAuth } from './stores';
 
@@ -32,8 +33,14 @@ 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 }));
-
+const containerId = import.meta.env.VITE_GTM_CONTAINER_ID;
+if (containerId) {
+  app.use(createGtm({ id: containerId, enabled: false, debug: import.meta.env.DEV, vueRouter: router }));
+}
+const id = import.meta.env.VITE_CLARITY_PROJECT_ID;
+if (id) {
+  Clarity.init(id);
+};
 app.mount('#app');
 
 app.config.globalProperties.$http.init(router, useAuth);
diff --git a/apps/survey/src/types/vite-env.d.ts b/apps/survey/src/types/vite-env.d.ts
@@ -15,6 +15,7 @@ interface ImportMetaEnv {
 
   readonly VITE_GOOGLE_ANALYTICS_ID: string;
   readonly VITE_GTM_CONTAINER_ID: string;
+  readonly VITE_CLARITY_PROJECT_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/i18n/src/shared/fr/legal.json b/packages/i18n/src/shared/fr/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/i18n/src/shared/ms/legal.json b/packages/i18n/src/shared/ms/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/i18n/src/shared/ta/legal.json b/packages/i18n/src/shared/ta/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/i18n/src/shared/zh/legal.json b/packages/i18n/src/shared/zh/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
@@ -19,6 +19,7 @@
     "@ericblade/quagga2": "^1.8.4",
     "@gtm-support/vue-gtm": "^3.1.0",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
+    "@microsoft/clarity": "^1.0.0",
     "@pinia/plugin-debounce": "^1.0.1",
     "@pixelverse/strichjs-sdk": "^1.7.0",
     "@vueuse/core": "^12.5.0",

diff --git a/packages/ui/src/cookie-consent/config.ts b/packages/ui/src/cookie-consent/config.ts
@@ -1,6 +1,7 @@
 import type { CookieConsentConfig } from 'vanilla-cookieconsent';
 import type { PluginOptions } from 'vue-gtag';
 import { useGtm } from '@gtm-support/vue-gtm';
+import Clarity from '@microsoft/clarity';
 import { bootstrap, optIn, optOut, setOptions } from 'vue-gtag';
 
 export function gTagConfig(): PluginOptions {
@@ -25,6 +26,10 @@ async function toggleGA(enabled: boolean) {
 async function toggleGTM(enabled: boolean) {
   useGtm()?.enable(enabled);
 }
+async function toggleClarity(enabled: boolean) {
+  console.log('Clarity toggled to ', enabled);
+  Clarity.consent(enabled);
+}
 export function cookieConsentConfig(translations: CookieConsentConfig['language']['translations'] = {}): CookieConsentConfig {
   return ({
     cookie: {
@@ -48,10 +53,12 @@ export function cookieConsentConfig(translations: CookieConsentConfig['language'
     onChange: ({ cookie }) => {
       toggleGA(cookie.categories.includes('analytics'));
       toggleGTM(cookie.categories.includes('analytics'));
+      toggleClarity(cookie.categories.includes('analytics'));
     },
     onFirstConsent: ({ cookie }) => {
       toggleGA(cookie.categories.includes('analytics'));
       toggleGTM(cookie.categories.includes('analytics'));
+      toggleClarity(cookie.categories.includes('analytics'));
     },
   });
 }
diff --git a/packages/ui/src/cookie-consent/cookie-consent.vue b/packages/ui/src/cookie-consent/cookie-consent.vue
@@ -17,10 +17,10 @@ function showPreferences() {
 
 async function enableAnalytics() {
   const on = cc.getUserPreferences().acceptedCategories.includes('analytics');
+  useGtm()?.enable(on);
   if (!on)
     return;
 
-  useGtm()?.enable(true);
   setOptions(gTagConfig());
   await bootstrap();
 };

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml