From 17476107df98819ecfbb9c490f6355394e33f6cc Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 6 Jun 2024 18:03:41 +0200
Subject: [PATCH] Migrate to GTM

---
 .../pages/auth/components/RegisterForm.vue    | 38 ++++++++-----
 client/gtm.js                                 |  5 ++
 client/nuxt.config.ts                         |  6 +-
 client/package-lock.json                      | 55 ++++++++++++++-----
 client/package.json                           |  2 +-
 client/pages/subscriptions/success.vue        | 19 ++++---
 client/runtimeConfig.js                       |  2 +-
 package-lock.json                             |  6 --
 8 files changed, 88 insertions(+), 45 deletions(-)
 create mode 100644 client/gtm.js
 delete mode 100644 package-lock.json

diff --git a/client/components/pages/auth/components/RegisterForm.vue b/client/components/pages/auth/components/RegisterForm.vue
index 32d9b26f..92a06aed 100644
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@@ -102,8 +102,8 @@
 </template>
 
 <script>
-import { opnFetch } from "~/composables/useOpnApi.js"
-import { fetchAllWorkspaces } from "~/stores/workspaces.js"
+import {opnFetch} from "~/composables/useOpnApi.js"
+import {fetchAllWorkspaces} from "~/stores/workspaces.js"
 
 export default {
   name: "RegisterForm",
@@ -140,21 +140,21 @@ export default {
   computed: {
     hearAboutUsOptions() {
       const options = [
-        { name: "Facebook", value: "facebook" },
-        { name: "Twitter", value: "twitter" },
-        { name: "Reddit", value: "reddit" },
-        { name: "Github", value: "github" },
+        {name: "Facebook", value: "facebook"},
+        {name: "Twitter", value: "twitter"},
+        {name: "Reddit", value: "reddit"},
+        {name: "Github", value: "github"},
         {
           name: "Search Engine (Google, DuckDuckGo...)",
           value: "search_engine",
         },
-        { name: "Friend or Colleague", value: "friend_colleague" },
-        { name: "Blog/Article", value: "blog_article" },
+        {name: "Friend or Colleague", value: "friend_colleague"},
+        {name: "Blog/Article", value: "blog_article"},
       ]
-        .map((value) => ({ value, sort: Math.random() }))
+        .map((value) => ({value, sort: Math.random()}))
         .sort((a, b) => a.sort - b.sort)
-        .map(({ value }) => value)
-      options.push({ name: "Other", value: "other" })
+        .map(({value}) => value)
+      options.push({name: "Other", value: "other"})
       return options
     },
   },
@@ -189,18 +189,26 @@ export default {
       // Load forms
       this.formsStore.loadAll(this.workspaceStore.currentId)
 
-      this.logEvent("register", { source: this.form.hear_about_us })
+      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) {
         useAlert().error(
           "Invalid AppSumo license. This probably happened because this license was already" +
-            " attached to another OpnForm account. Please contact support.",
+          " attached to another OpnForm account. Please contact support.",
         )
       } else if (data.appsumo_license === true) {
         useAlert().success(
           "Your AppSumo license was successfully activated! You now have access to all the" +
-            " features of the AppSumo deal.",
+          " features of the AppSumo deal.",
         )
       }
 
@@ -208,7 +216,7 @@ export default {
       if (this.isQuick) {
         this.$emit("afterQuickLogin")
       } else {
-        this.$router.push({ name: "forms-create" })
+        this.$router.push({name: "forms-create"})
       }
     },
   },
diff --git a/client/gtm.js b/client/gtm.js
new file mode 100644
index 00000000..c838cef6
--- /dev/null
+++ b/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)
+}
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 39e7faca..702771a7 100644
--- a/client/nuxt.config.ts
+++ b/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
 })
diff --git a/client/package-lock.json b/client/package-lock.json
index 74fadce1..08f5e165 100644
--- a/client/package-lock.json
+++ b/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",
diff --git a/client/package.json b/client/package.json
index 2a2235be..9716e8de 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/pages/subscriptions/success.vue b/client/pages/subscriptions/success.vue
index 44869a29..e27e9eb1 100644
--- a/client/pages/subscriptions/success.vue
+++ b/client/pages/subscriptions/success.vue
@@ -18,8 +18,8 @@
 </template>
 
 <script>
-import { computed } from "vue"
-import { useAuthStore } from "../../stores/auth"
+import {computed} from "vue"
+import {useAuthStore} from "../../stores/auth"
 
 export default {
   layout: "default",
@@ -63,22 +63,27 @@ 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",
         })
-        this.$router.push({ name: "home" })
+        try {
+          useGtm().trackEvent({event: 'subscribed'})
+        } catch (error) {
+          console.error(error)
+        }
+        this.$router.push({name: "home"})
 
         if (this.user.has_enterprise_subscription) {
           useAlert().success(
             "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Enterprise " +
-              "features. No need to invite your teammates, just ask them to create a OpnForm account and to connect the same Notion workspace. Feel free to contact us if you have any question 🙌",
+            "features. No need to invite your teammates, just ask them to create a OpnForm account and to connect the same Notion workspace. Feel free to contact us if you have any question 🙌",
           )
         } else {
           useAlert().success(
             "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Pro " +
-              "features. Feel free to contact us if you have any question 🙌",
+            "features. Feel free to contact us if you have any question 🙌",
           )
         }
       }
diff --git a/client/runtimeConfig.js b/client/runtimeConfig.js
index eb1414a6..4580643c 100644
--- a/client/runtimeConfig.js
+++ b/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,
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index e4c309cd..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "opnform",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}