Vue2/Nuxt2中使用google analytics加埋点

版本

"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