Migrate to GTM

This commit is contained in:
Julien Nahum 2024-06-06 18:03:41 +02:00
parent 40b7aa321b
commit 17476107df
8 changed files with 88 additions and 45 deletions

View File

@ -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,7 +189,15 @@ 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) {
@ -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"})
}
},
},

5
client/gtm.js vendored Normal file
View File

@ -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)
}

View File

@ -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
})

View File

@ -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",

View File

@ -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",

View File

@ -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,12 +63,17 @@ 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(

View File

@ -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,

6
package-lock.json generated
View File

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