vue中使用Google Analytics

什么是 Google Analytics

Google Analytics 是一个多平台埋点分析工具，即只要在平台上添加相关的追踪代码(tracking code)，GA 就可以监测和收集使用者在平台上的各种行为资料，比如页面停留时长、访问次序、点击了哪些内部链接等等。官方提供了两个SDK，一个是analytics.js，一个是gtag.js。本文用的是官方推荐的gtag.js。

如何正确地初始化

只要把官方提供的脚本内容放到index.html文件即可。

<!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-149950392-1"></script>
  <script>
            window.dataLayer = window.dataLayer || []
            function gtag() {
                dataLayer.push(arguments)
            }
            gtag('js', new Date())

            gtag('config', 'UA-149950392-1')
  </script>

GA基本用法：页面跟踪与事件跟踪

事件跟踪与事件跟踪是GA最基本最主要的用法。

页面跟踪

一般的网站，只需要在index.html中加个GA的代码就能完成页面跟踪了，但是对于SPA来说并不行，因为路由之间的跳转并没有刷新页面，GA感知不到，因此需要手动触发。在vue-cli的工程中，可使用如下代码简单处理：

router.afterEach((to, from, next) => {
    window.gtag('config', this.GA_TRACKING_ID, {
                page_title: title,
                page_path: page,
                page_location: location
            })
})

事件跟踪

原生的代码是

window.gtag('event', eventAction, {
                event_category: eventCategory,
                event_label: eventLabel,
                value: eventValue,
                send_to: this.GA_TRACKING_ID
            })

值得一提的是事件四个参数的设置：
event_category: 一般为一个大类，比如品牌brand,视频video等等
eventAction: 一般为一个具体的操作，比如download, play, click等等
event_label: 一般为额外的一些信息，比如具体的品牌ID，视频的title等等
value: 任意的度量值，必须为正的整数，比如表示品牌的价值，视频的时长等等

代码封装

考虑到以后有可能会更换分析工具，所以我会把接口都封装到一个对象里面，就算以后更换工具，只要接口一致，改变接口的实现即可。

//google-analyze.js
export default {
    GA_TRACKING_ID: '', //ga的id
    event(eventCategory, eventAction, eventLabel, eventValue) {
        if (window.gtag) {
            window.gtag('event', eventAction, {
                event_category: eventCategory,
                event_label: eventLabel,
                value: eventValue,
                send_to: this.GA_TRACKING_ID
            })
        }
    },
    page(page, title, location) {
        if (window.gtag) {
            window.gtag('config', this.GA_TRACKING_ID, {
                page_title: title,
                page_path: page,
                page_location: location
            })
        }
    }
}

自定义指令

把统计代码和业务逻辑混在一起，总感觉不是很优雅。可以考虑对需要统计的元素添加自定义指令，统一处理上报，当然这种方式不一定适合所有情况。

import ga from 'google-analyze.js'

export default {
    bind(el, binding) {
        el.addEventListener('click', () => {
            // binding.value 拿到 v-ga 指令的参数
            let { eventCategory, eventAction, eventLabel, eventValue } = binding.value
            ga.event(eventCategory, eventAction, eventLabel, eventValue)
        })
    },

    unbind(el) {
        el.removeEventListener('click', () => {})
    }
}

如何检查GA是否正常工作?

使用Chrome的Tag Assistant插件,具体使用可以参考https://www.cnblogs.com/pheye/p/9014797.html

参考资料

vue-cli的工程如何正确使用Google Analytics？
Google Analytics 埋点
Vue 自定义指令上报 Google Analytics 事件统计