版本
"vue": "^2.7.10",
"nuxt": "^2.15.8",
"eslint": "^8.24.0",
准备
需要有一个gaid(https://analytics.google.com/analytics/web/provision/#/provision)
在vue2/Nuxt3项目中使用Google Analytics
新建analytics.js
在static目录下新建analytics.js文件,内容如下(记得把Your_GAID替换成你的gaid):
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'Your_GAID')
修改nuxt.config.js文件
head内新增(记得把Your_GAID替换成你的gaid):
script: [
{
src: "https://www.googletagmanager.com/gtag/js?id=Your_GAID",
async: true,
},
{ src: "/analytics.js" }
]
修改.eslintrc.js(如果你用了的话,用于解决gtag找不到的情况)
module.exports内新增:
globals: {
"gtag": true,
},
加埋点
参考官网https://developers.google.com/tag-platform/gtagjs/configure?hl=zh-cn
常用格式:
gtag('event', 'event_name', {
'key': 'value',
});
用法示例:
methods: {
jumpIntroduction(){
gtag('event', 'jumpintroduction_click', {});
}
},
检验打点
在谷歌浏览器中安装插件Google Analytics Debugger
在你打好点的网页触发打点事件,打开控制台如果有打点信息的信息打印即说明打点成功
以及通过Tag Assistant(https://tagassistant.google.com/?hl=zh-cn,输入要验证的网站的网址。检查您的 Google 代码 ID 是否在 Google tags found(找到的 Google 代码)顶栏中显示。
参考
https://developers.google.com/tag-platform/gtagjs/install?hl=zh-cn