feat: add gtag track events

app/app.vue

@@ -12,6 +12,7 @@ initConfigStore()
 
 const configStore = useConfigStore()
 
+const { initialize: initializeHotJar } = useHotjar()
 const { isMobile } = useDevice()
 const { global } = useTheme()
 
@@ -29,6 +30,8 @@ onBeforeMount(async () => {
     // notify(payload.notification?.body as string, { type: 'primary', link: `/projects/${linkSplits![1]}` })
     })
   }
+
+  initializeHotJar()
 })
 </script>
 

app/components/account-settings/AccountSettingsBillingAndPlans.vue

@@ -24,6 +24,8 @@ async function handleOpenStripePortal() {
       body: t('You will be redirected to the Stripe portal to manage your subscription!'),
     })
 
+    useTrackEvent('subscription:portal')
+
     if (import.meta.env.STRIPE_CUSTOMER_PORTAL_URL)
       window.location.href = import.meta.env.STRIPE_CUSTOMER_PORTAL_URL
     else

app/pages/auth/confirmation.vue

@@ -57,6 +57,8 @@ async function resendConfirmation() {
     notifySuccess({
       content: t('Another confirmation email has been sent to your email address!'),
     })
+
+    useTrackEvent('auth:confirmation')
   }
   catch {
     notifyError({

app/pages/auth/forgot-password.vue

@@ -44,6 +44,8 @@ async function sendResetLink() {
       content: t('An email has been sent to your email address with instructions to reset your password!'),
     })
 
+    useTrackEvent('auth:forgot-password')
+
     navigateTo('/auth/login')
   }
   catch (error: any) {

app/pages/auth/login.vue

@@ -54,6 +54,10 @@ async function login(provider?: string) {
   try {
     loading()
 
+    useTrackEvent('auth:login', {
+      method: provider
+    })
+
     if (provider) {
       await signIn(provider, {
         callbackUrl: withQuery(route.query.to ? String(route.query.to) : '/', { loggedIn: true }),

app/pages/auth/register.vue

@@ -50,6 +50,10 @@ async function login(provider?: string) {
   try {
     loading()
 
+    useTrackEvent('auth:signup', {
+      method: provider
+    })
+
     if (provider) {
       await signIn(provider, { callbackUrl: '/' })
     }

app/pages/auth/reset-password.vue

@@ -45,6 +45,8 @@ async function resetPassword() {
     })
 
     navigateTo('/auth/login')
+
+    useTrackEvent('auth:reset-password')
   }
   catch (error: any) {
     notifyError({ content: error.message })

app/pages/auth/verify.vue

@@ -38,6 +38,8 @@ async function handleVerify() {
     })
 
     navigateTo(redirectTo.value)
+
+    useTrackEvent('auth:verify')
   }
   catch (error: any) {
     notifyError({

nuxt.config.ts

@@ -250,6 +250,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     'nuxt-vuefire',
     'nuxt-gtag',
+    'nuxt-module-hotjar',
     'nuxt-nodemailer',
   ],
 
@@ -275,6 +276,14 @@ export default defineNuxtConfig({
     ],
   },
 
+  hotjar: {
+    hotjarId: process.env.HOTJAR_ID,
+    scriptVersion: 6,
+
+    // optionally you can turn on debug mode for development
+    debug: process.env.NODE_ENV === 'development',
+  },
+
   nodemailer: process.env.NODE_ENV === 'development'
     ? {
         from: process.env.SMTP_FROM,

package.json

@@ -136,6 +136,7 @@
     "nodemailer": "^6.9.15",
     "nuxt": "^3.13.2",
     "nuxt-gtag": "^3.0.2",
+    "nuxt-module-hotjar": "^1.3.2",
     "nuxt-nodemailer": "^1.1.2",
     "nuxt-vuefire": "^1.0.3",
     "ofetch": "1.3.4",