feat: catalogue can use google analytics

apps/nuxt3-ssr/Dockerfile

@@ -42,6 +42,9 @@ ENV NUXT_PUBLIC_COHORT_ONLY=$NUXT_PUBLIC_COHORT_ONLY
 # pass optional analytics key 
 ENV NUXT_PUBLIC_ANALYTICS_KEY=$NUXT_PUBLIC_ANALYTICS_KEY
 
+# pass optional name of analytics provider (for example: "google-analytics" defaults to "siteimprove") 
+ENV NUXT_PUBLIC_ANALYTICS_PROVIDER=$NUXT_PUBLIC_ANALYTICS_PROVIDER
+
 ## Start the server
 CMD node .output/server/index.mjs
 

apps/nuxt3-ssr/app.vue

@@ -1,6 +1,20 @@
 <script setup lang="ts">
 const config = useRuntimeConfig();
 const route = useRoute();
+const { initialize } = useGtag()
+
+const analyticsService = computed(() => {
+  if( typeof config.public.analyticsProvider === "string" ) {
+    if(config.public.analyticsProvider.includes("siteimprove") ) {
+      return "siteimprove";
+    }
+    else if(config.public.analyticsProvider === "google-analytics" ) {
+      return "google-analytics";
+    } else {
+      return "";
+    }
+  }
+});
 
 const isAnalyticsAllowedCookie = useCookie("mg_allow_analytics", {
   maxAge: 34560000,
@@ -18,6 +32,10 @@ function setAnalyticsCookie(value: boolean) {
   }
 }
 
+if(import.meta.client && config.public.analyticsKey && isAnalyticsAllowedCookie.value && analyticsService.value === "google-analytics") {
+  initialize(config.public.analyticsKey);
+}
+
 const faviconHref = config.public.emx2Theme
   ? `/_nuxt-styles/img/${config.public.emx2Theme}.ico`
   : "/_nuxt-styles/img/molgenis.ico";
@@ -40,7 +58,7 @@ useHead({
     }
   },
   script:
-    config.public.analyticsKey && isAnalyticsAllowedCookie.value
+    config.public.analyticsKey && isAnalyticsAllowedCookie.value && analyticsService.value === "siteimprove"
       ? [
           {
             src: `https://siteimproveanalytics.com/js/siteanalyze_${config.public.analyticsKey}.js`,

apps/nuxt3-ssr/interfaces/types.ts

@@ -377,3 +377,5 @@ export interface UIResource {
   id: string;
   logo: { url: string };
 }
+
+export type analyticsSericves = "siteimprove" | "google-analytics";

apps/nuxt3-ssr/nuxt.config.ts

@@ -4,7 +4,7 @@ import { defineNuxtConfig } from "nuxt/config";
 export default defineNuxtConfig({
   extends: ["../tailwind-components"],
   devtools: { enabled: true },
-  modules: ["@nuxt/image", "@nuxt/test-utils/module"],
+  modules: ["@nuxt/image", "@nuxt/test-utils/module", "nuxt-gtag"],
   tailwindcss: {
     cssPath: "../tailwind-components/assets/css/main.css",
     configPath: "../tailwind-components/tailwind.config.js",
@@ -15,6 +15,7 @@ export default defineNuxtConfig({
       emx2Logo: "",
       siteTitle: "MOLGENIS",
       analyticsKey: "",
+      analyticsProvider: "siteimprove",
       cohortOnly: false,
       apiBase:
         process.env.NUXT_PUBLIC_API_BASE ||
@@ -49,4 +50,8 @@ export default defineNuxtConfig({
       global: true,
     },
   ],
+  // @ts-ignore // gtag is not in the types
+  gtag: {
+    initMode: 'manual',
+  }
 });

apps/nuxt3-ssr/package.json

@@ -46,6 +46,7 @@
     "@vueuse/core": "10.7.0",
     "floating-vue": "5.2.2",
     "metadata-utils": "*",
+    "nuxt-gtag": "3.0.1",
     "vite": "5.4.6",
     "vue": "3.5.6"
   }