Migrate to GTM

client/components/pages/auth/components/RegisterForm.vue

@@ -190,6 +190,14 @@ export default {
       this.formsStore.loadAll(this.workspaceStore.currentId)
 
       this.logEvent("register", {source: this.form.hear_about_us})
+      try {
+        useGtm().trackEvent({
+          event: 'register',
+          source: this.form.hear_about_us
+        })
+      } catch (error) {
+        console.error(error)
+      }
 
       // AppSumo License
       if (data.appsumo_license === false) {

client/gtm.js

@@ -0,0 +1,5 @@
+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)
+}

client/nuxt.config.ts

@@ -2,6 +2,7 @@
 import runtimeConfig from "./runtimeConfig"
 import {sentryVitePlugin} from "@sentry/vite-plugin"
 import sitemap from "./sitemap"
+import gtm from "./gtm"
 
 export default defineNuxtConfig({
     loglevel: process.env.NUXT_LOG_LEVEL || 'info',
@@ -13,7 +14,7 @@ export default defineNuxtConfig({
         '@vueuse/motion/nuxt',
         'nuxt-simple-sitemap',
         '@nuxt/ui',
-        ...process.env.NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE ? ['nuxt-gtag'] : [],
+        ...process.env.NUXT_PUBLIC_GTM_CODE ? ['@zadigetvoltaire/nuxt-gtm'] : [],
     ],
     build: {
         transpile: process.env.NODE_ENV === "development" ? [] : ["vue-notion", "query-builder-vue-3", "vue-signature-pad"],
@@ -69,5 +70,6 @@ export default defineNuxtConfig({
         classPrefix: '',
     },
     sitemap,
-    runtimeConfig
+    runtimeConfig,
+    gtm
 })

client/package-lock.json

@@ -50,12 +50,12 @@
       "devDependencies": {
         "@nuxt/devtools": "~1.0.0",
         "@nuxt/eslint-config": "^0.2.0",
+        "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
         "autoprefixer": "^10.4.16",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "nuxt": "^3.9.1",
-        "nuxt-gtag": "^1.1.2",
         "nuxt-icon": "^0.6.10",
         "nuxt-simple-sitemap": "^4.2.3",
         "postcss": "^8.4.32",
@@ -1528,6 +1528,32 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
+    "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
+    },
+    "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,
+      "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/@hcaptcha/vue3-hcaptcha": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.3.0.tgz",
@@ -5417,6 +5443,21 @@
       "devOptional": true,
       "peer": true
     },
+    "node_modules/@zadigetvoltaire/nuxt-gtm": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@zadigetvoltaire/nuxt-gtm/-/nuxt-gtm-0.0.13.tgz",
+      "integrity": "sha512-7SgXtIB8uLdLGJaoUAQSGCSbRnNzplNkNVFKIHaVI4We0vqghstBoVPlJCJ9VdwsfdNyk3/C+Lh1uKpzTrtEuw==",
+      "dev": true,
+      "dependencies": {
+        "@gtm-support/vue-gtm": "^2.0.0",
+        "@nuxt/kit": "^3.5.1",
+        "defu": "^6.1.2",
+        "sirv": "^2.0.3"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -10545,18 +10586,6 @@
         }
       }
     },
-    "node_modules/nuxt-gtag": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/nuxt-gtag/-/nuxt-gtag-1.2.1.tgz",
-      "integrity": "sha512-2ss0HLoSmA4wiu5WDSFuVZBT5T4qH+XFqau614OK3idIYeY88uG2Lrn7Iy/xy3jpSiMM+ux/0ziEIa4n1NGcWA==",
-      "dev": true,
-      "dependencies": {
-        "@nuxt/kit": "^3.10.2",
-        "defu": "^6.1.4",
-        "pathe": "^1.1.2",
-        "ufo": "^1.4.0"
-      }
-    },
     "node_modules/nuxt-icon": {
       "version": "0.6.10",
       "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.10.tgz",

client/package.json

@@ -14,12 +14,12 @@
   "devDependencies": {
     "@nuxt/devtools": "~1.0.0",
     "@nuxt/eslint-config": "^0.2.0",
+    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "nuxt": "^3.9.1",
-    "nuxt-gtag": "^1.1.2",
     "nuxt-icon": "^0.6.10",
     "nuxt-simple-sitemap": "^4.2.3",
     "postcss": "^8.4.32",

client/pages/subscriptions/success.vue

@@ -63,11 +63,16 @@ export default {
     redirectIfSubscribed() {
       if (this.user.is_subscribed) {
         useAmplitude().logEvent("subscribed", {
-          plan: this.user.has_enterprise_subscription ? "enterprise" : "pro",
+          plan: "pro",
         })
         this.crisp.pushEvent("subscribed", {
-          plan: this.user.has_enterprise_subscription ? "enterprise" : "pro",
+          plan: "pro",
         })
+        try {
+          useGtm().trackEvent({event: 'subscribed'})
+        } catch (error) {
+          console.error(error)
+        }
         this.$router.push({name: "home"})
 
         if (this.user.has_enterprise_subscription) {

client/runtimeConfig.js

@@ -5,7 +5,7 @@ export default {
     appUrl: process.env.NUXT_PUBLIC_APP_URL || '',
     env: process.env.NUXT_PUBLIC_ENV || 'local',
     hCaptchaSiteKey: process.env.NUXT_PUBLIC_H_CAPTCHA_SITE_KEY || null,
-    googleAnalyticsCode: process.env.NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE || null,
+    gtmCode: process.env.NUXT_PUBLIC_GTM_CODE || null,
     amplitudeCode: process.env.NUXT_PUBLIC_AMPLITUDE_CODE || null,
     crispWebsiteId: process.env.NUXT_PUBLIC_CRISP_WEBSITE_ID || null,
     aiFeaturesEnabled: process.env.NUXT_PUBLIC_AI_FEATURES_ENABLED || false,

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "opnform",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}