vue-nuxt项目做谷歌统计
基于手里项目是一个nuxt.js项目，根据谷歌统计官方文档给出的示例，直接添加Google Analytics （也称google分析代码）加入到index.html中是不可用的。
Google analytics
注册成为Google的用户,注意将默认语言设置成英文,这个可以在完成GA注册后再改回来。
注册GA免费服务,访问地址 http://www.google.com/analytics/ 点击创建账户(Create Account), 按提示填写注册信息。
进入GA管理页面,配置跟踪站点，可以选择是网站或者app等。
选择网站后，填写你的网站域名地址后点击创建。
此时会显示全局网站代码，我们只需要复制 gtag里边config后边那串code就好了，填写的位置在我下方的代码中
创建ga.js
首先要在
plugins文件夹下新建一个ga.js（这里的ga.js是自己命名的哦）文件,这个js 主要是以nuxt的方式引入Analytics.js这样引进来只适合web流量统计分析，这里边的全局函数
ga在项目中是找不到的，只能在当前文件使用
//这句是只有生产环境才会统计，为了方便测试一开始从测试环境也要使用
// if (process.client && process.env.NODE_ENV === 'production') {
if (process.client) {
/*
** Google 统计分析脚本
/
(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'
)
/
** 当前页的访问统计
*/
ga('create', '***************', 'auto') //这里要填写你自己的google代码 code
}
export default ({
app: {
router
},
store,
}) => {
/*
** 每次路由变更时进行pv统计
/
// if (process.client && process.env.NODE_ENV === 'production') {
if (process.client) {
router.afterEach((to, from) => {
/
** 告诉 GA 增加一个 PV
*/
ga('set', 'page', to.fullPath)
ga('send', 'pageview')
ga('require', 'ec');
})
}
}
- 发布项目，然后在GA后台查看是否有侦测数据，需要同步打开目标网站，这是实时数据，如果有数据则安装成功。
注：关于GA的更多操作可自行研究
