feat(gtm): add google tag manager

emqx · Apr 28, 2023 · 42f2e89 · 42f2e89
1 parent fe0fa65
commit 42f2e89
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/web/package.json b/web/package.json
@@ -11,6 +11,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@gtm-support/vue2-gtm": "^1.3.0",
     "axios": "^0.21.2",
     "core-js": "~2.6.11",
     "element-ui": "^2.13.0",
@@ -25,7 +26,6 @@
     "vue-class-component": "^7.0.2",
     "vue-click-outside": "^1.1.0",
     "vue-clipboard2": "^0.3.1",
-    "vue-gtag": "1",
     "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.4.9",

diff --git a/web/src/main.ts b/web/src/main.ts
@@ -11,21 +11,18 @@ import Lang from './lang'
 import element from './utils/element'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import VueRx from 'vue-rx'
-import VueGtag from 'vue-gtag'
+import VueGtm, { VueGtmUseOptions } from '@gtm-support/vue2-gtm'
 
 Vue.use(element)
 Vue.use(VueI18n)
 Vue.use(VueClipboard)
 Vue.use(VueVirtualScroller)
 Vue.use(VueRx)
-Vue.use(
-  VueGtag,
-  {
-    config: { id: 'UA-132213201-1' },
-    enabled: process.env.NODE_ENV === 'production',
-  },
-  router,
-)
+Vue.use(VueGtm, {
+  id: 'GTM-K487G9S',
+  enabled: process.env.NODE_ENV === 'production' && process.env.BASE_URL === '/online-mqtt-client/',
+  debug: false,
+} as VueGtmUseOptions)
 
 const locale: Language = store.state.app.currentLang
 const vueI18n: VueI18n = new VueI18n({

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
@@ -37,4 +37,16 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.afterEach((to) => {
+  Vue.nextTick(() => {
+    window.dataLayer?.push({
+      event: 'pageView',
+      pageType: 'PageView',
+      routeName: to.name,
+      pageUrl: `${location.pathname}${location.hash}`,
+      pageTitle: to.name,
+    })
+  })
+})
+
 export default router
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -762,6 +762,18 @@
   resolved "https://registry.yarnpkg.com/@fullhuman/vue-cli-plugin-purgecss/-/vue-cli-plugin-purgecss-2.2.0.tgz#fba98dd587d1722e75bc1285cf9de7fc65fe7809"
   integrity sha512-1dGGk5nZiyiuSHJ0SuuEyDY4dViEFKAKYEiD2ML+jQeSEXk58gZJFVbUJLCOOXRKJTs65xMEMU7hIjK+NTpSbA==
 
+"@gtm-support/core@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@gtm-support/core/-/core-1.3.0.tgz#125bf953795bdbc23fcf123a9010a387f3be1af6"
+  integrity sha512-+dGzsV9hu4XgtlLmUps+nxWuLmnu57ByZuoExBpc9D6KsZ3Q9gk4dFf7H1TxLqcIOtTW2KlrOtO5hPV5Hoo2JA==
+
+"@gtm-support/vue2-gtm@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@gtm-support/vue2-gtm/-/vue2-gtm-1.3.0.tgz#f1eb7a83d71498a9f584aaa0f8993efb211d693d"
+  integrity sha512-yO7+gxSQEEcPH6gWMNcdhRDyj4ApBnG4JHIizP1HfY8y1+8SFNQIWE1icJY8l3wNW6DYVz3wtP+Ri2Wk4aF7Kw==
+  dependencies:
+    "@gtm-support/core" "1.3.0"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -9590,11 +9602,6 @@ vue-clipboard2@^0.3.1:
   dependencies:
     clipboard "^2.0.0"
 
-vue-gtag@1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/vue-gtag/-/vue-gtag-1.16.1.tgz#edb2f20ab4f6c4d4d372dfecf8c1fcc8ab890181"
-  integrity sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"