feat(plugin-google-analytics)!: migrate to google analytics 4 (close #36)

BREAKING CHANGE: migrate to google analytics 4 and drop v3 support

Author: meteorlxy

Diff for: .vscode/settings.json

@@ -23,6 +23,7 @@
     "esbuild",
     "frontmatter",
     "globby",
+    "gtag",
     "nprogress",
     "prefetch",
     "preload",

Diff for: packages/@vuepress/plugin-google-analytics/package.json

@@ -31,8 +31,7 @@
   "dependencies": {
     "@vuepress/client": "2.0.0-alpha.20",
     "@vuepress/core": "2.0.0-alpha.20",
-    "@vuepress/utils": "2.0.0-alpha.20",
-    "vue-router": "^4.0.3"
+    "@vuepress/utils": "2.0.0-alpha.20"
   },
   "publishConfig": {
     "access": "public"

Diff for: packages/@vuepress/plugin-google-analytics/src/clientAppEnhance.ts

@@ -7,13 +7,10 @@ declare const GA_ID: string
 
 const id = GA_ID
 
-const clientAppEnhance: ClientAppEnhance = ({ router }) => {
+const clientAppEnhance: ClientAppEnhance = () => {
   if (__DEV__ || __SSR__ || !id) return
 
-  useGoogleAnalytics({
-    id,
-    router,
-  })
+  useGoogleAnalytics(id)
 }
 
 export default clientAppEnhance

Diff for: packages/@vuepress/plugin-google-analytics/src/composables/useGoogleAnalytics.ts

@@ -1,35 +1,44 @@
-import { START_LOCATION } from 'vue-router'
-import type { Router } from 'vue-router'
-
-declare const ga: (...args: any) => void
-
-export interface UseGoogleAnalyticsOptions {
-  id: string
-  router: Router
+declare global {
+  interface Window {
+    dataLayer: any[]
+    gtag: (...args: any[]) => void
+  }
 }
 
+declare const gtag: (...args: any[]) => void
+
 /**
- * Add analytics.js to your site
+ * Add gtag.js to your site
  *
- * @see https://developers.google.com/analytics/devguides/collection/analyticsjs
+ * @see https://developers.google.com/analytics/devguides/collection/gtagjs
+ * @see https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ * @see https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
+ *
+ * The enhanced measurement will listen to browser history events (i.e `pushState`, `popState`, and `replaceState`)
+ * to collect page_view event, so we do not need to report it manually
+ *
+ * @see https://support.google.com/analytics/answer/9216061
  */
-export const useGoogleAnalytics = ({
-  id,
-  router,
-}: UseGoogleAnalyticsOptions): void => {
-  // @ts-ignore
-  // eslint-disable-next-line
-  ;(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+export const useGoogleAnalytics = (id: string): void => {
+  // avoid duplicated import
+  if (window.dataLayer && window.gtag) {
+    return
+  }
+
+  // insert gtag `<script>` tag
+  const gtagScript = document.createElement('script')
+  gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
+  gtagScript.async = true
+  document.head.appendChild(gtagScript)
 
-  ga('create', id, 'auto')
-  ga('set', 'anonymizeIp', true)
+  // insert gtag snippet
+  window.dataLayer = window.dataLayer || []
+  // the gtag function must use `arguments` object to forward parameters
+  window.gtag = function () {
+    // eslint-disable-next-line prefer-rest-params
+    window.dataLayer.push(arguments)
+  }
 
-  router.afterEach((to, from) => {
-    // send pv after the route is changed
-    // notice vue-router will trigger an initial navigation from `START_LOCATION`
-    if (to.path !== from.path || from === START_LOCATION) {
-      ga('set', 'page', `${router.options.history.base}${to.path}`)
-      ga('send', 'pageview')
-    }
-  })
+  gtag('js', new Date())
+  gtag('config', id)
 }