Google-Analytics介绍

Google Analytics 是一款由 Google 提供的免费网站分析工具。它帮助网站管理员和营销人员深入了解他们的网站访问者，并提供有关网站流量、用户行为和转化率的详细数据

简单来说：就是监控和埋点

UA(GA3)和GA4的历史以及升级的必要性

什么是UA（GA3）

UA（GA3）是传统的 Google Analytics 版本，也被称为Universal Analytics。

什么是GA4

GA4是Google Analytics的最新版本，于2020年推出。

为什么需要升级，而且是现在

UA(GA3)在2023年7月之后将停止收集信息

升级为GA4的几种方案

v-gatg

文档 github

标注: 新版的vue-vtag2只支持vue3，如果你的项目是vue2，vue-gtag需要回退到版本1.16.1

nuxt3下升级

方法一：手动接入vue-vtag2

方法二：接入gtag-modules

在Nuxt2下如何升级

1. 安装vue-gtag1.16.1

npm i vue-gtag@1.16.1

2. 在nuxt项目的plugins中新建一个文件gtag.js

import Vue from 'vue'
import VueGtag from 'vue-gtag'

export default (ctx, inject) => {
	Vue.use(VueGtag, {
		config: {
			id: 你的id
			params: {
				send_page_view: true
			}
		}
	})

	ctx.$gtag = Vue.$gtag
	inject('gtag', Vue.$gtag)
}

3.在nuxt.config.js中接入

export default {
    plugins:[
    	'@/plugins/gtag',
            'xxxx'
    ]
}

注意这里@是自己定义的alias，如果你想在xxx文件中使用到gtag，尽量在xxx的前面插入'@/plugins/gtag'

• 以下就是在xxx中的使用

4.注意使用时的参数（ <xxx> 代表值）

在.vue文件中使用需要在$gtag前面加this,例如 `this.$gtag.event`

• UA（GA3）

$ga.event(<event_category>, <action>,<event_label>,<value>)

• GA4

$gtag.event(<action>, {
	event_category:<event_category> ,
	event_label: <event_label>,
        value:<value>
})